Error when using custom paging template

[Michael Rodriguez]

I followed the example at https://ej2.syncfusion.com/angular/documentation/grid/paging.html to setup a custom paging template. It works, but as soon as I browse to any other page I get this console error:

ERROR TypeError: Cannot use 'in' operator to search for '__eventList' in undefined

    at Function.push../node_modules/@syncfusion/ej2-base/src/event-handler.js.EventHandler.addOrGetEventData (event-handler.js:27)

    at Function.push../node_modules/@syncfusion/ej2-base/src/event-handler.js.EventHandler.remove (event-handler.js:75)

    at NumericContainer.push../node_modules/@syncfusion/ej2-grids/src/pager/numeric-container.js.NumericContainer.unwireEvents (numeric-container.js:71)

    at NumericContainer.push../node_modules/@syncfusion/ej2-grids/src/pager/numeric-container.js.NumericContainer.destroy (numeric-container.js:80)

    at Pager.push../node_modules/@syncfusion/ej2-grids/src/pager/pager.js.Pager.destroy (pager.js:137)

    at Page.push../node_modules/@syncfusion/ej2-grids/src/grid/actions/page.js.Page.pagerDestroy (page.js:241)

    at Page.push../node_modules/@syncfusion/ej2-grids/src/grid/actions/page.js.Page.destroy (page.js:237)

    at ModuleLoader.push../node_modules/@syncfusion/ej2-base/src/module-loader.js.ModuleLoader.clean (module-loader.js:56)

    at GridComponent.push../node_modules/@syncfusion/ej2-base/src/component.js.Component.destroy (component.js:81)

    at GridComponent.push../node_modules/@syncfusion/ej2-grids/src/grid/base/grid.js.Grid.destroy (grid.js:777)

Is this a known issue?

TIA,

Mike

[Mohammed Farook J]

Hi Michael, 

 

Thanks for contacting Syncfusion support. 

 

We are not facing any issues while using numerictextbox arrow to change the Grid page. We suspect that you have faced the issue while using the enter button instead of using the numerictextbox arrow.  If you are faced the issue in this case then use the following workaround to resolve this issue, 

 

Code snippet: 

 

change(args: ChangeEventArgs){ 

        if (args.value) 

            this.initialPage = { currentPage: args.value }; 

        else 

            args.cancel = true; 

    } 

 

Sample: https://stackblitz.com/edit/angular-j5jvuk?file=paging.component.ts 

 

Still you are facing the same issue please share the following details for further assistance, 

 

1. Provide detail explanation about when you are facing this issue.
2. Share full Grid code.

 

Regards, 

J Mohammed Farook.  

 

[Jason]

I am getting a similar error from the multi select drop down.

element = undefined, eventName = "mousedown", listener = ƒ (e)

