Get error when EnableStickyHeader

[Magzhan]

Get Error when I start to scroll:

Uncaught TypeError: Cannot read properties of null (reading 'getPanel')

at GridComponent.Grid.getContent (grid.js:1665:1)

at Scroll.makeStickyHeader (scroll.js:430:1)

When I remove enableStickyHeader from GridComponent everything works just fine.
Please help!

[Jayshankar Manoharan]

Hi Maghzan,

Greetings from Syncfusion Support,

Query - Get error when EnableStickyHeader

We have analyzed your query and we understand that you are facing issue while enabling StickyHeader on grid . But before proceeding we need some more details about your requirement to validate the issue at our end. Kindly Share the following details.

1.              Share Grid rendering code snippet.

2.              Share your Syncfusion version details.

3.              Share your grid packages .

4.              Share some screenshots related to the issue.

Note :  Our grid sample works fine with StickyHeader, Please refer the sample for your reference.

Sample - https://stackblitz.com/edit/react-t7kupk?file=index.js

Regards,

Jayshankar Manoharan.

[Magzhan]

 "@syncfusion/ej2-data": "^20.1.55",

    "@syncfusion/ej2-react-dropdowns": "^20.1.56",

    "@syncfusion/ej2-react-grids": "^20.1.56",

    "@syncfusion/ej2-react-inputs": "^20.1.55",

    "@syncfusion/ej2-react-lists": "^20.1.55",

This error show up when you navigate from one grid list to another grid list with both enableStickyHeader, but you reload on one page this error does not show up. 

[Jayshankar Manoharan]

Hi Magzhan,

Sorry for the inconvenience,

We are currently working on your query, we will update further details on ​June 1, 2022.

Until then we appreciate your patience.

Regards,

Jayshankar Manoharan

[Jayshankar Manoharan]

Hi Maghazan,

Sorry for the inconvenience caused,

Currently we are working on your query,  we will update further details within two business days.

Until then we appreciate your patience.

Regards,

Jayshankar Manoharan.

[Magzhan]

Is there any updates on this issue ?

[Rajapandiyan Settu]

Hi Magzhan,

Thanks for your patience.

We tried to reproduce the reported problem at our end, but it was unsuccessful. Please find the below sample for your reference.

Sample: https://stackblitz.com/edit/react-ya7bhe?file=index.js

Kindly share the below details to replicate this.

1. Share the video demo of the reported problem.
2. This error show up when you navigate from one grid list to another grid list with both enableStickyHeader – Explain this query with more details.
3. Share the replication procedures.
4. If possible, share the issue reproducible sample or try to make the issue in a given sample.

Regards,

Rajapandiyan S

[Magzhan]

Hi, replicated the error with enableStickyHeader, here is the link:

https://codesandbox.io/s/error-enablestickyheader-vqro56
Try to navigate between pages Home -> GridList -> Home and Scroll

[Pavithra Subramaniyam]

Hi Magzhan,

Thanks for sharing the details.

Currently, we are validating the issue “Script error while routing with sticky header feature” at our side. So, we will provide further details on June 21, 2022. Until then we appreciate your patience.

Regards,

Pavithra S

[Pavithra Subramaniyam]

Hi Magzhan,

Thanks for your patience.

We have validated the reported scenario and found that the “scroll” event is not removed properly from the document which causes the reported issue. So, we suggest using the below solution to the second Grid to overcome this. Please refer to the below code example and sample link for more information.

<GridComponent

  id="Grid2"

  destroy={function (e) {

    document.removeEventListener(

      "scroll",

      this.scrollModule.makeStickyHeader

    );

  }}

  dataSource={data}

  enableStickyHeader={true}

> 

 

https://codesandbox.io/s/error-enablestickyheader-forked-cqhd9v?file=/src/components/GridList.jsx

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

Regards,

Pavithra S