Hi Team,
I am using Hierarichal grid load on demand feature of V9.1.28.Requirement: Everytime i expand the child grid, i want to get the updated Data binded to the child grid.Also only one grid is expanded at a time. I also expand a row on page load.
One more thing if the event.expanded is true, why the code is called so many times? it should be called once, right?
Using rowToggle(event) to achieve the same.
Also i want copy the child grid data to excel. i am using [clipboardOptions]="options" property to copy and paste the data to excel in
TS:
Eventhough i am calling the api on expanding i am unable to bind to child grid using rowToggle() method.
Hi Shobhana,
To address your question about the provided code-snippet and the reason behind the rowToggle event handler executing so many times, what I can say is that this is a recursion due to the fact that invoking the expandRow method from within the rowToggle handler causes the latter to be emitted again resulting in a stack overflow. Please, make sure not to invoke expandRow from the rowToggle handler.
There are some non-isolated parts of the code-snippet, that prevent me from identifying what exactly is going on and where binding the child grid data is performed. For instance, the this.getChildData code is missing. Nevertheless, I have created this sample, which updates the expanded row’s "Orders" child grid data. It does this in the rowToggle handler, and as you can see, the data is updated with each expansion.
As you are already familiar form our previous discussions:
public rowToggle(event: IRowToggleEventArgs, parentKey: string) { console.log('row toggle'); if (!event.expanded) { return; } const childGrids = this.hGrid.gridAPI.getChildGridsForRowIsland('Orders'); if (childGrids.length == 0) { return; } const grid = this.hGrid.gridAPI.getChildGridByID('Orders', event.rowID); if (!grid) { return; } const dataState: IDataState = { key: 'Orders', parentID: event.rowID, parentKey: parentKey, rootLevel: false, }; this.loadTargetGridData(dataState, grid as IgxHierarchicalGridComponent); }
The StackBlitz sample I prepared achieves reloading child grid data on each expansion of a parent row, for the “Orders” row island. The below gif demonstrates this:
Please, check out the sample. I have also included some console logs to help understand the sequence of the events and data assignment operations.
Finally, please, note that since version 9.x is not supported, we cannot provide samples with it according to our Support Policy. We strongly encourage you to upgrade, which comes with the advantage of leveraging all new features and fixes introduced since version 9. The most recent release is 16.0.
Best regards, Bozhidara Pachilova Associate Software Developer