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

PinnedRowTemplate

configuration

A function that allows customizing the rendering of pinned rows. The function receives an object with two fields: dataItem (the data item for the row) and row (the default HTML string for the row). The function must return an HTML string.

If not set, pinned rows use the same template as regular rows.

pinnedRowTemplate

Function

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: {
    data: [
      { id: 1, name: "Jane Doe", age: 30 },
      { id: 2, name: "John Doe", age: 33 },
      { id: 3, name: "Jim Doe", age: 25 }
    ],
    schema: {
      model: { id: "id" }
    }
  },
  pinnable: {
    top: [1]
  },
  pinnedRowTemplate: function(data) {
    return data.row.replace("<tr", '<tr style="background-color: #ffe0e0;"');
  }
});
</script>