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