Cannot read property 'querySelector' of null

[frederik]

I have two pivot views below each other. When the data load the spinner shows but doesn't go away after load and I get the following error when inspecting:

Cannot read property 'querySelector' of null.

If I remove either pivot view it works fine, i.e. only if there are two pivot views.

Also, I don't add the pivot view directly, but created a component that includes the use of the pivot view, and this component is added twice with different sets of data.

Full error:

ERROR TypeError: Cannot read property 'querySelector' of null

    at showHideSpinner (spinner.js:386)

    at hideSpinner (spinner.js:415)

    at PivotViewComponent.push../node_modules/@syncfusion/ej2-pivotview/src/pivotview/base/pivotview.js.PivotView.onContentReady (pivotview.js:743)

    at Observer.push../node_modules/@syncfusion/ej2-base/src/observer.js.Observer.notify (observer.js:89)

    at PivotViewComponent.push../node_modules/@syncfusion/ej2-base/src/component.js.Component.notify (component.js:189)

    at Grid.dataBound (render.js:158)

    at Observer.push../node_modules/@syncfusion/ej2-base/src/observer.js.Observer.notify (observer.js:89)

    at Grid.push../node_modules/@syncfusion/ej2-base/src/base.js.Base.trigger (base.js:149)

    at content-renderer.js:42

    at util.js:44

I attach 5 screen shots showing pivot views displaying data, but spinner still spinning, as well as use of pivot table in components

Any advice much appreciated.

Attachment: Archive_7d08407f.zip

[frederik]

One last attempt I made was to remove the shared pivot table component I created with some shared logic and duplicate the logic in each component that used that shared component. This solved the issue.

Would be nice to be able to create building block components that can be reused without having to duplicate code.

many thanks

[Arulraj A]

Hi Frederik, 

Thanks for using Syncfusion product. 

We are unable to reproduce the problem at our end. We have prepared sample by reusing the component. 

http://www.syncfusion.com/downloads/support/forum/143501/ze/APP-1324708409 

If still the problem exists, kindly reproduce the problem in the provided sample and revert us (or) send your sample that replicating the problem. This would be a very helpful for us to investigate the reported problem at our end and provide the solution at earliest. 

Regards, 

Arulraj A 

[frederik]

Thank you - I will try and replicate with your sample over next few days and upload the edited version. I suspect it happens when you provide an ID, e.g.  #myPivotView, in order to interact with the pivotview from the code, but will play around and let you know

<ejs-pivotview #myPivotView [dataSource]=dataSource width='700'></ejs-pivotview>

[frederik]

Changed the app a bit. Clicking the two buttons I added a few times will result in spinner needing to show and error popping up. Edited app attached.

Many thanks

Attachment: APP_4aaddb10.zip

[Arulraj A]

Hi Frederik, 

Thanks for the reply. 

Yes. It maybe occurred due to the usage of id for reusable components. Also, check by removing ID from reusable component. 

We will wait until we hear from you. 

Regards, 

Arulraj A 

[Naresh Padam]

Changed the app a bit. Clicking the two buttons I added a few times will result in spinner needing to show and error popping up. Edited app attached.

Many thanks

Attachment: APP_4aaddb10.zip

Hi Frederick,

Have you solved the issue by removing pivot id??

[Sabaridass Ramamoorthy]

Hi Frederik, 

Can you please update us whether you have resolved the problem by removing the “id” as suggested in our previous update? 

Regards, 

Sabaridass R 

[frederik]

I am sure it will work - but I removed the pivot from the shared component and added separately so couldn't test.

Thank you

[Sabaridass Ramamoorthy]

Hi Fredrik, 

 

Thanks for the update. We have prepared sample by providing dynamic id for pivot grid to resolve your problem. 

 

http://www.syncfusion.com/downloads/support/forum/143501/ze/APP1621465521 

 

Please let us know if you need further assistance on this. 

 

Regards, 

Sabaridass R 

 

[frederik]

Thank you. Another alternative might also be creating a random Id in init using a function and assigning it to 'viewId' in your example, e.g.:

genId(): any {

let out = 'pivot_';

let options = 'abcdefghijklmnopqrstuvwxyz0123456789_';

for (let i = 0; i < 10; i++) {

   outString += options.charAt(Math.floor(Math.random() * options.length));

}

return outString;

}

(from some stackoverflow answer)

Many thanks

[Sabaridass Ramamoorthy]

Hi Frederik, 

 

We are happy to help you and let us know if you need any further assistance on this. 

 

Regards, 

Sabaridass R