Having trouble figuring out how to use computed grid data while also keeping expand functionality working

[Vincent]

I'm trying to populate a grid with some async data (not in this repro for simplicity) and do the data processing inside a Vue computed function. 

However I can't seem to get the expanding/collapsing rows functionality to play along nicely.


Here's my attempt (where I save 'e.collapsedGroups' into a ref and recurse over it inside the computed):

Fkcdqd (forked) - StackBlitz

Basically the only issue that I'm still seeing is that when I collapse product name 'Apple' it will close all 'Apple' rows. You can observe this by going to the repro and collapsing 'Apple' product in the units in stock '2', and then scrolling down to the units in stock '7' and seeing there that the 'Apple' is also collapsed.


My guess is is that there must be a simpler way to implement the expand functionality with a computed, but so far haven't found a way.

I would really appreciate any input to help me along 😁

[Plamen]

Hi,

In such case we recommend using the special properties that we added for such scenarios as for example it is done in this example - https://www.telerik.com/kendo-vue-ui/components/grid/grouping/grouping-virtual/:

 :unique-field="'ProductID'"
    :collapsed-groups="collapsedItems"

The unique-field is responsible to set the field from the data that will help comparing the items and the collapsed-groups prop tells the Grid to get the expanded state from it instead of the dataItems.

Here is the updated example of your StackBlitz - https://stackblitz.com/edit/6q4hqc-p9ezgs?file=src%2Fmain.vue

Hope this will help you solve the issue. If you have further questions please let me know.

Regards,
Plamen
Progress Telerik

[Mat]

I'm having the same issue. Unfortunately the example you provide in StackBlitz doesn't work. Only the first group to be collapsed works... trying to collapse other groups fails.

Please advise.

[Filip]

Hi, Mat,

I tested the example previously provided by my colleague however I was not able to observe the undesired behavior in which only the first group collapsed. I have attached a screenshot of how collapsing looks on my end. Can you pease confirm if I am doing the correct steps? I apologise in advance in case I have misunderstood the scenario.

Regards,
Filip

[Mat]

Bizarre. I've tried the StackBlitz above (Fkcdqd (forked) - StackBlitz) in three different browsers (Edge, Chrome, Brave) and the result is always the same: only the first collapse action works. Here's a screenshot that shows the top group has been collapsed, but the second group doesn't (but the correct icon is displayed in the group cell):

Same result on a different laptop. 

[Filip]

Hi, Mat,

I tested the example again and I was able to reproduce the behaviour in which the collapsing does not work. After tweaking the `onExpandChange` it seems that the other groups now will collapse as well:

• https://stackblitz.com/edit/6q4hqc-cuvfokn3?file=src%2Fmain.vue
  

Please let me know in case further assistance is required.

Regards,
Filip