We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Cannot read property 'querySelector' of null

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

11 Replies

FR frederik March 22, 2019 01:39 PM

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


AA Arulraj A Syncfusion Team March 25, 2019 03:43 AM

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. 

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 



FR frederik March 25, 2019 10:53 AM

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>


FR frederik March 25, 2019 11:15 PM

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


AA Arulraj A Syncfusion Team March 25, 2019 11:27 PM

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 



NP Naresh Padam replied to frederik April 6, 2019 10:15 AM

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??


SR Sabaridass Ramamoorthy Syncfusion Team April 8, 2019 02:02 AM

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 



FR frederik April 8, 2019 02:04 AM

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


SR Sabaridass Ramamoorthy Syncfusion Team April 9, 2019 03:20 AM

Hi Fredrik, 
 
Thanks for the update. We have prepared sample by providing dynamic id for pivot grid to resolve your problem. 
 
 
Please let us know if you need further assistance on this. 
 
Regards, 
Sabaridass R 
 



FR frederik April 10, 2019 02:20 AM

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


SR Sabaridass Ramamoorthy Syncfusion Team April 11, 2019 03:08 AM

Hi Frederik, 
 
We are happy to help you and let us know if you need any further assistance on this. 
 
Regards, 
Sabaridass R 


Loader.
Live Chat Icon For mobile
Up arrow icon