Content Alignment

Updated over 6 months ago

By default, the text and values in the Grid are aligned to the left.

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

You can 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 specified column has a footer, you can 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 DataGrid Homepage

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

• Server-Side API