Master Grid
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 javascript 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 javascript 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 providers section.