How to implement a Master/Detail grid with editing options for both tables?

Question

I saw the following example to implement a master/detail grid:

https://ej2.syncfusion.com/javascript/demos/#/bootstrap5/grid/master-detail.html

I have doubts about how to implement the CRUD in both tables without problems.

Mohammed Ansar Sathik Ali · Accepted Answer

Hi Luis Guerreo,Query: How to implement a Master/Detail grid with editing
options for both tables?Based on your query, you want to enable the toolbar to both
grids. We have achieved this by following method

import { Grid, Edit, Toolbar, Selection } from '@syncfusion/ej2-grids';
  Grid.Inject(Edit, Toolbar, Selection);
   
  var mastergrid = new ej.grids.Grid({
    dataSource: masterdata,
    selectedRowIndex: 1,
   
    toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
    editSettings: {
      allowEditing: true,
      allowAdding: true,
      allowDeleting: true,
      mode: 'Normal',
    },
    columns: [
      {
        field: 'ContactName',
        headerText: 'Customer Name',
        isPrimaryKey: true,
        width: 150,
      },
      { field: 'CompanyName', headerText: 'Company Name', width: 150 },
      { field: 'Address', headerText: 'Address', width: 150 },
      { field: 'Country', headerText: 'Country', width: 130 },
    ],
    rowSelected: rowSelected,
  });
  mastergrid.appendTo('#MasterGrid');
   
  var grid = new ej.grids.Grid({
    allowSelection: false,
    toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
    editSettings: {
      allowEditing: true,
      allowAdding: true,
      selectionSettings: { type: 'Single' },
      allowDeleting: true,
      mode: 'Normal',
    },
   
    columns: [
      {
        field: 'OrderID',
        isPrimaryKey: true,
        headerText: 'Order ID',
        width: 100,
        textAlign: 'Right',
      },
      {
        field: 'Freight',
        headerText: 'Freight',
        width: 100,
        format: 'C2',
        type: 'number',
      },
      { field: 'ShipName', headerText: 'Ship Name', width: 200 },
      { field: 'ShipCountry', headerText: 'Ship Country', width: 150 },
      { field: 'ShipAddress', headerText: 'Ship Address', width: 200 },
    ],
  });
  grid.appendTo('#DetailGrid');

Sample: https://stackblitz.com/edit/wyu7w4-188riq?file=index.js,index.htmlPlease get back to us if you need further assistance on
this.Regards,Mohammed Ansar ,

Mohammed Ansar Sathik Ali · Answer

Hi Luis Guerreo,Greetings from the Syncfusion support.Query:How to implement a
Master/Detail grid with editing options for both tables?Based on your query, you want to enable
the editing on both master and detail grid. We have achieved this by using the
editSettings properties to both the grid. kindly ensure to define IsPrimaryKey column whose value is
unique. Based on primarykey column value only edit operation will take place

Sample: https://stackblitz.com/edit/wyu7w4-zrth9m?file=index.jsDocumentation: https://ej2.syncfusion.com/documentation/grid/editing/edit/Please get back to
us if you need further assistance on this.Regards,Mohammed Ansar ,

Luis Guerrero · Answer

Thanks, is there a way to use the ToolBar to add, edit, update and delete both the master and detail grids?