pinRows

Pins one or more data rows to the top or bottom of the Grid. When called without arguments, returns the currently pinned rows.

Parameters

targets `Array|jQuery|Element|kendo.data.ObservableObject`

A single row or an array of rows to pin. Each item can be a jQuery object, DOM element, or data item.

position `String` (default: "bottom")

The position to pin the rows to. Accepted values are "top" or "bottom".

Returns

Object When called without arguments, returns an object with two properties:

Field	Type	Description
top	Array	An array of data items pinned to the top of the Grid.
bottom	Array	An array of data items pinned to the bottom of the Grid.

Example - get the pinned rows

<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]
  }
});
var grid = $("#grid").data("kendoGrid");
var pinned = grid.pinRows();
/* The result can be observed in the DevTools(F12) console of the browser. */
console.log("Top pinned:", pinned.top.length);
console.log("Bottom pinned:", pinned.bottom.length);
</script>

Example - pin a single row to the top

<button id="pin">Pin first row</button>
<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
});
$("#pin").click(function() {
  var grid = $("#grid").data("kendoGrid");
  var firstItem = grid.dataSource.at(0);
  grid.pinRows(firstItem, "top");
});
</script>

Example - pin multiple rows to the top

<button id="pin">Pin first two rows</button>
<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
});
$("#pin").click(function() {
  var grid = $("#grid").data("kendoGrid");
  var items = [grid.dataSource.at(0), grid.dataSource.at(1)];
  grid.pinRows(items, "top");
});
</script>