1. Home
  2. Forum
  3. Blazor
  4. SfGrid - How to freeze headers upon scroll

SfGrid - How to freeze headers upon scroll

Hi,

Scenario: There are multiple SfGrids on a page which doesn't  have "Height" specified. Upon page scroll, user want to have headers freeze. When scrolling through first grid, the headers should freeze. When scrolling through second grid, the headers of Grid #1 should unfreeze and, freeze headers of Grid #2.

In our non-blazor app, we are currently using DataTables solution. As we are rewriting our app by using Blazor, we want to accomplish the same using Syncfusion Blazor Components.
DataTables Fixed Header Documentation - https://datatables.net/extensions/fixedheader/

I am aware of "FrozenRows" property of SfGrid. Using "FrozenRows" property it freezes headers and rows which we don't want. Is there a way to only freeze headers upon scroll?

Thank you,
Bishan M.

Attachment: BlazorSfGridStickyHeader_a91cc958.zip

11 Replies
RN Rahul Narayanasamy Syncfusion Team April 17, 2020 02:39 AM UTC

Hi Bishan, 

Greetings from Syncfusion. 

We have validated your query with the provided information and we are currently checking the feasibility to achieve this requirement at our end and we will update the further details on or before April 20, 2020. Until then we appreciate your patience. 

Regards, 
Rahul 


BM Bishan Moteria April 20, 2020 08:04 AM UTC

Hi Rahul,

Thank you for the update.

Looking forward to hear a response.

Regards,
Bishan M.

BM Bishan Moteria April 20, 2020 01:52 PM UTC

After few minutes of hands-on, it turns out that following css is required to accomplish this requirement:

.e-gridheader {
        position: -webkit-sticky;
        position: sticky;
        top: 56px; /* The height of top nav menu. */
        z-index: 1;
}

Please find attached sample for more information.

I still wonder, whether it is feasible to add this feature to SfGrid component?

Browsers tested: Chrome and Edge Chromium

Thank you,
BIshan M.


Attachment: BlazorSfGridStickyHeader_3757282e.zip

RN Rahul Narayanasamy Syncfusion Team April 20, 2020 02:17 PM UTC

Hi Bishan, 

Thanks for the update. 

We are glad to hear that you have achieved your requirement by yourself. We will check this requirement with our development team(to include this feature) and update the details on April 21, 2020. Until then we appreciate your patience. 

Regards,
Rahul  


RN Rahul Narayanasamy Syncfusion Team April 21, 2020 01:57 PM UTC

Hi Bishan, 
 
Thanks for your patience. 
 
We have considered this as a feature “Need to provide sticky header support to Grid” and logged report for the same. We are always trying to make our products better and feature requests like yours are a key part of our product growth efforts. This feature will be included in any of our upcoming release. 
 
You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.  
 
 
Until then you can use the above solution to achieve your requirement. Please get back to us if you need further assistance. 
 
Regards, 
Rahul 
 


SK Stephanie Koronidou June 18, 2020 06:14 AM UTC

Dear  Support,
Do you have any indication when this feature will be released?
Do you have any alternative until that feature is ready?

VN Vignesh Natarajan Syncfusion Team June 19, 2020 12:34 PM UTC

Hi Stephanie, 
  
Thanks for contacting Syncfusion support.  
  
Query: “Do you have any indication when this feature will be released?” 
  
From your query we understand that you want Sticky header support in Grid. At the planning stage for every release cycle, we review all open features and identify features for implementation based on specific parameters including product vision, technological feasibility, and customer interest.  
 
Currently we do not have plans for implement the requested query. We kindly request you to follow that below feedback link for the further updates  
  
 
Till then we suggest you achieve your requirement using by applying the Css style to grid header . 
 
<style> 
    .e-grid .e-gridheader { 
        position: -webkit-sticky; 
        position: sticky; 
        top: 56px; /* The height of top nav menu. */ 
        z-index: 1; 
    } 
 
</style> 
 
  
Please get back to us if you have further queries.  
  
Regards, 
Vignesh Natarajan 
 
 


SK Stephanie Koronidou June 22, 2020 09:41 AM UTC

Hello,
Thank you for the reply.

I have seen the below feature and that is why I asked for the release date.



RN Rahul Narayanasamy Syncfusion Team June 23, 2020 11:27 AM UTC

Hi Stephanie, 
 
Yes, we have added your requested feature in our feature request list only. Currently, we don’t have any immediate plan to include this feature and the requested features will be implemented based on customers interest(number of counts for the particular feature). We will consider this feature in our Volume 4, 2020 release roadmap, it is tentatively rolled out at the end of December month. Till then we appreciate your patience. 
 
You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link. 
 

Until then we request you to achieve the requirement by using previously suggested way. 

Regards, 
Rahul 


DD Damien Dussart November 18, 2021 05:31 AM UTC

Any plans to implement this feature? Above solution isn't working for me.


RN Rahul Narayanasamy Syncfusion Team November 22, 2021 03:42 AM UTC

Hi Damien, 

Greetings from Syncfusion. 

Query: Any plans to implement this feature? Above solution isn't working for me. 

We have validated your query and we have added your requested feature in our feature request list only. Currently, we don’t have any immediate plan to include this feature and the requested features will be implemented based on customers interest(number of counts for the particular feature). The feature will be included in any of our upcoming release. Till then we appreciate your patience.  
  
You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.  
  

Until then you can use the below way to achieve your requirement. The suggested way is working without any issue. Find the below code snippets and sample for your reference. 

<style>  
    .e-grid .e-gridheader {  
        position: -webkit-sticky;  
        position: sticky;  
        top: 56px; /* The height of top nav menu. */  
        z-index: 1;  
    }  
</style>  


Please let us know if you have any concerns. 

Regards, 
Rahul 


Loader.
Up arrow icon