pinnable.pinRowLocationString(default: "both")
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.
Example - pin rows only to the top with a single click
<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>Example - pin rows only to the bottom with a single click
<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>