Example of Master Detail Functional in React Grid Component

More Details...

Description

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 React component named DetailComponent(ej-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 React 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 Selection module into the services.