Cannot read property 'querySelector' of null

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

Reply | Reply with quote

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

Reply | Reply with quote

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.

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

Reply | Reply with quote

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>

Reply | Reply with quote

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

Reply | Reply with quote

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

Reply | Reply with quote

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

Reply | Reply with quote

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

Reply | Reply with quote

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

Reply | Reply with quote

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.

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

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

Regards,

Sabaridass R

Reply | Reply with quote

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

Reply | Reply with quote

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

Reply | Reply with quote

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

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US