Utilizing the DevExtreme Nested Data Grid (dx-data-grid) within an Angular app to exhibit hierarchical data is proving challenging for me. The data structure comprises a parent table, where each row can have child rows, which in turn can have grandchild rows.
- Upon initializing the grid, all child and grandchild rows are expanded as expected. Nevertheless, upon sorting the parent table by clicking on a column header, a peculiar issue surfaces:
- The first-level child rows situated directly below the parent rows stay expanded, just as anticipated. However, to my dismay, the grandchild rows nested under the first-level child rows unexpectedly collapse.
In order to illustrate this issue more clearly, I've created a concise reproducible example on CodeSandbox.
To replicate the problem, follow these steps:
Expand the row with ID 2.
Expand the child row with ID 3.
Now click on the column name of the first table that includes the rows with IDs 1 and 2.
I am seeking assistance to comprehend why the grandchild rows collapse post sorting the parent table and would greatly appreciate any insights or suggestions to rectify this behavior.