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
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?
Hello Randall,
I’m glad to hear you have resolved your issue. Let me know if you have any additional questions or concerns.
Regards,
Maya Kirova
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.
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.
For example:
<igx-row-island (onGridCreated)="gridCreated($event)” …
public gridCreated(event: IGridCreatedEventArgs) {
event.grid.onRowSelectionChange .subscribe(() => {});
}
Let me know if you have any additional questions or concerns.
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.