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

PinRows

methods

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

pinRows

Parameters:targetsArray|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.

Returns:Object

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

<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>

<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>

<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>