1. Feedback
  2. Vue
  3. 49878

Welcome to the Vue feedback portal. We’re happy you’re here! If you have feedback on how to improve the Vue, we’d love to hear it!

  • Check out the features or bugs others have reported and vote on your favorites. Feedback will be prioritized based on popularity.
  • If you have feedback that’s not listed yet, submit your own.

Thanks for joining our community and helping improve Syncfusion products!

1
Vote

Grid inside dialog throws error when there is a toolbar or an aggregate

I am getting an error from the grid when it is inside a dialog and the grid has a toolbar or an aggregate.
The errors does not happen when the grid in not inside a dialog.

There is no error if the grid does not have a toolbar or an aggregate.

Adding either of these to the grid causes a separate error to occur.

In either case, an error is thrown in the console and the grid stops loading and cannot be interacted with.

Software versions:
@syncfusion/vue-ej2-grid        24.1.45

@syncfusion/vue-ej2-popups 24.1.44
vue                                             3.4.7


Here is a stackblitz reproduction: 

https://stackblitz.com/edit/vue3-vite-typescript-starter-y6fnwx?file=src%2Fcomponents%2FGridDialogComponent.vue


When there is an aggregate this error in in console:

@syncfusion_ej2-vue-grids.js?v=bcfe8ff3:17582 Uncaught TypeError: Cannot read properties of undefined (reading 'firstChild')

    at Scroll2.wireEvents (@syncfusion_ej2-vue-grids.js?v=bcfe8ff3:17582:58)

    at Observer2.notify (chunk-CKPMR5SU.js?v=bcfe8ff3:3366:23)

    at Component2.notify (chunk-CKPMR5SU.js?v=bcfe8ff3:6814:28)

    at @syncfusion_ej2-vue-grids.js?v=bcfe8ff3:7585:24

    at @syncfusion_ej2-vue-grids.js?v=bcfe8ff3:23480:7


When there is no aggregate (just a toolbar) this error appears in console:

@syncfusion_ej2-vue-grids.js?v=bcfe8ff3:11961 Uncaught TypeError: Cannot read properties of undefined (reading 'element')

    at FocusStrategy2.setFirstFocusableTabIndex (@syncfusion_ej2-vue-grids.js?v=bcfe8ff3:11961:49)

    at FocusStrategy2.onBlur (@syncfusion_ej2-vue-grids.js?v=bcfe8ff3:11943:12)



In both these cases the appears occurs because the internal function for getting the footer/toolbar content returns undefined so I think the real issue is somewhere higher in the chain with the element for the content not being generated when inside a dialog.


In the stackblitz, I have tested on Chrome and Edge in Windows and get the same error.