Freeze/Sticky/Fixed Grid Header Row

1 Answer 1836 Views
Grid
Janki
Top achievements
Rank 4
Bronze
Iron
Iron
Janki asked on 20 Jul 2021, 07:54 PM
Is this possible without setting up pagination, virtual scrolling, or infinite scrolling?
Janki
Top achievements
Rank 4
Bronze
Iron
Iron
commented on 20 Jul 2021, 08:02 PM | edited

I ended up using CSS and it worked like a charm (may not be useful for you if your users are on IE - see latest CanIUse here):

.k-grid-header {
    position: sticky;
    top: 0px;
    z-index: 1000;
}

 

But now the column filter menu is offset and making the grid jump when you use it - is there anything that's built into the KendoReact Grid that would prevent these sort of related issues from springing up?

1 Answer, 1 is accepted

Sort by
1
Accepted
Stefan
Telerik team
answered on 21 Jul 2021, 05:17 AM

Hello, Janki,

The GridHeader will be at the top when the Grid is scrollable(it is scrollable by default).

This can be seen in our demo:

https://www.telerik.com/kendo-react-ui/components/grid/get-started/

If the requirement is different, please share more detail, as this will help us provide more to the point suggestion.

Regards,
Stefan
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Janki
Top achievements
Rank 4
Bronze
Iron
Iron
commented on 21 Jul 2021, 12:51 PM

Thank you, I don't know how I missed that basic example! It works great! I appreciate your help, Stefan!
Tags
Grid
Asked by
Janki
Top achievements
Rank 4
Bronze
Iron
Iron
Answers by
Stefan
Telerik team
Share this question
or