New to Kendo UI for jQuery? Download free 30-day trial

Content Alignment

Loading Demo...
  • EXAMPLE
  • VIEW SOURCE
cell-alignment.html
Sample service

Also available for:

API REFERENCE

Description

This example demonstrates how to change the default text and value alignment of the columns in the Kendo UI Grid for jQuery.

Through the column definition you can specify the cell content alignment by using the attributes property:

{field: 'ShipCity', attributes: {style: 'text-align: right'}}
Alternatively, apply the `k-text-left`, `k-text-right` or `k-text-center` classes:
{field: 'OrderDate', attributes: {'class': 'k-text-right'}}

The alignment of the column header can be updated as well through the headerAttributes property:

{field: 'ShipCity', headerAttributes: {style: 'text-align: center; justify-content: center'}}

Additionally, you can align the column footer by using the footerAttributes property:

{field: 'Freight', footerAttributes: {style: 'text-align: right'}}


More about Kendo UI Grid for jQuery.

Support & Learning Resources