Right align values using @html.grid column.format

Question

How can I right align values when using the columns.add() inside a @html.grid().columns collection?

@Html.Grid(Model.Unidades).Columns(columns => {
columns.Add()
    .Encoded(false)
    .Sanitized(false)
    .Titled("Volume")
    .RenderValueAs(o => CustomRenderingOfColumnVolume(o));
columns.Add(m => m.VolumeCorrigido)
    .Titled("Volume")
    .Format("{0:N4}")
    .Sanitized(false)
    .Encoded(false);
});

@helper CustomRenderingOfColumnVolume(Dto.ObjectDto item) { 
        <span style="text-align: right; width: 100%">@string.Format("{0:N2}", item.Volume)</span>
}

I've already tried, without success: - Custom .toString() from column object, but it does not permit custom format - Using .Format("{0,10}").SetWidth(30) like we do to right align using custom string format - Using @helper (see CustomRenderingOfColumnVolume above on code) - other many things I cannot remember now

I've found no documentation, no tutorial, no google specific result for this component. I just need some stuff to study or a tip to right align the column values. I will appreciate any help, even CSS for the column component in @helper.

Answer 1

You can apply a class to your column:

columns.Add().Encoded(false).Sanitized(false).Titled("Volume").RenderValueAs(o => CustomRenderingOfColumnVolume(o)).Css("align-right");

And then in your CSS:

.align-right{text-align: right !important}