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

2 posts, 0 answers
  1. Дмитрий
    Дмитрий avatar
    3 posts
    Member since:
    Jul 2016

    Posted 04 Aug Link to this post

    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"
                    }
                    ]
                };

     

     

     

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 08 Aug Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
Back to Top