How to reference to the child grid Kendo-UI / AngularJS?

[Дмитрий]

I want to reference to the object of my child grid and refresh the child grid with a new ID in the filter. When I reference to the child grid of the Kendo-Grid I get an undefined object.
HTML

<div kendo-grid="customerGrid" k-rebind="mainGridOptions" options="mainGridOptions" k-on-filter-menu-init="filterInit(kendoEvent)">
            <div k-detail-template>
                <div id="tabstrip" kendo-tab-strip="tabstrip">
                    <ul>
                        <li class="k-state-active">СЧЕТА КЛИЕНТА</li>
                        <li ng-disabled="dis" ng-click="loadDetailAcc()">Полная информация по счету</li>
                        <li ng-disabled="dis" ng-click="loadDetailGrid()">Просмотр событий по счету</li>
                    </ul>
                    <div>
                        <div>
                            <div kendo-grid="detailGrid" k-options="detailGridOptios"></div>
                        </div>

JAVASCRIPT/ANGULARJS

$scope.loadDetailGrid = function () {
    console.log($scope.detailGrid);// undefined
    $scope.detailGrid.dataSource.read(); //error
};

             $scope.detailGridOptios = {
                dataSource: {
                    transport: {
                        read: '/api/HomeApi/GetAccountEvent',
                        dataType: "json"
                    },
                    pageSize: 3,
                    filter: { field: "UniqueAccontCode", operator: "eq", value: id }
                },
                autoBind: false,
                height: 180,
                pageable: true,
                columns: [
                {
                    field: "IDUser",
                    title: "Идентификатор пользователя",
                    width: "120px"
                },
                {
                    field: "UniqueAccontCode",
                    title: "Номер счета",
                    width: "120px"
                }, {
                    field: "LastActData",
                    title: "Дата последнего действия",
                    width: "120px"
                }, {
                    field: "Text",
                    title: "Текст",
                    width: "120px"
                }
                ]
            };

 

 

 

[Boyan Dimitrov]

Hello Дмитрий,

Theoretically such approach for accessing the child grid will not work, because same variable ($scope.detailGrid in this case) will point to all child grid instances. My suggestion is to find the DOM element and get a reference to the widget. 

Regards,
Boyan Dimitrov
Telerik by Progress