How to Create Fixed Headers on Scroll

1 Answer 1661 Views
Grid
Arpitha
Top achievements
Rank 1
Arpitha asked on 04 May 2021, 05:57 AM

Hi,

Our requirement is to have a grid with fixed headers on scroll.

I have come across a solution in jQuery for the same (Below link) -

https://docs.telerik.com/kendo-ui/knowledge-base/fixed-headers-grid

 

Could you please provide the solution in angular?

 

Thanks in advance.

1 Answer, 1 is accepted

Sort by
0
Accepted
Dimiter Madjarov
Telerik team
answered on 04 May 2021, 07:59 AM

Hi Arpitha,

I have covered the question in the support ticket on the same topic. Here is the provided example with fixed table headers:

https://stackblitz.com/edit/angular-5j5zxt-mfgfg9?file=app/app.component.ts

Regards,
Dimiter Madjarov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Sahra
Top achievements
Rank 1
commented on 02 Apr 2024, 04:45 PM

what happens if you have several grid-tables on the same page or next to each other, just now from what I can see, the fixed header works on the first table
Martin Bechev
Telerik team
commented on 05 Apr 2024, 11:59 AM

Hi Sahra,

The Kendo UI for Angular Grid doesn't provide a built-in sticky column headers functionality by default.

The same behavior could be achieved but with some custom JavaScript logic and event listeners. Here is an updated example that uses Angular 17 and Kendo Angular package versions 15.4.0:

https://stackblitz.com/edit/angular-wauja4?file=src%2Fapp%2Fapp.component.ts

The suggested implementation is not a tested nor officially supported solution. Any further modifications in order to comply with specific cases are considered developer efforts.

 

Tags
Grid
Asked by
Arpitha
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Share this question
or