Hello Varghese,

 Thank you for posting in our forum. 

If you are aiming to build the project with Ivy (which is now the default with Angular 9) you should update to our latest beta – 9.0.0-beta.2. In order to update to latest the beta version you should run “ng update igniteui-angular –next”.

You can refer to the following issue in our public repo regarding Angular Ivy support for more information: https://github.com/IgniteUI/igniteui-angular/issues/5849

 Let me know if that resolves your issue.

 Regards,

Maya Kirova

Hello Randall,

Glad to hear your application is working.

Let me know if you have any additional questions or if you need further assistance.

 Regards,

Maya Kirova

Hello Randall, 

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. 

Regards,

Maya Kirova

 

Hello Randall, 

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.

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

Hello Randall, 

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.

 

Regards,

Maya Kirova

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