Update Kendo Grid content after an ajax call

Question

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

Have you tried this link: docs.telerik.com/kendo-ui/AngularJS/… ? — Jarosław Kończak
Yeah but my scenario is different because all object must be loaded once in ng-init from angular — Vincent Dagpin

OnaBai OnaBai · Accepted Answer · 2014-11-24T06:32:04

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/

Update Kendo Grid content after an ajax call

1 Answers