1. Home
  2. Forum
  3. React - EJ 2
  4. Hierarchy grid: synchronize checked state between parent and child

Hierarchy grid: synchronize checked state between parent and child

Hi Syncfusion Team,

I have 2 level hierarchy grid with selection checkboxes on each level. I would like to link the parent to children selection 
+ when the parent row is checked, each row in the child grid is checked 
+ when I check one or more rows in the child, the parent node is also checked. 
+ when I uncheck all rows in the child, the parent node is also unchecked. 
How can I do that?

Thanks
Regards,
Hung Ton

4 Replies 1 reply marked as answer
RS Rajapandiyan Settu Syncfusion Team March 3, 2022 02:00 PM UTC

Hi Ton, 
 
Thanks for contacting Syncfusion support. 
 
In your requirement, you want to perform selection in child Grid based on parent Grid selection and vice versa. We have considered your requirement as custom sample and will update the further details on or before Mar 8th 2022. 
 
We appreciate your patience until then. 
 
Regards, 
Rajapandiyan S 


RS Rajapandiyan Settu Syncfusion Team March 8, 2022 03:04 PM UTC

Hi Ton, 
 
Thanks for patience. 
 
We have prepared the sample based on your requirement. We have achieve this by using rowSelected and rowDeselected events of parent and all the childGrids. 
 
 
 
  parentRowSelected(args) { 
      // select the childGrid rows when parent row checked 
    if (args.row.length > 0) { 
      for (var i = 0; i < args.row.length; i++) { 
        if (args.row[i].nextElementSibling &&args.row[i].nextElementSibling.classList.contains('e-detailrow')) { 
          var firstLevelChild = args.row[i].nextElementSibling.querySelector('.e-grid'); 
          if (firstLevelChild.querySelector('.e-checkselectall').checked != true) { 
            firstLevelChild.ej2_instances[0].selectionModule.checkSelectAll(); 
          } 
        } 
      } 
    } 
  } 
  parentRowDeselected(args) { 
     // clear the selection of childGrid when parent row unchecked 
    if (args.row.length > 0) { 
      for (var i = 0; i < args.row.length; i++) { 
        if (args.row[i].nextElementSibling && args.row[i].nextElementSibling.classList.contains('e-detailrow')) { 
          var firstLevelChild = args.row[i].nextElementSibling.querySelector('.e-grid'); 
          if ( firstLevelChild.ej2_instances[0].getSelectedRecords().length > 0) { 
            firstLevelChild.ej2_instances[0].clearSelection(); 
          } 
        } 
      } 
    } 
  } 
 
 
Similar approach has implemented to all the Grids. 
 
 
But, it has some limitation on particular cases. 
 
  1. It is not feasible to achieve this requirement (“when I check one or more rows in the child, the parent node is also checked”) Since it select all the rows in the childGrid.
  2. The selection on the childGrid is performed only if the childGrid element is available in the DOM. The ChildGrid is rendered at initial expanding of parent row.
 
Regards, 
Rajapandiyan S 


Marked as answer
TT Ton That Hung March 9, 2022 08:35 AM UTC

Thank you for your answer.

Regards,
Hung Ton



RS Rajapandiyan Settu Syncfusion Team March 10, 2022 04:08 AM UTC

Hi Ton, 
 
Thanks for your update. Please get back to us if you need further assistance. 
 
Regards, 
Rajapandiyan S 


Loader.
Up arrow icon