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.
For a runnable example, refer to the demo on implementing sticky columns in the Grid.
The 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.
- Enable scrolling.
- Stick columns initially or enable the stickable property so users can stick column on the fly.
- Set a Grid height.
- Set explicit pixel widths to all columns to allow the Grid to adjust the layout of the sticky and non-sticky columns.
- Make sure that the Grid is not initialized inside a hidden container.
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.
.ColumnMenu()
.Columns(columns =>
{
columns.Bound(o => o.ContactName).Sticky(true).Stickable(true).Width(150);
columns.Bound(o => o.ContactTitle).Stickable(true).Width(250);
columns.Bound(o => o.CompanyName).Stickable(true).Width(350);
columns.Bound(o => o.Country).Stickable(true).Width(300);
})
<column-menu enabled="true"/>
<columns>
<column field="ContactName" sticky="true" stickable="true" title="Contact Name" width="240" />
<column field="ContactTitle" stickable="true" title="Contact Title" />
<column field="CompanyName" stickable="true" title="Company Name" />
<column field="Country" stickable="true" title="Country" width="150" />
</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 header of the first column in a grouped Grid cannot be sticky.
- The autogenerated expand/collapse columns used by hierarchy and grouping cannot be sticky.
- The 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.
- If the width of the Grid changes through JavaScript or resizing the page after the Grid is created, you have to call the
resizemethod to recalculate the sticky styles.