https://www.telerik.com/kendo-react-ui/components/grid/grouping/locked-group-headers/
Am I misreading it? "To lock the group headers of the Grid, use its lockGroups prop." => but in this demo on the Kendo site, none of the group headers are locked. Is it referring to the table header? I thought group headers were those rendered by the grouping (i.e. Beverages if Category Name is chosen). This is easiest to see on page 3 if you leave the demo as-is on page load -- I'd expect Condiments to be locked to the top of the grid as you scroll the page.
I really like this concept because it allows the user to retain context of what they're looking at --> otherwise, the group headers leave the user's view and can cause confusion/wasted time later when the user tries to regain context.
Thanks in advance for your time and help!
1 Answer, 1 is accepted
Hello Janki,
The article in question demonstrates how to lock the group header row. If you remove the lockGroups prop you will notice the default behavior if you move the horizontal scrollbar. Note that the locked functionality is part of the column and the lockGroups allows the group value to be visible even when scrolling:
If you want to make the group headers sticky, you can use the following approach by handling the cellRender of the Grid and adding specific class name and styles to the TD elements of the groupHeader:
Hope this helps.
Regards,
Konstantin Dikov
Progress Telerik
Do you have a stake in the designеr-developer collaboration process? If so, take our survey to share your perspective and become part of this global research. You’ll be among the first to know once the results are out.
-> Start The State of Designer-Developer Collaboration Survey 2024