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

Change text alignment in Grid cells

Environment

Product Progress® Kendo UI® Grid for jQuery
Product Version 2021.2.511

Description

How can I change the default text alignment of a Grid column to right or center?

Solution

Apply the k-text-left, k-text-right or k-text-center classes through the Grid column.attributes, column.headerAttributes and column.footerAttributes options.

<div id="grid"></div>
<script>
    $("#grid").kendoGrid({
      columns: [
        {
          field: "name",
            title: "Name"
        },
        {
          field: "age",
          title: "Age",
          footerTemplate: "Min: #: min # Max: #: max #",
            attributes: { "class": "k-text-right"},
            headerAttributes: { "class": "k-text-right"},
          footerAttributes: { "class": "k-text-right"}
        }
      ],
      dataSource: {
        data: [
          { name: "Jane Doe", age: 30 },
          { name: "John Doe", age: 33 }
        ],
        aggregate: [
            { field: "age", aggregate: "min" },
            { field: "age", aggregate: "max" }
        ]
      }
    });
</script>

Notes

In this article