Grid Toolbar sticky

[Charles Eichelberger]

Hello,

I was able to enable sticky headers for the grid. I was wondering if it is possible to make the toolbar sticky as well, so that the toolbar and headers would scroll down together?

Thanks,

Charles

[Rajapandiyan Settu]

Hi Charles,

Thanks for contacting Syncfusion support.

In EJ2 Grid, we have provided the support to sticky the Grid headers (Group drop area, Toolbar, Column header) from the version 19.2.55.

Release notes: https://ej2.syncfusion.com/angular/documentation/release-notes/19.2.55/?type=all#grid

You can make the Grid headers remain fixed while scrolling its first scrollable parent element by using the `enableStickyHeader` property. Refer to the below code example and sample for more information.

enableStickyHeader: https://ej2.syncfusion.com/angular/documentation/api/grid/#enablestickyheader

 

[app.component.html]

 

<ejs-grid

  [dataSource]="data"

  [editSettings]="editSettings"

  [toolbar]="toolbar"

  [enableStickyHeader]="true"

  height="350"

> 

</ejs-grid>

 

Sample: https://stackblitz.com/edit/angular-lutsgw?file=app.component.html

Please get back to us if you need further assistance with this.

Regards,

Rajapandiyan S

[Charles Eichelberger]

Awesome that's what I needed. One quick question if paging is turned on and I put the paging option at the top according to https://ej2.syncfusion.com/angular/documentation/grid/paging/#render-pager-at-the-top-of-the-grid. Will this also be sticky?

Thanks,

Charles

[Rajapandiyan Settu]

Hi Charles,

Thanks for your update.

In EJ2 Grid, The EnableStickyHeader support is used to sticky the GroupDrop area, Toolbar, and column Header while scrolling its first scrollable parent element. But in your requirement, you have manually moved the pager at the top of the Grid element and want to sticky Pager element too. Since the EnableStickyHeader does not have support for this. We can achieve this by using a workaround solution.

But before proceeding with this, kindly share the below details to provide a better solution.

1. Share the complete Grid code you have used?
2. What are the features you have used in the Grid?
3. Did you show the Group drop area in the Grid?

Regards,

Rajapandiyan S

[Charles Eichelberger]

HI,

This is a link to an example https://stackblitz.com/edit/angular-lutsgw-mo6hua?file=app.component.ts. I want the pager at the top to be sticky with the toolbar and column headers.

Thank you,

Charles

[Rajapandiyan Settu]

Hi Charles,

Thanks for providing the sample.

Currently, we are modifying the provided sample for your requirement (“Sticky the grid pager, toolbar, and column header elements on scrolling the browser”) at our end. We will update the further details on or before Apr 13^th, 2022.

We appreciate your patience until then

Regards,

Rajapandiyan S

[Charles Eichelberger]

Awesome thank you so much!

[Rajapandiyan Settu]

Hi Charles,

Thanks for your patience.

By using the following CSS you can sticky the Grid’s pager, toolbar, and column header while scrolling the browser.

 

    <style>

      .e-grid .e-gridpager {

        position: -webkit-sticky !important;

        position: sticky !important;

        top: 0px !important; /* The height of top nav menu. */

        z-index: 1 !important;

        opacity: 1;

      }

      .e-grid .e-toolbar {

        position: -webkit-sticky !important;

        position: sticky !important;

        top: 47px !important; /* The height of top nav menu. */

        z-index: 1 !important;

      }

      .e-grid .e-gridheader {

        position: -webkit-sticky !important;

        position: sticky !important;

        top: 90px !important; /* The height of top nav menu. */

        z-index: 1 !important;

      }

    </style>

 

Sample: https://stackblitz.com/edit/angular-lutsgw-ojmleu?file=index.html

Please get back to us if you need further assistance with this.

Regards,

Rajapandiyan S

[Charles Eichelberger]

Awesome thank you so much!

[Rajapandiyan Settu]

Hi Charles,

We are glad that you have achieved your requirement with the provided solution.

Please get back to us if you need further assistance with us.

Regards,

Rajapandiyan S

[Kumaresan]

not only [enableStickyHeader]="true"  this propety enables sticky header, we should specify height too.

Here height play major role than this property

[Rajapandi Ravi]

Kumaresan,

To enable the sticky header in the Grid we need to enable the enableStickyHeader property as true in the Grid and without defining the height also the sticky header is working fine.

For your convenience, we have prepared a sample without defining the height property in the Grid and the sticky header is working fine and function as expected. Please refer the below sample for more information.

Sample: https://stackblitz.com/edit/angular-hf6pjyq4?file=src%2Fapp.component.ts,src%2Fapp.component.html

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/scrolling/scrolling#sticky-header

If you are facing any issue without defining the height property in the Grid, kindly share the issue reproducible sample or try to reproduce the problem with our above shared sample that would be helpful for us to provide better solution.