How to prevent multiple selection in multiple subgrids?

[aerdem]

We are using EasyUI for JQuery.
In one of the pages I used datagrid and subgrid. (similar to this sample:https://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=material-teal&dir=ltr&pitem=&sort=asc)

When user opens more than one items in the main datagrid, user can select multiple items in different subgrids. The same case occurs in the demo. (You can see on the attachment.)

 I can access the selected item in the subgrid that is under the selected item in the main datagrid. But I can not access the selected items in subgrids under unselected items in the main datagrid.

The selection of multiple items in different subgrids leads to confusion for users when performing operations.

I want to ask whether there is a way of
1 preventing selection in subgrids which are under the unselected item of the main datagrid.
2 selecting item in the main grid when item is subgrid is selected.

I hope I could describe the situation and my expectation.

Best regards

[aerdem]

I solved the problem by collapsing the previously expanded row in the main datagrid.

I hold the index of the previously selected row. Then in each expansion of a row, I collapse the previously expanded row.
In this way, only one row is expanded in the master datagrid and this prevents confusion.

This is my code

Code:

 
  var selectedIndex=-1;
   .....................................
  onExpandRow: function (index, row) {

     //collapse previously expanded parent row.
     if (selectedIndex>-1 && selectedIndex!=index)
             $(this).datagrid('collapseRow',selectedIndex);
     
      selectedIndex=index;
      ..................
  }

I am also open to other solutions.