CODEWITHSUNDEEP
javascriptjqueryangularjskendo-uikendo-grid
Vincent Dagpin
Vincent Dagpin

Reputation: 3611

Update Kendo Grid content after an ajax call

I am updating a kendo grid datasource content after an ajax call and this is my code

 $http
     .get("http://entengcdn.apphb.com/api/user")
     .success(function(r){
         $scope.optUser.dataSource.data = r;
     });

i also tried

$http
     .get("http://entengcdn.apphb.com/api/user")
     .success(function(r){
         $scope.$apply(function(){
             $scope.optUser.dataSource.data = r;
         });
     });

but still not functioning

i prepared a fiddle to see the example JSFiddle

any help would be appreciated.

TIA

Upvotes: 0

Views: 1746

Answers (1)

OnaBai
OnaBai

Reputation: 40887

Option 1:

The problem is that you are modifying the options of the grid in your success handler but options are not an ObservableObject, i.e. once initialized, they are not observed for changes. If you want to change your KendoUI grid object you need to use something like:

Add to your HTML definition kendo-grid="grid" so we can reference the Grid object from $scope:

<div kendo-grid="grid" kendo-grid k-options="optUser"></div>

Now, the Javascript is:

$http
    .get("http://entengcdn.apphb.com/api/user")
    .success(function(r){
        // Get reference to grid object
        $scope.grid.dataSource.data(r);
    });

Your JSFiddle modified here: http://jsfiddle.net/OnaBai/awkoLxrd/6/

Option 2:

The other possibility is delaying the creation of the Grid until you actually get the data. You can do it adding to the HTML k-ng-delay="optUser":

<div kendo-grid k-options="optUser" k-ng-delay="optUser"></div>

And now move the Grid options initialization inside the success event handler:

$http
    .get("http://entengcdn.apphb.com/api/user")
    .success(function(r){
        $scope.optUser = {
            dataSource: {
                data: r,
                ...
            },
            sortable: true,
            selectable: "single",
            ...
        };        
    });

Your JSFiddle modified here: http://jsfiddle.net/OnaBai/awkoLxrd/5/

Upvotes: 2

Related Questions