groupable.stickyHeadersBoolean(default: false)
When enabled the group header rows will stick to the top of the scrollable content area while scrolling through the group's data rows. Requires the scrollable option to be enabled.
Example - enable sticky group headers
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "productName" },
{ field: "category" }
],
dataSource: {
data: [
{ productName: "Tea", category: "Beverages" },
{ productName: "Coffee", category: "Beverages" },
{ productName: "Ham", category: "Food" },
{ productName: "Bread", category: "Food" }
],
group: { field: "category" }
},
height: 200,
scrollable: true,
groupable: {
stickyHeaders: true
}
});
</script>