Sticky Groups
The Telerik UI Grid for ASP.NET MVC 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, use the StickyHeaders() method of the Groupable configuration. To enable sticky group footers, use the StickyFooters() method. The Grid must have the Scrollable option enabled and a Height set for the sticky behavior to work.
@(Html.Kendo().Grid<ProductViewModel>()
.Name("grid")
.Height(400)
.Scrollable()
.Groupable(g => g
.StickyHeaders(true)
.StickyFooters(true)
)
.Columns(columns =>
{
columns.Bound(p => p.ProductName).GroupFooterTemplate("Count: #=count#");
columns.Bound(p => p.Category);
columns.Bound(p => p.UnitPrice).Format("{0:c}");
})
.DataSource(dataSource => dataSource
.Ajax()
.Group(groups => groups.Add(p => p.Category))
.Aggregates(aggregates =>
{
aggregates.Add(p => p.ProductName).Count();
})
.Read(read => read.Action("Products_Read", "Grid"))
)
)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.
- Keyboard navigation—When the Grid is
Navigatable, the sticky group headers and footers can be focused and navigated with the keyboard.