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

Sticky Columns

Columns marked as "sticky" are visible at all times while the user scrolls the Grid horizontally. They are stacked at the start or end of the Grid, depending on the scrolling direction.

Sticky columns are similar to locked columns, and you can use them to achieve the same effect. They also support placing columns to either side of the viewport. But the two features are not completely interchangeable, see known limitations.

Setup

To set the sticky state of the Grid columns:

  • Use their sticky option.
  • Ensure that the Grid is scrollable (it is by default).
  • Set the width option of all columns so that the Grid is able to adjust the positions of the sticky columns.

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

Example
View Source
Change Theme:

Stick to the Start and End

Sticky columns can be used to emulate the behavior of locked columns with the addition of the ability to position columns at either end. To achieve this, make sure that the desired columns are placed at the beginning or end of the columns list and set their sticky option to true.

The following example demonstrates this approach.

Example
View Source
Change Theme:

Known Limitations

  • The detail template does not work with sticky columns.
  • Using sticky columns alongside the virtual columns functionality is not supported.
  • Using sticky columns alongside multi-column headers is not supported.