6

I'm attempting to follow several suggestions on refreshing a kendo-grid such as this.

The essential is that in the html I have:

<div kendo-grid="vm.webapiGrid" options="vm.mainGridOptions">

Then in the controller I have:

vm.webapiGrid.refresh();

Note: I'm using the ControllerAs syntax so I am using "vm" rather than $scope.

My problem is that "vm.webapiGrid" is undefined. This seems so straightforward, but I'm not sure why it is undefined.

Community
  • 1
  • 1
Michael Witt
  • 1,582
  • 4
  • 22
  • 43

3 Answers3

11

Found the answer. One other method of refreshing the datasource I read about was to do something like:

vm.mainGridOptions.datasource.transport.read();

This wasn't working for me as "read" was undefined. Looking at my datasource definition, I saw the reason, read needs a parameter (in this case "e"):

    vm.mainGridOptions = {
        dataSource: {
            transport: {
                read: function (e) {
                    task.getAllTasks(vm.appContext.current.contextSetting).
                        then(function (data) {
                            e.success(data);
                        });
                },
            }
        },

To solve, I saved "e" in my scope and then reused it when I wanted to refresh:

    vm.mainGridOptions = {
        dataSource: {
            transport: {
                read: function (e) {
                    task.getAllTasks(vm.appContext.current.contextSetting).
                        then(function (data) {
                            e.success(data);
                            vm.optionCallback = e;
                        });
                },
            }
        },

and then:

if (vm.optionCallback !== undefined) {
   vm.mainGridOptions.dataSource.transport.read(vm.optionCallback);
}

Problem solved (I hope).

Michael Witt
  • 1,582
  • 4
  • 22
  • 43
3

it's because you are using the options object to trigger the read, you should use the grid reference instead:

<div kendo-grid="vm.webapiGrid" options="vm.mainGridOptions">

as in:

$scope.vm.webapiGrid.dataSource.transport.read();

hope that helps.

Chad
  • 83
  • 6
-3

Add id to the grid and trying refreshing using it.

<div kendo-grid="vm.webapiGrid" options="vm.mainGridOptions" id="grid1">

In controller use this:

$("#grid1").data('kendoGrid').refresh();

Andrea
  • 175
  • 6
  • That starts to get me there (although I'd probably get my fingers chopped off for using a jquery selector). Problem is that the refresh function is expecting an event. If I evaluate, I see: function (e) { var that = this, length,..... – Michael Witt Feb 04 '15 at 18:29
  • http://stackoverflow.com/questions/18399805/reloading-refreshing-kendo-grid This asnwer also will help – Kayvan Karim Jun 10 '15 at 12:46
  • 4
    This tastes more like JQuery. It is a bad practice to use JQuery in an Angular application. So, instead of #grid1 it should be "scope" or "this" – snowYetis Apr 21 '16 at 20:42