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://es.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://es.infragistics.com//angular-docs/typescript/latest/classes/igxgridcomponent.html#oncellclick
IgxGridComponent - toggleRowhttps://es.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://es.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
If i am using a chart instead of igx grid in child, how can i provide child data? Also s per the sample of igx Master detail grid, for any chart, the data source is the parent data, right?Grid Master Detail is supported for which versions?
Master-Detail visualization for igxGrid was introduced in igniteui-angular 9.0.0, and it is not available in the prior versions to that.
The same sample demonstrates how to place a chart in a detail template as well. Please expand any row and click "SALES" tab in the template.
www.infragistics.com/.../master_detail.html
You can check the source code by clicking "VIEW ON CODESANDBOX" or "VIEW ON STACKBLITZ" button under the grid.The data for the chart is dynamically generated in getChartData() function in grid-master-detail.component.ts separately from the parent grid data.