New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Content Alignment

Loading Demo...
  • Edit in Theme Builder
  • cell_alignment.cshtml
  • Cell_AlignmentController.cs
  • OrderViewModel.cs

Also available for:



This example demonstrates how to change the default text and value alignment of the columns in the Telerik for ASP.NET MVC Grid.

Through the column definition you can specify the cell content alignment by using the HtmlAttributes() method:

columns.Bound(o => o.ShipCity).HtmlAttributes(new { style = "text-align: right" });
Alternatively, apply the `k-text-left`, `k-text-right` or `k-text-center` classes:
columns.Bound(o => o.ShipCity).HtmlAttributes(new { @class = "k-text-right" });

The alignment of the column header can be updated as well through the HeaderHtmlAttributes() method:

columns.Bound(o => o.ShipCity).HeaderHtmlAttributes(new { style = "text-align: center" });

Additionally, you can align the column footer by using the FooterHtmlAttributes() method:

columns.Bound(o => o.Freight).FooterHtmlAttributes(new { style = "text-align: right" });

More about Telerik Grid for ASP.NET MVC

Support & Learning Resources