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

Telerik UI for ASP.NET MVC Grid Content Alignment

Loading Demo...
  • EXAMPLE
  • VIEW SOURCE
cell_alignment.cshtml
Cell_AlignmentController.cs
OrderViewModel.cs

Also available for:

CLIENT-SIDE API SERVER-SIDE API

Description

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; justify-content: 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

This Grid example is part of unique collection of hundreds of ASP.NET MVC demos, with which you can see all Telerik ASP.NET MVC components and their features in action. View the source code of the demos from the library or directly adapt andedit their theme appearance in their theme appearance in the ThemeBuilder.

Support & Learning Resources

Additional Resources