Get datasource of child grid in Kendo using angular

Question

I have a master detail grid in kendo Grid and I am using the angular version of the Kendo Grid.

I have added a custom button for adding a new record in each row of the grid and the records is added below the row on which the button is clicked.

Below is the code that is working.

Button Template

<img src='images/save.png' ng-click='onClick()'
 class='k-grid-add' title='Add new record' alt='Create'/>

The click function

$scope.onClick = function ()
{               
    var grid = $scope.grid;    
    var sel = grid.select();    
    var item = grid.dataItem(sel);    
    var index = grid.dataSource.indexOf(item);
    grid.dataSource.insert(index + 1, {});
}

This part is working fine. Now the problem is that I need similar button in each row in the child grid too. But I don't know how to get the dataSource of the child grid in angular. I believe if I can get the child grid then the above code could be used to add a new row using the index.

Thanks for your time, Feel free to ask if any other information is required.

Thanks

Answer 1

Not sure if this is the best approach but I got it working by using the following function on the click of the add button in the child grid row.

$scope.commomAddClick = function ($event) {
    var childGrid = $($event.currentTarget).closest(".k-grid").data("kendoGrid");
    var sel = childGrid.select();
    var item = childGrid.dataItem(sel);
    var index = childGrid.dataSource.indexOf(item);
    childGrid.dataSource.insert(index + 1, {});
};

In the add button I have wired the click event as

ng-click='commomAddClick($event)'