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>