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

Content Alignment

Loading Demo...
  • EXAMPLE
  • VIEW SOURCE
  • Edit in Telerik REPL
HtmlHelper
TagHelper
Files:
cell_alignment.cshtml
Cell_AlignmentController.cs
OrderViewModel.cs
Cell_Alignment_TagHelper.cshtml

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 Core 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 Core

Support & Learning Resources