Vue Grid Sticky Header

[Khalipha Thomas]

Hello,

I am currently working with Vue Syncfusion's Grid component where I'm working with tons of data populating the grids. I have vertical scrolling working as it should but I want to see if it is possible to have my header for the grid to be stuck while I am scrolling down on current items in the grid. I've tried looking into the issue by vising this thread https://www.syncfusion.com/forums/149798/freeze-header-on-vertical-scroll where the answer was suggested to look into freezeRow/freezeColumn api call but it's not producing the effect that I am desiring.

Here is my code where I am displaying said grid. Any help to achieving the effect of the headers not moving as I scroll down the grid would be of tremendous help!

[Vignesh Sivagnanam]

Hi Khalipha 

  

Greetings from Syncfusion support 

  

Based on your query, you want to freeze the header row of the grid. To achieve your requirement you can use the below external css to freeze the header of the grid. please refer the below code example for your reference, 

  

.e-grid .e-gridheader {  

  position: -webkit-sticky;  

  position: sticky;  

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

  z-index: 1;  

}  

  

And also, we have considered your requirement as a feature and logged a feature task “Need to provide fixed header support to EJ2Grid” for this. At Syncfusion, we are committed to fixing all validated defects (subject to technical feasibility and Product Development Life Cycle ) and will include this feature 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.    

  

Feedback Link : https://www.syncfusion.com/feedback/24665/need-to-provide-sticky-header-support-to-ej2grid   

  

Please get back to us for further assistance, 

  

Regards 

Vignesh Sivagnanam 

[Khalipha Thomas]

I appreciate the support in that a feature task was made distinctly for the grid for a feature I was inquiring about. I tried to use the external CSS that you provided for me into my own code and it seems like its not working still as desired. Am I implementing the CSS incorrectly? I assumed that after pasting the CSS you provided that it would have worked unless I am missing something. Also I noticed the feature task you made for my requirement is under the front end language of React when I'm using Vue. Was this an error or was it meant to be a feature task to be used by React?

[Vignesh Sivagnanam]

Hi Khalipha 

Thanks for the update 

We have prepared the sample based on your provided information and tried to reproduced the reported issue but it was unsuccessful at our end. The sticky header is worked fine at our end. For your reference, we have prepared a sample to achieve your requirement.  

Please refer the below sample for your reference, 

Sample : https://codesandbox.io/s/sample-f7h4u?file=/src/App.vue 

If you still faced the reported issue at your end, Please share the below details to validate further 

  

1. Share the full grid code example. 

  

2. If possible please replicate the issue on our provided sample or share the issue reproduced sample. 

  

3. Syncfusion package version. 

If the feature is implement to the grid, you can access it with any platform. The feature implement is not related to the platforms. 

Please get back to us for further assistance, 

Regards 

Vignesh Sivagnanam 

[Khalipha Thomas]

Thank you for the verification. I believe my issue was that my css was in a scoped style tag instead of a regular style tag. So the issue has been resolved thank you so much for the feedback! 

[Vignesh Sivagnanam]

Hi Khalipha 

We are happy to hear that your issue has been resolved. 

Please get back to us if you need further assistance. 

Regards, 

Vignesh Sivagnanam