Sticky Columns

Sticky columns enable you to display specific columns at all times while the user scrolls the Grid horizontally. This specific column will be scrollable as well, however, it will fix its position to the left/right when it reaches left/right Grid border.

To configure a column as sticky simply set the sticky boolean setting of the corresponding column to true.

columns: [{
    field: "OrderID",
    title: "Order ID",
    sticky: true,
    width: 150
    }]

For a runnable example, refer to the demo on implementing sticky columns in the Grid.

Тhe following Grid configuration ensures that it will be possible to scroll columns horizontally to make the feature work. If there is not enough horizontal space for the scrollbar, it will not appear.

The JavaScript API of the Grid allows you to stick and unstick columns on the fly. However, this is possible only if the stickable configuration is enabled during initialization. If a certain column needs to be open for the users to change its position to sticky/non-sticky this must be specified in the column declaration.

columns: [{
    field: "OrderID",
    title: "Order ID",
    sticky: true,
    stickable: true,
    width: 150
    }]

KB Articles on Grid Columns

Known Limitations

  • The sticky columns are not supported in Microsoft Internet Explorer. It is a browser limitation due to unsupported gutters.
  • Sticky columns cannot work together with column virtualization.
  • A column cannot be both sticky and locked. If it is defined like this, it will be locked and the sticky property will be ignored.
  • Grid scrolling must be enabled.
  • The first column cannot be sticky.
  • The autogenerated expand/collapse columns used by hierarchy and grouping cannot be sticky.
  • Row template and detail template are not supported together with sticky columns.
  • If multi-column headers are used, only a column at the topmost level can be sticky. When the Grid uses Multi-column headers - the "Set Column Position" menu will not be visible.

See Also

In this article
Not finding the help you need? Improve this article