Sticky Header

[Volodymyr]

Hello,

I'm using ejs-grid components inside an ejs-dashboard. By default, when I set [enableStickyHeader]="true", the grid header sticks only when scrolling the parent container (i.e., outside the ejs-dashboard).

How can I make the grid header stick while scrolling inside the individual ejs-dashboard panels?

<div #scrollablePanel>

<ejs-grid #grid

*ngIf="showGrid"

[enableHover]="false"

[allowSelection]="true"

[frozenColumns]='1'

[allowSorting]='true'

[allowReordering]='true'

[allowFiltering]='true'

[gridLines]="'None'"

[aggregates]="aggregates"

[enableStickyHeader]="true"

rowHeight="24">

</ejs-grid>

</div>

Thanks for your help

[Sivaranjani Rajasekaran]

Hi Volodymyr,

Greetings from Syncfusion support,

To better understand the situation, could you please provide more details about the setup? Specifically:

1. Could you share an example of the ejs-dashboard code you’re using along with the Grid? This will help us understand how the layout is structured.
2. Are there any external styles applied to render the scrollbars or affect the layout of the ejs-dashboard or ejs-grid? Sometimes custom CSS can interfere with how sticky headers work.
3. Could you please share a video demo or screenshot showing the behavior you're seeing? This will help visualize the issue and suggest the best approach.

With these details, We can assist you more effectively.

Regards,

Sivaranjani R.