Hierarchy grid: check children when parent checked

[Matthieu]

Hi,

I have a 3 level herarchy grid with selection checkboxes on each level. I would like to link parent to children selection (ie when parent row is selected, each row in child grid is selected). How can I do that?

And in a more general way, how can I access the child grid component instance from the parent row?

Thanks

Regards,

Matt 

[Vignesh Sivagnanam]

Hi Matthieu 

  

Greetings from Syncfusion support 

  

Based on your query you want to select all the rows in the child grid while selecting the row using checkbox. You can achieve your requirement by using the EJ2 Grid rowSelected event and you can use the below code example.  

  

Please refer the below code example and sample for your reference, 

  

rowSelected(args) { 

    var childAll = args.row.nextElementSibling.querySelectorAll('.e-grid'); 

    for (var i = 0; i < childAll.length; i++) { 

      var child = args.row.nextElementSibling.querySelectorAll('.e-grid')[i] 

        .ej2_instances[0]; 

      child.selectionModule.checkSelectAll(); 

    } 

  } 

  

Sample :  https://stackblitz.com/edit/angular-yuduph?file=app.component.ts 

  

Regards 

Vignesh Sivagnanam 

[Matthieu]

Thanks for your reply!

From your code snippet, I've managed to make progress. I only have a remining problem: I don't know how to deselect a specific row?

My need is to deselect a parent row if all childs are deselected. 

I've found methods in selectionModule to deselect all rows but not for only one row (leaving other rows in their checked/unchecked state).

Is there a way to do that?

Thanks,

Matt

[Balaji Sekar]

Hi Matthieu, 

Thanks for your valuable patience. 

We checked the parent row is not deselect when deselected all the child grid’s rows but we are unable reproduce at our end so, please share the following details to us that will help to validate further. 

1. Share the replicate procedure details.
2. Share the video demonstration of the mentioned problem.
3. If possible to share replicate sample.
4. Ensure the Syncfusion package version.

Regards, 

Balaji Sekar. 

[Matthieu]

Hi,

Thanks for your response but I think I was not clear in my explanation:

 The header checkbox in the subgrid is working correctly (checked, inderterminate or unchecked depending on the siblings rows checked) but I want my parent grid's row checkbox to be "synched" with the subgrid header checkbox (so when all child rows are unchecked, the parent row (in the grid one level above) is unchecked).

For this need, I would like to be able to check/uncheck a specific row dynamically. I've managed to check a specific row but I cannot find a method to uncheck a specific row.

Is there a method available?

Thanks,

Regards,

Matt

[Thiyagu Subramani]

Hi Matthieu, 

Thanks for your update. 

Based on your shared information we suspect that you want to check and uncheck the child Grid rows based on parent row’s check/uncheck actions. For this we have prepared sample using selectRow (Select the specific row) and addRowsToSelection ( Deselect the specific row by passing index). Please refer to the below code and sample link for more reference. 

// Child Grid’s Selected and Deselected event 

rowSelected: function (args) { 

                if (args.target != null) { 

                    if (args.data.length === args.target.closest('.e-grid').ej2_instances[0].pageSettings.totalRecordsCount) { 

                        var parentInstances = (document.getElementById(args.target.closest('.e-grid').ej2_instances[0].parentDetails.parentID) as any).ej2_instances[0]; 

                        var rowIndex = parentInstances.getRowIndexByPrimaryKey(args.target.closest('.e-grid').ej2_instances[0].parentDetails.parentRowData[parentInstances.getPrimaryKeyFieldNames()[0]]); 

                        this.flag = false; 

                        parentInstances.selectRow(rowIndex);   // Select the parent Grid’s specific row 

                        this.flag = true; 

                    } 

                } 

            }.bind(this), 

            rowDeselected: function (args) { 

                if (args.target != null) { 

                    if (args.data.length === args.target.closest('.e-grid').ej2_instances[0].pageSettings.totalRecordsCount) { 

                        var parentInstances = (document.getElementById(args.target.closest('.e-grid').ej2_instances[0].parentDetails.parentID) as any).ej2_instances[0]; 

                        var rowIndex = parentInstances.getRowIndexByPrimaryKey(args.target.closest('.e-grid').ej2_instances[0].parentDetails.parentRowData[parentInstances.getPrimaryKeyFieldNames()[0]]); 

                        parentInstances.selectionModule.addRowsToSelection([rowIndex]);  // Deselect the parent Grid’s specific row 

                    } 

                } 

            }, 

             

    } 

// Parent Grid’s Selected and Deselected event 

    rowSelected(args) { 

        if (this.flag) { 

            args.row.nextElementSibling.getElementsByClassName('e-detailcell')[0].firstElementChild.ej2_instances[0].selectionModule.checkSelectAll();   // Select the child Grid’s all rows based parent Grid ror 

        } 

    } 

    rowDeselected(args) { 

        args.row.nextElementSibling.getElementsByClassName('e-detailcell')[0].firstElementChild.ej2_instances[0].selectionModule.clearSelection(); // Clear child Grid’s selection based on parent Grid row 

    } 

Sample link: https://stackblitz.com/edit/angular-vqxxgx-ud4diq?file=app.component.ts 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S