EJ2 Grid - Disable Add in toolbar of child grid based on parent row data

Question

So basically as the subject says, if I have a grid with a childgrid, how can I disable the Add New Record button in the childGrid toolbar if the row has a value that meets my criteria? In short, the parent grid row has a column called Authorized to Add. If its false, then I don't want the user to be able to add a new record to the childgrid BUT just for that row, as the next one, it may be true. Sorry I don't have any code, because I haven't even figured out where to start on this one.

Rajapandiyan Settu · Accepted Answer

Hi Mark, 

Greetings from Syncfusion support. 
 
Query:  if I have a grid with a childgrid, how can I disable the Add New Record button in the childGrid toolbar if the row has a value that meets my criteria? 

We have validated your query at our end. You can achieve your requirement by using detailDataBound event of Grid. 

DetailDataBound: https://ej2.syncfusion.com/javascript/documentation/api/grid/#detaildatabound                                                      

The detailDataBound event will be triggered at initial expanding of each child-Grid. In that event, we disabled the adding action of child-Grid based on the parent-Grid row data value. Refer to the below code example and sample for more information. 





[index.js] 
 
var grid = new ej.grids.Grid({ 
  dataSource: hierarchyOrderdata,   
  detailDataBound: detailDataBound, 
  ----- 
  childGrid: { 
    dataSource: employeeData, 
    queryString: "EmployeeID", 
    toolbar: ["Add", "Edit", "Delete", "Update", "Cancel"], 
    editSettings: { 
      allowEditing: true, 
      allowAdding: true, 
      allowDeleting: true 
    }, 
    ---- 
  } 
}); 
grid.appendTo("#Grid"); 
 
function detailDataBound(args) { 
  console.log(args); 
  if (args.data.Verified == false) { // here you can check the parent row value 
    args.childGrid.editSettings.allowAdding = false;  // disable the adding action 
  } 
} 
 

Sample: https://stackblitz.com/edit/lgietq-mwjxyr?file=index.js 

Note: The detailDataBound event only triggered at initial rendering of each child-Grid. The detail-state-change event will be triggered all the time when we collapse/expand the child-Grid. This event is not triggered at initial expand. Since the detail-state-change is an internal we need to on it in dataBound event of Grid. 
  
dataBound: https://ej2.syncfusion.com/javascript/documentation/api/grid#databound 





[index.js] 
var grid = new ej.grids.Grid({ 
  dataSource: hierarchyOrderdata, 
  dataBound: function dataBound(args) { 
    // ON the internal event of detail-state-change 
    this.on("detail-state-change", function(args) { 
      // triggered each time when we collapse and expand the rendered child Grid 
      console.log(args); 
    }); 
  }, 
  ---- 
}); 
grid.appendTo("#Grid"); 
 

Please get back to us if you need further assistance with this. 

Regards, Rajapandiyan S

Mark · Answer

That worked perfectly!

Rajapandiyan Settu · Answer

Hi Mark, 

We are glad that the provided solution resolved your requirement. 
 
Please get back to us if you need further assistance with this. 

Regards, 
Rajapandiyan S