Content Alignment

Updated on Oct 28, 2026

By default, Grid cell content is left-aligned.

The alignment methods in this article apply to cells generated from the column definitions. If you use a ClientRowTemplate(), the template defines the <tr> and <td> markup, so apply the alignment class or style directly to the relevant <td> elements in the template.

Cell Content

To change the content alignment of the Grid, use either of the following approaches:

• Apply a text-align style to the column definition by using the HtmlAttributes() method.

  Razor

      .Columns(columns =>
      {
          columns.Bound(o => o.OrderID).HtmlAttributes(new { style = "text-align: right" });
      })

  Razor

  <column field="OrderID" html-attributes='new Dictionary<string,object> { ["style"] = "text-align: right" }'/>

• Apply the k-text-left, k-text-right, or k-text-center classes to the column definition by using the HtmlAttributes() method.

  Razor

      .Columns(columns =>
      {
          columns.Bound(o => o.OrderID).HtmlAttributes(new { @class = "k-text-right" });
      })

  Razor

  <column field="OrderID" html-attributes='new Dictionary<string,object> { ["class"] = "k-text-right" }'/>

Column Headers

Set the alignment of the column headers through the HeaderHtmlAttributes() method.

Razor

    .Columns(columns =>
        {
            columns.Bound(o => o.OrderID).HeaderHtmlAttributes(new { style = "text-align: right; justify-content: flex-end;" });
        })

Razor

<column field="OrderID" header-html-attributes='new Dictionary<string,object> { ["style"] = "text-align: right; justify-content: flex-end;" }'/>

Column Footers

When a column has a footer, change the alignment of its content by using the FooterHtmlAttributes() method.

Razor

    .Columns(columns =>
        {
            columns.Bound(o => o.OrderID).FooterHtmlAttributes(new { style = "text-align: center" });
        })

Razor

    <column field="OrderID" footer-html-attributes='new Dictionary<string,object> { ["style"] = "text-align: center" }'/>

See Also

• ASP.NET Core Grid overview

• Content Alignment of the Grid HtmlHelper for ASP.NET Core (Demo)

• Grid server-side API reference for ASP.NET Core