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 can you confirm if I have correctly understood the custom logic that you want to implement according to your requirements. For starters, you have an async/await method that populates the data in the child grid (row island) on a given row in the hierarchical grid. After loading this data, you have another fillworklist() method that takes the data from the child grid and performs some custom logic. At the same time, however, if you expand the given row and then perform the methods, you cannot get the data from the child grid for some reason, and vice versa if you first load the data for the child grid and then expand, the expansion of the row does not wait for the data and the list to be loaded you remain empty. Please confirm if I understood your logic correctly, if not you can provide me with more information, video or code snippets to better navigate.
What I could suggest for now without knowing the exact logic behind your methods as a first approach is to span the given row first then wait for the data to be loaded into the child grid of the row and then retrieve the data as this can be achieved in several ways, mainly with await and then to load the data and then perform the given custom logic.
selectAllRows(event) { this.grid1.expandRow(event.parentId); await this.getdata().then(function (data) { if(this.childList) { this.fillWorklistList(this.childList); } }
As a second approach, what you can try is to first load the data from your backend api, then when you have the data, then expand the given row and bind the data in the child grid. After that you will have a stretched row with the loaded data in the child grid and you will be able to get this data as well as select the rows.
selectAllRows(event) { await this.getdata().then(function (data) { if(this.childList) { this.grid1.expandRow(event.parentId); this.fillWorklistList(this.childList); } }
However, what I suggest is to revise your custom logic and synchronize the backend with the frontend so that when you expand a row it waits for the data, then fetches the data and selects it and executes your custom methods.
If this is not an accurate demonstration of what you are trying to achieve, please feel free to modify it and send it back to me along with steps to reproduce. Alternatively, if the behavior cannot be replicated, please feel free to provide your own sample. You could provide more information, screenshots, code snippets or a sample with steps to reproduce.
Having a working sample on my side, which I can debug, is going to be very helpful in finding the root cause of this behavior.
Thank you for your cooperation.
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.
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.