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.
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
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.?
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
Unable to access the links listed. It is throwing error "Site can't be reached"
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