line 85 of event-handler.js

 EventHandler.remove = function (element, eventName, listener) {

    var eventData = EventHandler.addOrGetEventData(element);

Complete error

event-handler.js:30 Uncaught TypeError: Cannot use 'in' operator to search for '__eventList' in undefined

    at Function.EventHandler.addOrGetEventData (event-handler.js:30)

    at Function.EventHandler.remove (event-handler.js:85)

    at MultiSelectComponent.MultiSelect.unWireEvent (multi-select.js:3108)

    at MultiSelectComponent.MultiSelect.destroy (multi-select.js:3772)

    at MultiSelectComponent.ComponentBase.componentWillUnmount (component-base.js:239)

    at callComponentWillUnmountWithTimer (react-dom.development.js:16816)

    at HTMLUnknownElement.callCallback (react-dom.development.js:147)

    at Object.invokeGuardedCallbackDev (react-dom.development.js:196)

    at invokeGuardedCallback (react-dom.development.js:250)

    at safelyCallComponentWillUnmount (react-dom.development.js:16823)

    at commitUnmount (react-dom.development.js:17252)

    at unmountHostComponents (react-dom.development.js:17596)

    at commitDeletion (react-dom.development.js:17632)

    at commitAllHostEffects (react-dom.development.js:18462)

    at HTMLUnknownElement.callCallback (react-dom.development.js:147)

    at Object.invokeGuardedCallbackDev (react-dom.development.js:196)

    at invokeGuardedCallback (react-dom.development.js:250)

    at commitRoot (react-dom.development.js:18679)

    at completeRoot (react-dom.development.js:20247)

    at performWorkOnRoot (react-dom.development.js:20170)

    at performWork (react-dom.development.js:20075)

    at performSyncWork (react-dom.development.js:20049)

    at interactiveUpdates$1 (react-dom.development.js:20337)

    at interactiveUpdates (react-dom.development.js:2267)

    at dispatchInteractiveEvent (react-dom.development.js:5083)

EventHandler.addOrGetEventData @ event-handler.js:30

EventHandler.remove @ event-handler.js:85

MultiSelect.unWireEvent @ multi-select.js:3108

MultiSelect.destroy @ multi-select.js:3772

ComponentBase.componentWillUnmount @ component-base.js:239

callComponentWillUnmountWithTimer @ react-dom.development.js:16816

callCallback @ react-dom.development.js:147

invokeGuardedCallbackDev @ react-dom.development.js:196

invokeGuardedCallback @ react-dom.development.js:250

safelyCallComponentWillUnmount @ react-dom.development.js:16823

commitUnmount @ react-dom.development.js:17252

unmountHostComponents @ react-dom.development.js:17596

commitDeletion @ react-dom.development.js:17632

commitAllHostEffects @ react-dom.development.js:18462

callCallback @ react-dom.development.js:147

invokeGuardedCallbackDev @ react-dom.development.js:196

invokeGuardedCallback @ react-dom.development.js:250

commitRoot @ react-dom.development.js:18679

completeRoot @ react-dom.development.js:20247

performWorkOnRoot @ react-dom.development.js:20170

performWork @ react-dom.development.js:20075

performSyncWork @ react-dom.development.js:20049

interactiveUpdates$1 @ react-dom.development.js:20337

interactiveUpdates @ react-dom.development.js:2267

dispatchInteractiveEvent @ react-dom.development.js:5083

index.js:1446 The above error occurred in the <MultiSelectComponent> component:

    in MultiSelectComponent (at TagSelectMenu.js:23)

    in div (created by FormGroup)

    in FormGroup (at TagSelectMenu.js:37)

    in TagSelectMenu (created by Context.Consumer)

    in Connect(TagSelectMenu) (at ProjectEditor.js:308)

    in div (created by Col)

    in Col (at ProjectEditor.js:269)

    in div (created by Row)

    in Row (at ProjectEditor.js:268)

    in form (created by Form)

    in Form (at ProjectEditor.js:267)

    in div (created by CardBody)

    in CardBody (at ProjectEditor.js:265)

    in div (created by Card)

    in Card (at ProjectEditor.js:259)

    in ProjectEditor (created by Context.Consumer)

    in Connect(ProjectEditor) (created by Route)

    in Route (at App.js:127)

    in Switch (at App.js:122)

    in ErrorBoundary (at App.js:121)

    in main (at App.js:120)

    in div (at App.js:110)

    in Router (created by ConnectedRouter)

    in ConnectedRouter (created by Context.Consumer)

    in ConnectedRouterWithContext (created by Context.Consumer)

    in Connect(ConnectedRouterWithContext) (at App.js:109)

    in Router (created by BrowserRouter)

    in BrowserRouter (at App.js:172)

    in App (created by Context.Consumer)

    in Connect(App) (at src/index.js:160)

    in Provider (at src/index.js:159)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

console.<computed> @ index.js:1446

logCapturedError @ react-dom.development.js:16764

logError @ react-dom.development.js:16800

callback @ react-dom.development.js:17848

callCallback @ react-dom.development.js:11743

commitUpdateEffects @ react-dom.development.js:11783

commitUpdateQueue @ react-dom.development.js:11771

commitLifeCycles @ react-dom.development.js:17030

commitAllLifeCycles @ react-dom.development.js:18512

callCallback @ react-dom.development.js:147

invokeGuardedCallbackDev @ react-dom.development.js:196

invokeGuardedCallback @ react-dom.development.js:250

commitRoot @ react-dom.development.js:18717

completeRoot @ react-dom.development.js:20247

performWorkOnRoot @ react-dom.development.js:20170

performWork @ react-dom.development.js:20075

performSyncWork @ react-dom.development.js:20049

interactiveUpdates$1 @ react-dom.development.js:20337

interactiveUpdates @ react-dom.development.js:2267

dispatchInteractiveEvent @ react-dom.development.js:5083

react-dom.development.js:57 Uncaught Invariant Violation: Unable to find node on an unmounted component.

    at invariant (http://localhost:3000/static/js/1.chunk.js:110757:19)

    at findCurrentFiberUsingSlowPath (http://localhost:3000/static/js/1.chunk.js:114976:34)

    at findCurrentHostFiber (http://localhost:3000/static/js/1.chunk.js:115104:27)

    at findHostInstanceWithWarning (http://localhost:3000/static/js/1.chunk.js:131176:25)

    at Object.findDOMNode (http://localhost:3000/static/js/1.chunk.js:131728:18)

    at MultiSelectComponent.ComponentBase.renderComponent (http://localhost:3000/static/js/1.chunk.js:70323:68)

    at http://localhost:3000/static/js/1.chunk.js:70317:15

[Pavithra Subramaniyam]

Hi Jason,  

 

We have checked the reported scenario but We are unable to understand the exact problem with the provided information. We suspect that you are using the webpack .So, we have prepared simple Multiselect sample with webpack. 

    

Please find the sample from below link   

https://www.syncfusion.com/downloads/support/directtrac/general/ze/React_Sample-839173607451573182  

   

Since, we were not aware of your exact scenario in which the issue was reproduced, We suspect that you have done some customization in your application So please revert us back with following details which was more helpful for further analysis and provide you the solution sooner.    

 

1. Try to reproduce the reported scenario with the above sample and revert us. 
2. Provide your sample with replication steps. 
3. Provide your code snippet 
4. Syncfusion package version 

 

Regards, 

Pavithra S. 

[Nam]

Hi Support, 

I also got the same error when using ejs-treegrid. I use ng-template #pagerTemplate to customize the UI pager treeGrid, everything works fine, but there is one error that when I close the dialog or navigate through another page, this error appears. However when i remove ngTemplate #pagerTemplate of ejs-treegrid everything works properly

core.js:1673 ERROR Error: Uncaught (in promise): TypeError: Cannot use 'in' operator to search for '__eventList' in undefined

TypeError: Cannot use 'in' operator to search for '__eventList' in undefined

    at Function.push../node_modules/@syncfusion/ej2-base/src/event-handler.js.EventHandler.addOrGetEventData (event-handler.js:27)

    at Function.push../node_modules/@syncfusion/ej2-base/src/event-handler.js.EventHandler.remove (event-handler.js:75)

    at NumericContainer.push../node_modules/@syncfusion/ej2-grids/src/pager/numeric-container.js.NumericContainer.unwireEvents (numeric-container.js:71)

    at NumericContainer.push../node_modules/@syncfusion/ej2-grids/src/pager/numeric-container.js.NumericContainer.destroy (numeric-container.js:80)

    at Pager.push../node_modules/@syncfusion/ej2-grids/src/pager/pager.js.Pager.destroy (pager.js:133)

    at Page.push../node_modules/@syncfusion/ej2-grids/src/grid/actions/page.js.Page.pagerDestroy (page.js:246)

    at Page.push../node_modules/@syncfusion/ej2-grids/src/grid/actions/page.js.Page.destroy (page.js:242)

    at ModuleLoader.push../node_modules/@syncfusion/ej2-base/src/module-loader.js.ModuleLoader.clean (module-loader.js:56)

    at Grid.push../node_modules/@syncfusion/ej2-base/src/component.js.Component.destroy (component.js:84)

    at Grid.push../node_modules/@syncfusion/ej2-grids/src/grid/base/grid.js.Grid.destroy (grid.js:829)

    at resolvePromise (zone.js:831)

    at resolvePromise (zone.js:788)

    at zone.js:892

    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)

    at Object.onInvokeTask (core.js:3811)

    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)

    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)

    at drainMicroTaskQueue (zone.js:601)

    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:502)

    at invokeTask (zone.js:1744)

Please help me

[Pon Selva Jeganathan]

Hi Nam, 

 

Thanks for contacting Syncfusion forum. 

 

Query:  error-when-using-custom-paging-template

We have checked your query by preparing sample(ng-template Pager template), but we are unable to reproduce the issue at our end. Please refer to the below sample, 

https://stackblitz.com/edit/angular-pkqhub-j8jnae?file=app.component.ts 

 

Please refer to the below video demo, 

https://www.syncfusion.com/downloads/support/forum/140416/ze/video_demo_(2)-411810861 

After following the above reference, still faced issue please share us the following details.  

1. Kindly share us complete tree grid code example.
2. Share the details of your product version. 
3. Share the video demo of the issue.
4. If possible, reproduce the reported issue in the shared sample Or share us issue reproducing sample. 

 

The provided information will be helpful to provide you response as early as possible.   

 

Regards,
Pon selva 

 

[Nam]

Hi support, 

 I downgraded to version 17.1.48 and no longer had pagination errors, but my expand and collapse buttons no longer work.

 Below is my package version:

          "@syncfusion/ej2": "^17.2.41",

        "@syncfusion/ej2-angular-base": "17.1.50",

        "@syncfusion/ej2-angular-buttons": "17.1.50",

        "@syncfusion/ej2-angular-calendars": "17.1.51",

        "@syncfusion/ej2-angular-charts": "17.1.51",

        "@syncfusion/ej2-angular-circulargauge": "17.1.50",

        "@syncfusion/ej2-angular-diagrams": "17.1.50",

        "@syncfusion/ej2-angular-documenteditor": "17.1.50",

        "@syncfusion/ej2-angular-dropdowns": "18.1.42",

        "@syncfusion/ej2-angular-gantt": "17.1.47",

        "@syncfusion/ej2-angular-grids": "^17.1.51",

        "@syncfusion/ej2-angular-heatmap": "17.1.47",

        "@syncfusion/ej2-angular-inputs": "17.1.50",

        "@syncfusion/ej2-angular-layouts": "17.1.51",

        "@syncfusion/ej2-angular-lineargauge": "17.1.48",

        "@syncfusion/ej2-angular-lists": "^17.1.47",

        "@syncfusion/ej2-angular-maps": "17.1.51",

        "@syncfusion/ej2-angular-navigations": "17.1.49",

        "@syncfusion/ej2-angular-notifications": "17.1.48",

        "@syncfusion/ej2-angular-pivotview": "17.1.49",

        "@syncfusion/ej2-angular-popups": "17.1.50",

        "@syncfusion/ej2-angular-richtexteditor": "17.1.49",

        "@syncfusion/ej2-angular-schedule": "^17.2.49",

        "@syncfusion/ej2-angular-splitbuttons": "17.1.51",

        "@syncfusion/ej2-angular-treegrid": "^17.1.51",

        "@syncfusion/ej2-angular-treemap": "17.1.48",

        "@syncfusion/ej2-base": "17.1.49",

        "@syncfusion/ej2-buttons": "17.1.50",

        "@syncfusion/ej2-calendars": "17.1.51",

        "@syncfusion/ej2-charts": "17.1.51",

        "@syncfusion/ej2-circulargauge": "17.1.50",

        "@syncfusion/ej2-compression": "17.1.47",

        "@syncfusion/ej2-data": "17.1.51",

        "@syncfusion/ej2-diagrams": "17.1.50",

        "@syncfusion/ej2-documenteditor": "17.1.50",

        "@syncfusion/ej2-dropdowns": "17.1.49",

        "@syncfusion/ej2-excel-export": "17.1.50",

        "@syncfusion/ej2-file-utils": "17.1.47",

        "@syncfusion/ej2-gantt": "17.1.47",

        "@syncfusion/ej2-grids": "17.1.51",

        "@syncfusion/ej2-heatmap": "17.1.47",

        "@syncfusion/ej2-inputs": "17.1.50",

        "@syncfusion/ej2-layouts": "17.1.51",

        "@syncfusion/ej2-lineargauge": "17.1.48",

        "@syncfusion/ej2-lists": "17.1.47",

        "@syncfusion/ej2-maps": "17.1.51",

        "@syncfusion/ej2-navigations": "17.1.49",

        "@syncfusion/ej2-notifications": "17.1.48",

        "@syncfusion/ej2-pdf-export": "17.1.48",

        "@syncfusion/ej2-pivotview": "17.1.49",

        "@syncfusion/ej2-popups": "17.1.50",

        "@syncfusion/ej2-richtexteditor": "17.1.49",

        "@syncfusion/ej2-schedule": "^17.2.49",

        "@syncfusion/ej2-splitbuttons": "17.1.51",

        "@syncfusion/ej2-svg-base": "17.1.48",

        "@syncfusion/ej2-treegrid": "17.1.51",

        "@syncfusion/ej2-treemap": "17.1.48",

I don't know if it's because ej2-angular-treegrid or ej2-treegrid conflict with another package

Please help me

[Pon Selva Jeganathan]

Hi Nam, 

 

Thanks for the update. 

 

Query:   I downgraded to version 17.1.48 and no longer had pagination errors, but my expand and collapse buttons no longer work.

We have checked your query by preparing sample(with version 17.1.48), but we are unable to reproduce the issue at our end. Please refer to the below sample, 

https://www.syncfusion.com/downloads/support/forum/140416/ze/my-app-1814988867 

 

Please refer to the below video demo, 

https://www.syncfusion.com/downloads/support/forum/140416/ze/demo665537110 

After following the above reference, still faced issue please share us the following details.  

1. Kindly share us complete tree grid code example. 
2. Share the video demo of the issue.
3. If possible, reproduce the reported issue in the shared sample Or share us issue reproducing sample. 

 

The provided information will be helpful to provide you response as early as possible.   

 

Regards,
Pon selva