CODEWITHSUNDEEP
javascriptangularjskendo-uikendo-grid
Dennis R
Dennis R

Reputation: 3237

Bind Kendo grid in Angular on button's ng-click

I'm trying to display Kendo grid in angular upon button click. The GetCustomer function for ng-click is within customerController. If the code to display the grid init() function is called from the main controller then it displays data but not on button click.

The var in the $scope holds data but somehow the grid in the html markup is not re-drawn when called from event handlers. It's only displayed during the initial request of the html page. Do I need to wire up a promise or something?

I don't get any error in console but the grid is not re-drawn with data on button click. Any help would be appreciated.

JSFiddle link.

You can uncomment the line init() available within $scope.GetCustomer and comment the init() available within the main controller to simulate the issue.

My html markup

<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>

and my controller code

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

Upvotes: 0

Views: 2957

Answers (1)

Lars H&#246;ppner
Lars H&#246;ppner

Reputation: 18402

For that to work, you need to use the k-rebind attribute which makes the grid widget watch the given scope property for changes.

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

(updated demo)

Upvotes: 2

Related Questions