Angular Grid Row Pinning
The Kendo UI for Angular Grid supports row pinning that keeps specific rows visible at the top or bottom of the Grid while the user scrolls through the data. Pinned rows remain in place regardless of sorting, filtering, or paging, making them ideal for monitoring critical data entries such as out-of-stock items, high-priority orders, or key performance indicators.
The following example demonstrates the row pinning functionality of the Grid.
Enabling Row Pinning
The Grid provides multiple approaches for enabling row pinning. All of them require the pinnable property. The property accepts a boolean or a GridRowPinLocation string. Setting pinnable to true enables pinning to both directions. To restrict the pinning direction, use one of the following string values:
top—Allows pinning rows to the top of the Grid only.bottom—Allows pinning rows to the bottom of the Grid only.both—Allows pinning rows to both the top and bottom of the Grid.
Choose the approach that best fits your layout and data-binding strategy:
Using the Pin Column
The built-in pin column provides a dedicated UI for pinning and unpinning rows. Add the RowPinColumnComponent inside the Grid to display a pin icon on each row. When using the kendoGridBinding directive, the Grid manages the pinned row collections automatically—no extra event handling is required.
The following example demonstrates the default pin column configuration with automatic pinning to both the top and bottom of the Grid.
Using a Context Menu
As an alternative to the built-in pin column, you can use a context menu to offer row pinning actions. This approach provides a cleaner Grid layout by removing the dedicated pin column while still enabling full pinning functionality.
The following example demonstrates row pinning through a context menu without the pin column.
To implement context-menu-based pinning:
-
Set the
pinnableproperty totrueto enable the row pinning feature on the Grid.html<kendo-grid [pinnable]="true"> </kendo-grid> -
Add a
ContextMenuComponentto the template with a template reference variable (for example,#contextMenu). Bind theitemsinput to a collection of menu items that define the available pinning actions.html<kendo-contextmenu #contextMenu [items]="menuItems" (select)="onMenuSelect($event)"> </kendo-contextmenu> -
Set up a context menu that appears on right-click by following the Context Menu article. Inside the
cellClickhandler, build the menu items dynamically based on the current pin state of the clicked row. Show only the relevant actions—for example, display Unpin and Pin to Bottom when the row is already pinned to the top.tsprivate getMenuItems(dataItem: DataItem): PinMenuItem[] { const isPinnedTop = this.pinnedTopRows.includes(dataItem); const isPinnedBottom = this.pinnedBottomRows.includes(dataItem); if (isPinnedTop) { return [ { text: 'Unpin', svgIcon: unpinOutlineIcon, action: 'unpin' }, { text: 'Pin to Bottom', svgIcon: pinOutlineBottomIcon, action: 'pinToBottom' } ]; } if (isPinnedBottom) { return [ { text: 'Unpin', svgIcon: unpinOutlineIcon, action: 'unpin' }, { text: 'Pin to Top', svgIcon: pinOutlineTopIcon, action: 'pinToTop' } ]; } return [ { text: 'Pin to Top', svgIcon: pinOutlineTopIcon, action: 'pinToTop' }, { text: 'Pin to Bottom', svgIcon: pinOutlineBottomIcon, action: 'pinToBottom' } ]; } -
Handle the
selectevent of the ContextMenu and update thepinnedTopRowsandpinnedBottomRowscollections based on the selected action. Remove the item from one collection before adding it to another to prevent duplicates.html<kendo-contextmenu (select)="onMenuSelect($event)"> </kendo-contextmenu>
Pinning Rows to a Specific Location
To restrict pinning to a specific location, set the pinnable property to top or bottom. This configuration limits the pinning actions to the specified location and hides irrelevant options from the UI. For example, when pinnable is set to top, users can only pin rows to the top of the Grid, and any UI elements related to bottom pinning will be hidden.
The following example demonstrates pinning rows only to the top of the Grid.
Restricting the Pinnable Rows
The isRowPinnable callback allows you to restrict which rows can be pinned. The callback receives a RowArgs object containing the dataItem and index, and returns a boolean that determines whether the row displays the pin action.
The following example allows pinning only for items with a Low Stock or Out of Stock status.
Initially Pinned Rows
To pin rows on initial load, populate the pinnedTopRows and pinnedBottomRows arrays with data items before the Grid renders. This is useful for scenarios where you need to surface critical data immediately, such as out-of-stock inventory items or overstock alerts.
The following example demonstrates a Grid that starts with out-of-stock items pinned to the top and overstock items pinned to the bottom.
Manual Pinned Rows Management
When binding the Grid through the data property instead of kendoGridBinding, you need to manage the pinned row collections manually. Handle the rowPinChange event to update the pinnedTopRows and pinnedBottomRows collections. The event emits a RowPinEvent object containing the updated pinned row collections.
The following example demonstrates manual management of pinned rows when using the data property for binding.