How do I find matching subGridOptions.data element for expanded row? - angularjs

Question

In Angular UI-Grid v4.0.4, I have a button called "ViewLog" for each row that's inside an expandable row. I'm trying to display the data that's inside the child row when the ViewLog button is clicked.
This is the structure
Parent Row 1
|
--- (ViewLog) Child 1 (json for child 1)
--- (ViewLog) Child 2 (json for child 2)
--- (ViewLog) Child 3 ...
|
Parent Row 2
|
--- (ViewLog) Child 1 (json for child 1)
--- (ViewLog) Child 2 ...
The code for expandable:
gridApi.expandable.on.rowExpandedStateChanged($scope, function (row) {
if (row.isExpanded) {
row.entity.subGridOptions = {
appScopeProvider: $scope,
columnDefs: [
{
name: 'Log',
field: '',
width: "85",
cellTemplate: '<button ng-click="grid.appScope.displayLogFile(row.entity.subGridOptions.data[howToFindRightElement]);">View Log</button>'
}
]
};
}
});
In my example above, in cellTemplate, row.entity.subGridOptions.data is an array. I can't seem to figure out how to identify the correct element from that array that matches the child row selected after expanding the Parent row.
I just want to find the JSON from the child row and pass it over to displayLogFile().

Answer 1

So if I understand you correctly, you want to see the data of a newly generated ui grid that is created after expanding the row. If that is the case, then I think you need to treat is as another scope. The row.entity in expandable !== row.entity in cellTemplate. That being the case, then all you should need is this row.entity. So the following columnDef setup should work.
row.entity.subGridOptions = {
appScopeProvider: $scope,
columnDefs: [
{
name: 'Log',
field: '',
width: "85",
cellTemplate: '<button ng-click="grid.appScope.displayLogFile(row.entity);">View Log</button>'
}
]
};