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

Answer 1

Option 1:

The problem is that you are modifying the options of the grid in your success handler but options are not an ObservableObject , ie 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/