diff --git a/knowledge-base/grid-sticky-headers.md b/knowledge-base/grid-sticky-headers.md new file mode 100644 index 0000000000..1ee2982f7f --- /dev/null +++ b/knowledge-base/grid-sticky-headers.md @@ -0,0 +1,152 @@ +--- +title: Enable Sticky Grid Headers +description: Learn how to enable sticky Grid or TreeList headers, which remain visible at the top of the browser viewport when the users scrolls the whole web page. +type: how-to +page_title: How To Enable Sticky Grid Headers +slug: grid-kb-sticky-headers +tags: telerik, blazor, grid, treelist, css, styling +ticketid: 1687016, 1592949, 1522505 +res_type: kb +--- + +## Environment + + + + + + + + +
Product + Grid for Blazor,
+ TreeList for Blazor +
+ +## Description + +This KB also answers the following questions: + +* How to lock (freeze) the Grid header row, so that it remains at the top of the browser viewport during page scrolling? +* How to set a `position:sticky` style to the Grid header row? +* How to make the Grid header stick and persist (always show) at the top of the page while scrolling without a fixed Grid height? + +## Solution + +Sticky Grid headers require custom CSS. The Grid and TreeList components use very similar HTML rendering, so the approach for both components is the same. + +The solution prevents you from setting a Grid `Height`. This should not be a problem, as the idea is users to scroll the whole web page, rather than the Grid. + +1. Set the Grid `Class` to some custom CSS class. +1. Use the custom CSS class to apply `position:sticky` style to `.k-grid-header` and reset the `overflow` styles of all Grid elements that have this style set to `hidden` or `scroll`. + +>caption Enable sticky Grid headers + +````RAZOR + + + + + + + + + + + + + + + + + + + +@code { + private List CategoryData { get; set; } = new(); + private List ProductData { get; set; } = new(); + + private bool StickMasterHeader { get; set; } = true; + private bool StickDetailHeader { get; set; } = true; + + private int LastId { get; set; } + + private void OnMasterGridStateInit(GridStateEventArgs args) + { + args.GridState.ExpandedItems = CategoryData; + } + + protected override void OnInitialized() + { + var rnd = Random.Shared; + + for (int i = 1; i <= 15; i++) + { + CategoryData.Add(new Category() + { + Id = i, + Name = $"Category Name {i} {(char)rnd.Next(65, 91)}{(char)rnd.Next(65, 91)}" + }); + + for (int j = 1; j <= 5; j++) + { + int productId = ++LastId; + ProductData.Add(new Product() + { + Id = productId, + CategoryId = i, + Name = $"Product Name {productId} {(char)rnd.Next(65, 91)}{(char)rnd.Next(65, 91)}" + }); + } + } + } + + public class Category + { + public int Id { get; set; } + public string Name { get; set; } = string.Empty; + } + + public class Product + { + public int Id { get; set; } + public int CategoryId { get; set; } + public string Name { get; set; } = string.Empty; + } +} +```` + +## See Also + +* [Grid Overview](slug:grid-overview) +* [TreeList Overview](slug:treelist-overview)