I am using IgxGrid Detail grid to get parent as well child data. I need help in two scenarios:
1. I have 2 different API's to get parent and child data, but child data has primary key that is also present in parent data i.e. ID. Please suggest which should be best suited grid for the requirement. For now i am planning to use igxGrid detail.
2. I have a requirement to expand the child detail on click of parent grid cell, i.e. ID. How can i achieve this. Please help.
Please reply ASAP as it is an on-going project.
Hello Shobhana,
I suggest you take a look at the master-detail grid(igxGrid) in the sample below to see if it meets your requirement.
Grid Master-Detailhttps://ko.infragistics.com//angularsite/components/grid/master_detail.html
You can define the child grid in the template as in the sample above and provide the data separately from the parent. You can expand/collapse a parent row when a cell is clicked by calling IgxGridComponent's toggleRow() method at onCellClick event.
IgxGridComponent - onCellClickhttps://ko.infragistics.com//angular-docs/typescript/latest/classes/igxgridcomponent.html#oncellclick
IgxGridComponent - toggleRowhttps://ko.infragistics.com//angular-docs/typescript/latest/classes/igxgridcomponent.html#togglerow
Unable to access the links listed. It is throwing error "Site can't be reached"
Can you please try the following links instead?
Grid Master-Detailhttps://ko.infragistics.com/products/ignite-ui-angular/angular/components/grid/master_detail.html
IgxGridComponent - onCellClickwww.infragistics.com/.../igxgridcomponent.html
IgxGridComponent - toggleRowwww.infragistics.com/.../igxgridcomponent.html
Thanks Mihoko. But as per Grid Master-Detail example, Master record data is used for both Parent and child. But as per my requirement there are two different data source for Parent and child. Could you please share a sample with different data source for Grid Master Detail.?
In the sample, the child data is dynamically created using the parent row data at gridData() function in grid-master-detail.component.ts. You should be able to provide your child grid data here as well.
I have simplified the sample.
stackblitz.com/.../github-qsppcl
when i use toggleRow(), it throws error saying "Property togleRow does not exist on type IgxGridComponent"
This is because i have version of igniteui-angular : "8.2.7". What can be used alternate of toggleRow
Are you able to reproduce the error on the sample I provided?
https://stackblitz.com/edit/github-qsppcl?file=src/app/grid/grid-master-detail/grid-master-detail.component.html