Bind Kendo grid in Angular on button ng-click

Question

Я пытаюсь отобразить сетку Kendo с угловым щелчком по кнопке. Функция GetCustomer для ng-click находится в пределах customerController. Если код для отображения функции сетки init() вызывается из основного контроллера, тогда он отображает данные, но не на нажатие кнопки.

В var в $scope хранятся данные, но как-то сетка в разметке html не перерисовывается при вызове из обработчиков событий. Он отображается только во время первоначального запроса страницы html. Нужно ли мне собирать обещание или что-то еще?

У меня нет ошибок в консоли, но сетка не перерисовывается с данными при нажатии кнопки. Любая помощь будет оценена по достоинству.

JSFiddle ссылка.

Вы можете раскомментировать строку init() доступной в $scope.GetCustomer и комментарии init() доступны в главном контроллере для имитации этого вопроса.

Мой HTML разметка

<div> 
<div data-ng-controller="customerController"> 
    <div kendo-grid="customerGrid" k-options="customerGridOptions"></div> 
    <button id="submitCustomer" class="btn btn-primary" type="button" data-ng-click="GetCustomer()">Get Customer</button> 
</div> 

и мой контроллер код

var app = angular.module("app", [ 
"kendo.directives"]); 

app.controller("customerController", function ($scope) { 

//init(); // this works 

// I want the data to be bound to the grid on ng-click handler 
$scope.GetCustomer = function() { 
    init(); // this does not work 
} 

function init() { 
    var customerData = [{ 
     firstName: "Joe", 
     lastName: "Smith", 
     status: "Active" 
    }, { 
     firstName: "John", 
     lastName: "Smith", 
     status: "Active" 
    }, { 
     firstName: "Travis", 
     lastName: "Smith", 
     status: "Expired" 
    }]; 

    $scope.customerDataSource = new kendo.data.DataSource({ 
     data: customerData 
    }); 

    console.log('binding grid'); 

    $scope.customerGridOptions = { 
     dataSource: $scope.customerDataSource, 
     selectable: "row" 
    } 
    } 
}); 

Answer 1

Для того, чтобы работать, вы должны использовать атрибут k-rebind, который делает виджет сетки смотреть данную сферу свойство для изменений.

<div kendo-grid="customerGrid" 
    k-options="customerGridOptions" 
    k-rebind="customerGridOptions"></div> 

(обновлено demo)