Kendo UI Grid + AngularJS: problems with $scope variable as Datasource

Question

i've tried several tips and tricks from nearly any thread regarding my problem - i can't get it done.

i want to replace a trNgGrid with the Kendo UI Grid. trNgGrid seems to work a bit different. it gets it's data from a $scope variable that i called $scope.items. the grid calls a function whenever it needs to refresh the data (filter, paging, sorting events...). inside that function i call my sharepoint service to get the items and after that overwrite the $scope.items with new data from the sharepoint list.

var getItemsFromSPService = function () {
    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {
        SPService.loadItems($scope.gridParams).then(function (result) {
            $scope.items = result.items;
        });
    });
};

the grid refreshes. sadly, there is no rest/soap webservice i could consume - i use standard sharepoint client context methods to get the data. because of that sharepoint SP.SOD.stuff, i also haven't found a solution to return items from my function. i'm just able to populate a variable with data or call another function and send that data to it. that's all async of course.

i tried to set $scope.items as datasource in the Kendo UI Grid directive - it does not refresh when the variable gets updated. i tried $scope.grid.refresh - nothing. i tried observable arrays from Kendo - no luck.

i think there might be a way using the grid options:

dataSource: {
        serverFiltering: true,
        transport: {
        read: function(options) {
            options.success(....

but i can't figure that out.

so i can refresh the $scope.items with new data or my function can call any other function and include the data as parameter - the grid needs to refresh, too. how can i tell it "hey, the $scope.items got updated - show it!"?
i need support for IE8
i need server side sorting, filtering, paging - grid needs to trigger events so that my function can refresh the data

is there any solution for that? it's crazy, that something so "trivial" seems to be so tricky :O

thank you very much!

robBerto robBerto · Accepted Answer · 2015-04-29T22:20:27

In my app, when I want refresh a grid i use

$scope.gridName.dataSource.read();

But you need implementing your logic in function read. Like you show in your example.

For instance, the function that create grid could be something like this

$scope.createGrid = function () {
   $scope.kendoGridOpMantOptions = {
      dataSource: {
         schema: {  
            // your schema...
         },
         transport: {
             read: function (e) {
                  // call to service that return data
             }
         }
      }
      // More grid configuration
   }
}

If you have defined a function to read data in grid you can refresh your grid with $scope.gridName.dataSource.read();

With regard to IE8, I am not sure. I am reading a lot of problems with IE about this issue.

Good luck!

Kendo UI Grid + AngularJS: problems with $scope variable as Datasource

1 Answers