Select all checkboxes in a row detail child grid when the main row is selected.

[Jason Nham]

I want to just select all the options in the child grid when the parent row is selected. I'm not able to make this function happen. Additionally not all of them are required to be selected, I'd just like them to default select at the start. As of right now I see no way of this working, am I missing anything?


var grid= new ej.grids.Grid({
    dataSource: employeeData,
    columns: [
        {type: 'checkbox', width: 50},        ​
        { field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Right', width: 120 },
        { field: 'FirstName', headerText: 'First Name', width: 150 },
        { field: 'City', headerText: 'City', width: 150 },
        { field: 'Country', headerText: 'Country', width: 150 }
    ],
    childGrid: {
        dataSource: data,
        queryString: 'EmployeeID',
        columns: [
            {type: 'checkbox', width: 50},      
            { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
            { field: 'CustomerID', headerText: 'Customer ID', width: 150 },
            { field: 'ShipCity', headerText: 'Ship City', width: 150 },
            { field: 'ShipName', headerText: 'Ship Name', width: 150 }
        ],
    },
    height: 315
});
grid.appendTo('#Grid');

[Pavithra Subramaniyam]

Hi Jason Nham,

By default, the parent Grid row selection will not impact on its child Grid. However, you can achieve your requirement using the “checkBoxChange” and “detailDataBound” events inside which you can call the child grid “checkSelectAll”  method. Please refer to the below code example, API, and sample link for more information.

function checkBoxChange(args) {

  if (!args.target.classList.contains('e-checkselectall')) { // for individual row selection

    var row = args.target.closest('tr');

    var detailRow = row.nextElementSibling;

    if (detailRow.classList.contains('e-detailrow')) {

      if (

        detailRow

          .querySelector('.e-grid .e-checkbox-wrapper span')

          .classList.contains('e-check') != args.checked

      ) {

        detailRow

          .querySelector('.e-grid')

          .ej2_instances[0].selectionModule.checkSelectAll();

      }

    }

  } else { // for header checkbox selection

    var childGrids = [].slice.call(

      grid.element.querySelectorAll('.e-childgrid')

    );

    childGrids.filter((cgrid) => {

      if (

        cgrid

          .querySelector('.e-checkbox-wrapper span')

          .classList.contains('e-check') != args.checked

      ) {

        cgrid.ej2_instances[0].selectionModule.checkSelectAll();

      }

    });

  }

}

 

function detailDataBound(args) {

  if (

    args.detailElement.parentElement.previousElementSibling

      .querySelector('.e-checkbox-wrapper .e-frame')

      .classList.contains('e-check')

  ) {

    setTimeout(() => {

      args.childGrid.selectionModule.checkSelectAll();

    }, 100);

  }

}

 

API         : https://ej2.syncfusion.com/javascript/documentation/api/grid/#checkboxchange

                 https://ej2.syncfusion.com/javascript/documentation/api/grid/#detaildatabound

Sample : https://stackblitz.com/edit/q2z7nz-wbzg3u?file=index.js

Regards,

Pavithra S

[Jason Nham]

Hi Pavithra,

Thank you for your very helpful response! That solution did work. For the selecting of the checkboxes.

Is there a way to store and keep track of the child data that is selected to be stored or manipulated somewhere else?
I'm trying to find a way to update maybe a data variable so I can use this data elsewhere.

[Pavithra Subramaniyam]

Jason,

You can get the selected row details of the child Grid by binding the “rowSelected” event to the Child Grid. The argument of this event will contain the selected record details.

https://ej2.syncfusion.com/javascript/documentation/api/grid/#rowselected

[Jason Nham]

Pavithra,

You have been extremely helpful! Thank you so much for your supp