/
/
Master/Detail

null
More Details...

Loading....
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.