Html.Grid aligns data in a column

Question

In Html.Grid, how can we guarantee that the data in a column (e.g. currency amounts) is aligned to the right?

Thanks.

Answer 1

Do you mean in the MvcContrib grid?

You can use something like:

column.For(x => x.Amount).Attributes(style => "text-align:right"); 

or more accurately you can set the class:

 column.For(x => x.Amount).Attributes(@class => "right-align"); 

and set the appropriate style rule for this class.

Answer 2

Here is what worked for me. In grids, htmlAttributes assigns an identifier to the resulting table. In this example, "gridT". In CSS, create a style for "#gridT", for the second column, align the text on the left.

 @grid.GetHtml( . . htmlAttributes: new { id = "gridT" }, columns: grid.Columns( grid.Column(columnName: "ID", header: "ID"), grid.Column(columnName: "Name", header: "Name") <style> #gridT th:nth-child(2) { text-align: left; } </style> 

The second column "Name" will be left aligned.