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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Cannot read property 'querySelector' of null

Thread ID:

Created:

Updated:

Platform:

Replies:

143501 Mar 22,2019 09:19 PM UTC Apr 11,2019 11:08 AM UTC Angular - EJ 2 11
loading
Tags: PivotView
frederik
Asked On March 22, 2019 09:19 PM UTC

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
Replied On March 22, 2019 09:39 PM UTC

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 [Syncfusion]
Replied On March 25, 2019 11:43 AM UTC

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 


frederik
Replied On March 25, 2019 06:53 PM UTC

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
Replied On March 26, 2019 07:15 AM UTC

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 [Syncfusion]
Replied On March 26, 2019 07:27 AM UTC

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
Replied On April 6, 2019 06:15 PM UTC

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 [Syncfusion]
Replied On April 8, 2019 10:02 AM UTC

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
Replied On April 8, 2019 10:04 AM UTC

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 [Syncfusion]
Replied On April 9, 2019 11:20 AM UTC

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 
 


frederik
Replied On April 10, 2019 10:20 AM UTC

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 [Syncfusion]
Replied On April 11, 2019 11:08 AM UTC

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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon