Hi Team,I am using Ignite v9.1.28 Hierarchical grid.Requirement: On click of start button, we expand the child grid with all rows being selected by default and we need the list of all selected bogies to pass to API. And disable deselect ALL feature from UI.TS:
but my selectedList is empty as on click of Start button, it takes few seconds to fetch the childList from API and display in the grid (Load on Demand).
How can i get the list of child Data and disable deselect All option from UI. Please help.
Hello,
I have been looking into your question and what I understand is that when firing a given event from clicking a button, you expand a given row from the hierarchical grid and you want to take all the data from the expanded child row as well as select all rows in the given row island that was expanded, but the given requirements cannot be achieve by your side. What I could say is that the described behavior is expected because when you have load on demand and you load the child row data when expanding, it takes a certain amount of time for the creation of this data and you want to access it immediately. That is, what you need to do is wait for the data to load and then select the rows and access the data. This can be achieved with a setTimeout function or with await keyword in async method.
What I could suggest after you fires the given event and execute the function to expand the given row as per your requirement with expandRow by passing the id of the row, then get that row with getRowByKey and again pass its id.
this.hGrid.expandRow(0); let row = this.hGrid.getRowByKey(0);
Then, for example, in setTimeout you will hook the loading of the data and then you can get the child data of the expanded row.
setTimeout(() => { let rowData = row.data.Array; }, 1000);
You can then iterate through each row in the row island and select it as to access the row you can use the getChildGrids method of the hierarchy grid which returns all row islands. To access your row island ie expanded row you can use its index. After that you can loop through all the rows of the already fetched data.
setTimeout(() => { let rowData = row.data.Albums; for(let i = 0; i < rowData.length; i++){ this.hGrid.getChildGrids()[0].getRowByIndex(i).selected = true; } }, 1000);
Please keep in mind that according to our policy igniteui-angular version 9.1.28 is considered retired and it is no longer eligible for Developer Support Services, to achieve your requirement and take advantage of all introduced features and enhancements, I would suggest upgrading to the supported versions of igniteui-angular or latest version i.e. 15.1.
The described scenario could be observed here:
In addition, I have prepared small sample illustrating this behavior which could be found here. Please test it on your side and let me know how it behaves.
If you require any further assistance on the matter, please let me know.
Regards,
Georgi Anastasov
Entry Level Software Developer
Infragistics
Thank you Georgi for replying.As i am using load on demand feature of Hierarchal Grid. I have seperate API calls for Parent Grid and Child Grid.I am using async/await to wait for child grid to load data and than call the fillworklist() method.Requirement: On click of Select button, i want to select all the rows of Child Grid and also expand the child Grid to see the Grid data.TS:
onClick of Select Button:Scenario 1:selectAllRows(event) {
await this.grid1.expandRow(event.parentId); // Doesn't wait for the api to get the response and next line of code is executed giving empty array.
selectAllRows(event) {
await this.getChildData(); // Waits till the api gives response.this.grid1.expandRow(event.parentId); // Expands the child grid with the Grid Data but as ChildList API is called twice with above line and this line, it returns double the result set.