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.
addRow also triggers the data pipes that process and render the data. You can view the code in the repo:
https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/grids/grid-base.component.ts#L3738
Since the data pipe trigger is currently not publicly accessible if you want to manually trigger a change that would re-render the rows you can change the value of the data object (the whole array). For example:
public addRow() { const newData = this.data.splice(0); const targetIndex = 0; newData.splice(targetIndex, 0, this.product); this.data = newData; }
Regarding the HierarchicalGrid questions.
Could you elaborate on what you mean by “does not like the way I specify primaryKey”? Does it throw an error? Does it not work in the way you expect it to? If so describe what does not work as you expect?
In general if “_id” is the name of a property in your component to which you want to bind to then you should bind it without the additional apostrophes - [primaryKey]="_id". This will ensure that the property value, specified in your component definition, is properly bound to the primary key input.
If instead “_id” is an actual value (the actual column field, which you want to set as primary key) then you should include the apostrophes - [primaryKey]=" '_id' ", or simply not use binding since you are setting a static string which does not change dynamically – primaryKey=”_id”.
Regarding the events. The events trigger on the actual child grid instances, not on the row islands, as each time a row is expanded a hierarchical grid instance is created and each has their own events.
For the latest version we’ve added additional feature that re-emits child grid events up to the related RowIsland with and additional parameter (owner) that hold reference the actual child grid from which the event originates.
You can view the related issue here: https://github.com/IgniteUI/igniteui-angular/issues/5611
For older versions you can use the onGridCreated event, which is specific to the RowIsland component, to get a reference to the child grid when they get created and subscribe to the desired events there.
<igx-row-island (onGridCreated)="gridCreated($event)” …
public gridCreated(event: IGridCreatedEventArgs) {
event.grid.onRowSelectionChange .subscribe(() => {});
}
I appreciate the information, I ended up figuring out the problem I was having with rowSelectable and rowEditable. It appears, both will work when the primaryKey is in [primaryKey] = " '_id' " with the extra apostrophes.
The problem I was running into was an oversight on my part with regards to newly created items in the grid. They wouldn't have had an _id property since they had not be saved to our database and acquired an id.
Thanks for all your help.
I’m glad to hear you have resolved your issue. Let me know if you have any additional questions or concerns.
Sorry one more question, how would I go about figuring out how to get the row index of a selection in one of the children grids?
Right now, what I am doing in my method tied to the onGridCreated event is pushing the grid that the event has into an array, so that I can go back and reference it later. So then when I do an Event of some variety (Save, Delete, Create) from my toolbar at the top of the page, I can loop through every grid available to check whether or not a grid has active selections by using the this.grid.selectedRows() method and do the corresponding action to the selected row or rows.
The problem I'm running into is that the grid.selectedRows() method just gives me back the JSON data for that particular row. I have no idea which index that data lives on in the grid which I need to be able to figure out if I want to do a Creation Above or Below the selected row in that particular grid.
Now this isn't an issue in the top level grid, since the top level data has a unique data _id field that is provided by our data that I can search for by looping through my main array tied to the top level array. However, the child array within each main data object has no such unique id and could carry duplicate data (which is the same with the child array of the child array).
So, is there a method I'm not seeing that would give me the row index(es) of all the selected rows within the child grids? Or am I going to need to put a unique identifier on every single object in each of the children arrays and children's children arrays?
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])
Let me know if that solves your issue.
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.
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?