Sticky Groups
The Kendo UI Grid supports sticky group headers and footers. When the user scrolls through grouped data, the sticky group headers remain visible at the top of the Grid and the sticky group footers remain visible at the bottom, providing continuous context about which group the currently visible rows belong to.
Getting Started
To enable sticky group headers, set the groupable.stickyHeaders option to true. To enable sticky group footers, set the groupable.stickyFooters option to true. The Grid must have the scrollable option enabled and a height set for the sticky behavior to work.
$("#grid").kendoGrid({
height: 400,
scrollable: true,
groupable: {
enabled: true,
stickyHeaders: true,
stickyFooters: true
},
dataSource: {
data: products,
group: {
field: "category",
aggregates: [
{ field: "productName", aggregate: "count" }
]
}
},
columns: [
{ field: "productName", title: "Product Name", groupFooterTemplate: "Count: #=count#" },
{ field: "category", title: "Category" },
{ field: "unitPrice", title: "Unit Price", format: "{0:c}" }
]
});Sticky group footers require the columns to have a
groupFooterTemplatedefined and the DataSource to haveaggregatesconfigured.
Features
The sticky groups functionality works with:
- Nested groups—When the Grid is grouped by multiple fields, sticky headers and footers are rendered for each grouping level.
- Locked (frozen) columns—Sticky group rows span both the locked and scrollable sections of the Grid.
- Virtual scrolling—Sticky headers and footers are supported when the Grid uses virtual scrolling (
scrollable: { virtual: true }). - Keyboard navigation—When the Grid is
navigatable, the sticky group headers and footers can be focused and navigated with the keyboard.
Runtime Toggle
You can enable or disable the sticky behavior at runtime by calling the setOptions method:
var grid = $("#grid").data("kendoGrid");
grid.setOptions({
groupable: {
stickyHeaders: false,
stickyFooters: false
}
});