Data Grid Grouping When All Columns Are Group Freezes

[Khalipha Thomas]

When working with my data grid and its grouping functionality I found out that grouping my data by all its columns, I am unable to ungroup the groupings via dragging and dropping them inside of the grid itself. Doing this results in the grid itself being frozen in place where the only solution is to refresh the entire page to regain control. I have tried all I could to debug this on my own to no avail. Any help with debugging this would be greatly appreciated. I will attach a video that documents this weird activity as well as the App.vue file that I was able to use to replicate this weird behavior.

Thanks in advance

https://ufile.io/q06oyx6k(App.vue)

https://www.loom.com/share/02f95321cd884ec3a49306547004be85(video documentation)

[Rajapandiyan Settu]

Hi Khalipha, 

Thanks for contacting Syncfusion support. 

We have tried to reproduce the reported behavior with the provided code example, but it was unsuccessful at our end. The grouping and ungrouping action by drag and drop the column header is working fine in our latest version (v19.4.41). Find the below sample for your reference. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/vue2_grid_grouping1531895956.zip 

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Video_grid_group181972315.zip 

By further validating, we found that the Grid’s depending component CSS styles are not included in the project.  

Screenshot: Sort icon, close icon, expand icon and collapse icons are not rendered in the Grid. 

 

Kindly import below CSS style scripts to resolve this styling issue, 

Adding CSS references: https://ej2.syncfusion.com/vue/documentation/grid/getting-started/#adding-css-reference 

[App.vue] 

<style> 

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';   

@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';   

@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';   

@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';   

@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';   

@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-vue-grids/styles/material.css'; 

</style> 

Still, if you face the issue, kindly share the below details to validate further. 

1. Share the package.json file.
2. Share the issue reproducible sample or try to make the issue in the given sample.
3. Share NPM and Node.js version.

Regards, 

Rajapandiyan S