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

Pinnable

configuration

Enables row pinning for the Grid. When enabled, rows can be pinned to the top or bottom of the Grid so they remain visible while scrolling through the remaining data. Pinned rows are rendered in dedicated containers above and below the scrollable content area.

The pinnable option can be set to true to enable the feature without initially pinned rows, or to an object specifying which rows to pin by their ID values.

Important: The data source must define an schema.model.id field for row pinning to work.

pinnable

Boolean|Object

Default: false

<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: true,
  contextMenu: true
});
</script>

pinnable.bottom

Array

An array of data item ID values that will be pinned to the bottom of the Grid on initialization.

<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],
    bottom: [3]
  }
});
</script>

pinnable.isRowPinnable

Function

A function that determines whether a specific row can be pinned. The function receives an object with a dataItem field containing the data item for the row, and must return a boolean value. When the function returns false for a row, the pin column renders an empty cell without a pin icon, the pin column context menu does not open for that row, and the pinRows method does not pin the row. Unpinning is always allowed regardless of this function's return value.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { pinnable: true, width: 40 },
    { 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: {
    isRowPinnable: function(context) {
      return context.dataItem.age > 30;
    }
  }
});
</script>

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { pinnable: true, width: 40 },
    { 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: {
    pinRowLocation: "top",
    isRowPinnable: function(context) {
      return context.dataItem.age > 30;
    }
  }
});
</script>

pinnable.pinRowLocation

String

Controls where rows can be pinned. When set to "top" or "bottom", the pin column renders a single toggle icon instead of a context menu, allowing rows to be pinned or unpinned with a single click. When set to "both" (the default), the pin column shows a context menu with options to pin to the top, pin to the bottom, or unpin.

The context menu items in the contextMenu are also updated accordingly when pinRowLocation is set to a single location.

Default: "both"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { pinnable: true, width: 40 },
    { 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: {
    pinRowLocation: "top"
  }
});
</script>

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { pinnable: true, width: 40 },
    { 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: {
    pinRowLocation: "bottom"
  }
});
</script>

pinnable.top

Array

An array of data item ID values that will be pinned to the top of the Grid on initialization.

<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, 2]
  }
});
</script>