Hello,
I have a requirement for my current project to be able to add Rows to the Top of an Hierarchical Grid, the bottom, and above and below a selected row (or rows). I need to be able to do this at all grid levels, so the top level igx-hierarchical-grid and for each and every igx-row-island that could be potentially underneath.
As far as I can tell, the addRow functionality that is available for the heirarchical grid and row-islands only seems to be able to support adding to the bottom of a specified grid, is there currently a way to do the other functionality in some form?
Any insight would be appreciated.
Thanks,
-Randall Blevins
Hello Randall,
Thank you for posting in our forum.
By design the addRow API method adds the data record to the end of the data source. You can however modify the data array, to which the grid is bound to, and change the location of that record. Since the grid is bound to that array it will automatically reflect that change and the row will be rendered at the desired index.
For example:
this.grid1.addRow(this.product); const lastRec = this.data.pop(); const targetIndex = 0; this.data.splice(targetIndex, 0, lastRec);
Here is a sample for your reference, where the new record is moved at index 0, so that it is added as the first record in the grid:
https://stackblitz.com/edit/angular-5cdeng?file=src/app/grid/grid-editing-sample/grid-editing-sample.component.html
Let me know if you have any additional questions or concerns.
Regards,
Maya Kirova
A couple more Hierarchical Grid questions if you don't mind as well:
For reference, I am currently using IgniteUI-Angular version 7.2.3.
Is there a way to enable both rowEditable and rowSelection? Currently, it seems if I try to enable both, one or the other does not like the way I specify primaryKey - rowSelectable seems to want primary key in the following format: [primaryKey]="_id" while rowEditable seems to want it to have the additional apostrophes surrounding the _id, ie [primaryKey]=" '_id' ".
Second Question: does the onRowSelectionChange and onSelection events actually fire for an igx-row-island? I can't seem to get these events to fire when I make a row selection, only the events tied to the top level igx-hierachical-grid seem to fire. I can't seem to find any examples in the current documentation demonstrating a igx-row-island with a selection event.
Glad to hear your application is working.
Let me know if you have any additional questions or if you need further assistance.
Appreciate the answer. I had to switch over to setting a primaryKey. I was hoping to avoid it so as to avoid some refactoring. Not having the full row information in the onGridCreated event parentId field is also not ideal (instead now all it gives is the primaryKey) so I have to go looking for it.
Anyways, I do appreciate all the help, I finally got my application in a working state, so thank you.
Child Grid rows are included in the indexing of rows as are other non-data rows (group rows, summary rows etc.), so the row indexes will change if non-data rows are added in the grid.
You can use the grid’s deleteRow API, which accepts a rowId param, which if you have a primaryKey should be the primary key value of the record you wish to delete and if there is no primary key should be the data object itself (which you get from the selection API). In that way you won’t have to rely on row indexes.
Let me know if that solves your issue.
Hey Maya,
Thanks for the response, that got me what I needed. I am running into a problem with attempting to remove rows that I am hoping you could help me with.
The problem I am running into is that when I open a child grid on a row, and then select the main grid row immediately underneath the generated child grid, when I attempt to remove that row, it tells me Delete is not a function. When looking at what is being grabbed, it appears that when attempting to grab a main grid row that comes immediately after a child grid by Index is resulting in pulling in the IgxChildGridRowComponent instead of the IgxHierarchicalRowComponent. I'm not sure if this is intentional or not, but basically I cannot delete a Main Grid row if it comes after a main grid row that has open it's child grid. If I close the grid, then it works like I expect.
I'm probably going to try deleting via a this.grid.data.splice(index, 1) instead and force an update, I'm just curious if this is intentional or a bug of some variety?
selectedRows() returns an array of the actual data objects (if no primary keys is defined) of the selected rows.
You can get the full grid’s data array from the data prop (grid.data) and check the index of the selected data object in that array, for example:
grid.data.indexOf(grid.selectedRows()[0])