Content Alignment
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 theHtmlAttributes()
method..Columns(columns => { columns.Bound(o => o.OrderID).HtmlAttributes(new { style = "text-align: right" }); })
<column field="OrderID" html-attributes='new Dictionary<string,object> { ["style"] = "text-align : right" }'/>
-
Apply the
k-text-left
,k-text-right
ork-text-center
classes to the column definition by using theHtmlAttributes()
method..Columns(columns => { columns.Bound(o => o.OrderID).HtmlAttributes(new { @class = "k-text-right" }); })
<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.
.Columns(columns =>
{
columns.Bound(o => o.OrderID).HeaderHtmlAttributes(new { style = "text-align: right; justify-content: flex-end;" });
})
<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.
.Columns(columns =>
{
columns.Bound(o => o.OrderID).FooterHtmlAttributes(new { style = "text-align: center" });
})
<column field="OrderID" footer-html-attributes='new Dictionary<string,object> ["style"] = "text-align: center" }'/>