How to Create Fixed Headers on Scroll

[Arpitha]

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.

[Dimiter Madjarov]

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

[Sahra]

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]

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.