columns.attributes Object|Function

HTML attributes of the table cell (<td>) rendered for the column.

HTML attributes which are JavaScript keywords (e.g. class) must be quoted.

Example - specify column HTML attributes

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [ {
    field: "name",
    title: "Name",
    attributes: {
      "class": "table-cell !k-text-right",
      style: "font-size: 14px"
    }
  } ],
  dataSource: [ { name: "Jane Doe" }, { name: "John Doe" }]
});
</script>

The table cells would look like this: <td class="table-cell" style="text-align: right; font-size: 14px">...</td>.

Since R2 2023 attributes logic has changed due to Kendo templates evaluation rendering updates. Now we deliver a new attributes overload that accepts a single string parameter and the name of the JS handler that returns the attributes.

Example - set cells background color using a dynamic property value

<div id="grid"></div>
<script>
  let ageAttributes = (data) => {
    return { style: `background-color: ${data.color} ` }
  }

  $("#grid").kendoGrid({
    columns: [
      {
        field: "name",
        title: "Name",
        attributes: { "class": "table-cell !k-text-right" }
      },
      {
        field: "age",
        title: "Age",
        attributes: ageAttributes
      }
    ],
    dataSource: [
      { name: "Anne Smith", age: 30, color: "#FFD68A" },
      { name: "John Doe", age: 22, color: "#B2AC88" }
    ]
  });
</script>