Kendo Grid datasource never updating

Question

Kendo Grid is new to me, so I apologize for the ignorance. I'm writing an angular app that uses a separate service to update a local array. It is store in $scope.searchResults variable. I've initialized the grid using the dataSource ->transport property in the hopes that when the array mentioned above is updated, so too will the datasource and the grid updated accordingly. This is not the case. The array is updated, without any problems, but the datasource is never updated. I'll do my best to paste all the code snippets, and console output below.

Html:

<div class="margin-top-25" ng-show="searchResults">
    <div id="report-grid" kendo-grid="grid" options="mainGridOptions"></div>
</div>

DataSource proper of the Grid configuration:

dataSource: {
                transport: {
                    read: function read(options) {
                        options.success($scope.searchResults);
                    }
                },
                schema: {
                    model: {
                        id: "id",
                        fields: {
                            name: {type: "string"},
                            dataSource: {type: "string"}
                        }
                    }
                },
                pageSize: 10
            }

Function for updating the datasource:

function runSearch() {
        RetrieveReportsService.query({name: vm.searchData.name, dataSource: vm.searchData.dataSource},
            function success(result) {
                $log.log($scope.grid.dataSource);

                $log.log($scope.searchResults);
                $scope.searchResults = result.elements;
                $log.log($scope.searchResults);

                $scope.grid.dataSource.read();
                $log.log($scope.grid.dataSource);
            });
    }

Now console output:

First time logging the data source:

O…e.e…d.init {options: Object, _map: Object, _prefetch: Object, _data: ObservableArray.extend.init[2], _pristineData: Array[2]…}

First time logging $scope.searchResults:

[Object, Object]

Second time logging $scope.searchResults:

[Object]

Second time logging the data source:

O…e.e…d.init {options: Object, _map: Object, _prefetch: Object, _data: ObservableArray.extend.init[2], _pristineData: Array[2]…}

Note that each data source has an observable array length of 2, before and after the $scope.searchResults has been updated.

I can drill down into the output if it is needed, but didn't want this post to get overwhelming.

Thanks!

hally9k hally9k · Accepted Answer · 2015-10-07T18:52:36

Because you are referencing your data that is declared inside your options object by pointing k–options at your options object when the grid initially binds to the options object it's not populated with the data yet. If you reference your data source object separately using k-data-source it will bind to your data source and update your grid when the data source changes. If you want to make changes to your options object trigger a rerender you need to use k–rebind or alternatively the setOptions method. Be sure to read the docs for the latter as there are some caveats.

Kendo Grid datasource never updating

2 Answers