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
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.
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?
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
when i use toggleRow(), it throws error saying "Property togleRow does not exist on type IgxGridComponent"