How to detect expand event of second level subgrid of a multi layered ui-grid

Question

I am implementing multilevel ui-grid with angular 1.x and am new to ui-grid. My grid looks like : Grid A (expandable main grid) -> Grid B (expandable subgrid for A) -> Grid C (non-expandable subgrid for B).

The issue is that I am unable to detect when row of Grid B is expanded. I am able to detect expand event for row in Grid A using below code:

    gridApi.expandable.on.rowExpandedStateChanged(scope, function(row) {
       if (row.isExpanded) {
          //do something
       }
   });

However, nothing worked to detect expansion of row in Grid B. I populate the subgrid when outer grid is expanded. Hence, I need to know when Grid C is loaded (on expansion of row in Grid B) in order to make call to get data for its subgrid.

Here is my grid structure:

scope.gridOptions = {

  expandableRowTemplate: '<div ui-grid="row.entity.subGridOptions" ui-grid-expandable class="grid" ></div>',
  expandableRowScope: { subGridVariable: 'subGridScopeVariable' },
  columnDefs : [ ...],                      
  data: [
      {
        subGridOptions: {
        expandableRowTemplate: '<div ui-grid="row.entity.subGridOptions1"></div>',              
        columnDefs: [...],
        data: [
                {
                   ...
                   subGridOptions1 : {
                        columnDefs: [...],
                        data:[...]
                   }
                }
              ]
         }
      }
    ]
}

Please help me to detect expand event of subgrid inside a subgrid. Thanks!

Answer 1

As you do with the first grid, when you define the subgridoptions add:

onRegisterApi: function (subGridApi) {
  subGridApi.expandable.on.rowExpandedStateChanged(scope, function(row) {
    if (row.isExpanded) {
      //do something
    }
   });
}