Html.Grid right align data in column

Question

In an Html.Grid, how can we ensure that data in the column (e.g. currency amounts) gets right aligned?

Thanks.

Answer 1

Here's what worked for me. Within the grids htmlAttributes assign the resulting table an id. In this example "gridT". In the CSS create a style for "#gridT", for the second column to align the text 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.

Answer 2

You mean in the MvcContrib Grid?

You could use something like:

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

or more tidily you could set a class:

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

and set an appropriate style rule on that class.