Example of Master/Detail in Angular Grid Component

Master-Detail Grid is a use case scenario, in which the details of a Master Grid record, is viewed in a separate Grid(Detail Grid) by clicking the particular row.

The steps to achieve this scenario is as follows,

• Get the selected record of Master Grid in the rowSelected event.
• Filter the data based on the selected record and bind the result to the Detail Grid`s dataSource property.

The above demo is implemented as follows.

• Created a Angular component named DetailComponent(ejs-griddetail) to show details of selected row from Master Grid.
• The DetailComponent has an Input property key, based on which the data will be filtered and set to the Detail Grid. Here the CustomerID value is used as key value.
• Created an another Angular component named MasterComponent which has Master Grid component with rowSelected event bound to it.
• The MasterComponent uses DetailComponent and it updates key property when a row is selected in the Master Grid.
• Now based on the key value, the data is filtered and the Detail Grid is updated with the filtered data.

Use selectedRowIndex to select a row at the initial rendering.

Injecting Module

Grid component features are segregated into individual feature-wise modules. To implement this use case, the selection feature need to be enabled and also we need to inject SelectionService into the @NgModule.providers section.