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

Sticky

Sticky rows are the rows that are visible at all times while the user scrolls the Kendo UI Grid for Angular vertically. They are scrollable like regular rows, but are stacked at the top or bottom of the grid (depending on the end user scrolling action) instead of leaving the Grid viewport.

Setup

To set the sticky state of the Grid rows:

  • Ensure that the Grid is scrollable (it is by default).
  • Provide a rowSticky callback which returns a boolean, determining whether a given row is sticky or not.

The following example demonstrates how to make certain rows sticky so that they are always visible during vertical scrolling.

Example
View Source
Edit In Stackblitz  
Change Theme:

Sticky Rows in Master-Detail Grids

Currently, the sticky rows functionality is not supported in master-detail scenarios. However, master rows in master-detail grids can still be sticky, as long as they are not expandable. The following example demonstrates how to prevent displaying the detail template for the sticky rows.

Example
View Source
Edit In Stackblitz  
Change Theme:

Known Limitations

  • Using sticky rows in master-detail scenarios is not supported.
  • Using sticky rows with grouped data is not supported.
  • Using sticky rows alongside the virtual scrolling functionality is not supported.
  • The sticky columns functionality is not supported in Internet Explorer. It relies on setting the CSS position property of internal table elements to sticky, and Internet Explorer does not provide support for this.