Hello,
I'm trying to freeze (make sticky) the master grid column header on a master/details grid. For each of the master grid column headers, I've set the locked property to true and I can verify that the associated th elements have the k-grid-header-sticky class applied. All grid columns have fixed width values as well. Am I missing anything additional in order to freeze the headers?
Any help is definitely appreciated!
Thanks,
Paul
1 Answer, 1 is accepted
Hi Paul,
If you don't have enabled scrolling for the Grid, you can add specific class name to the Grid, so that you can target only that instance with CSS and change the position of the main header element to "sticky". There are few more changes that must be applied in order for the header to stick:
<style>
.locked-header.k-grid .k-grid-aria-root{
overflow: visible!important;
}
.locked-header .k-grid-header {
position: sticky!important;
z-index: 100!important;
top:-30px;
} <Grid
className={'locked-header'}For your convenience, following is an example with the above custom CSS:
Hope this helps.
Regards,
Konstantin Dikov
Progress Telerik
Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!