如何在网格mvc中设置右侧的单元格文本对齐方式

Question

我使用过网格mvc。我希望显示与右侧对齐的单元格文本。

这是我的代码：

@Html.Grid(Model).Columns(columns =>
   {
       columns.Add(c => c.PoNo).Titled("PO No").SetWidth(200);
       columns.Add(c => c.PoDate).Format("{0:dd-MMM-yy}").Titled("PO Date").SetWidth(150);
       columns.Add(c => c.CompanyName).Titled("Company").SetWidth(500);
       columns.Add(c => c.PartyName).Titled("Party").SetWidth(500);
       columns.Add(c => c.Amount).Titled("PO Amount").SetWidth(400);

此处金额应显示在单元格右侧的值。

如何做到这一点？

感谢

Answer 1

我找不到这个问题的原生答案，但我找到了一个不错的方法来使用css。

<style>
/*Simple css hack to right align text*/
td[data-name='FieldNameHere'] { 
    text-align:right;
}
</style>

它基本上找到具有正确属性值的td元素。

Answer 2

columns.Add(c => c.Amount).Titled("PO Amount").Css("text-right);

如果您的站点中有Bootstrap.css，则此操作有效。

Answer 3

我通过使用RenderValueAs并将Sanitized和Encoded设置为false来管理此问题。我还使用了pull-right引导程序类：

columns.Add(c => c.Amount)
       .Titled("PO Amount")
       .SetWidth(400)
       .RenderValueAs(x=>String.Format("<span class="pull-right">{0}</span>",c.Amount))
       .Encoded(false)
       Sanitized(false);