2

I have a Kendo UI Grid with angular js: I have data in the grid and when I click a button, I want to reload the data in the grid with newly updated data.

So, in the angular controller I have:

var dataSource = new kendo.data.DataSource({
    transport: {
                read: function (e) {
                    cache: false;
                    e.success($scope.gridData);
                }
    },
    aggregate: [
                { field: "TOTAL", aggregate: "sum" }         
            ],
            pageSize: 14,
            schema:    {
                model: {
                    id: "id",
                    fields: {
                        name: { editable: false, nullable: true },
                        TOTAL: { editable: false, nullable: true }
                    }
                }
   },
});

When I click the button, the below code I have:

$scope.CalculateData = function (e) {
            service.Data($scope.gridData)
                    .then(function (response) {
                        if (response.statusText == "OK") {
                            $scope.gridData = [];
                            $scope.gridData = response.data;
                            dataSource.read();
                        }
                    },
                        function (response) {
                            alert("Error");
                        }
                    );
        }

Even I am calling dataSource.read(); still, the grid data is not reloading with new data.

How can I resolve this problem?

Biswaranjan Pradhan
  • 73
  • 6

1 Answers1

0

You are invoking the method wrongly. It should be dataSource.transport.read();

var dataSource = new kendo.data.DataSource({
    transport: {
                read: function (e) {
                    cache: false;
                    service.Data($scope.gridData)
                    .then(function (response) {
                        if (response.statusText == "OK") {
                            $scope.gridData = [];
                            $scope.gridData = response.data;
                            e.success($scope.gridData);
                            $scope.callback= e;
                        }
                }
    },
    aggregate: [
                { field: "TOTAL", aggregate: "sum" }         
            ],
            pageSize: 14,
            schema:    {
                model: {
                    id: "id",
                    fields: {
                        name: { editable: false, nullable: true },
                        TOTAL: { editable: false, nullable: true }
                    }
                }
   },
});

Whenever the callback becomes undefined call your read function with this as parameter to refresh the data

  $scope.CalculateData = function(e) {
            if ($scope.callback !== undefined) {
                $scope.mainGridOptions.dataSource.transport.read($scope.callback);
            }
        }
Vivz
  • 6,625
  • 2
  • 17
  • 33
  • After adding dataSource.transport.read(); i am getting below error : TypeError: Cannot read property 'success' of undefined – Biswaranjan Pradhan Jun 24 '17 at 14:16
  • Remove if condition and check – Vivz Jun 25 '17 at 07:52
  • do i have to call the service service.Data inside transport.read aswell? – Biswaranjan Pradhan Jun 25 '17 at 07:52
  • Check this https://stackoverflow.com/questions/28324908/how-to-call-refresh-on-a-kendo-grid-from-an-angular-controller. Try to implement in a similar way. – Vivz Jun 25 '17 at 07:53
  • What is your calculateData() function doing ? And what is $scope .gridData that you are sending to the service in this line service.Data($scope.gridData) conatain ? – Vivz Jun 25 '17 at 07:55
  • calculateData() just sending edited rows to DB and doing some calculation and giving the result set that I need to load to kendo grid. $scope .gridData contains all the grid data that I have in the grid. Still no luck with the approach that you mentioned above. Is it something to do with the filter , because before clicking on the button I filtered the data. after did the above code change it is hitting to kendo.data.DataSource read method but nothing happening in the grid. – Biswaranjan Pradhan Jun 25 '17 at 09:10
  • Can you try using the set data source method like this var dataSource = new kendo.data.DataSource({ data: "your object returned by ajax" }); $('#GridKatildigiKurslar').data('kendoGrid').setDataSource(dataSource); – Vivz Jun 25 '17 at 09:36
  • by trying the above solution it works but I am seeing another issue with this approach...the aggregate method in the calculated field is not showing the sum values.Still showing as 0. – Biswaranjan Pradhan Jun 25 '17 at 09:48
  • Is TOTAL type number or date? Can u debug aggregates by dataSource.fetch(function(){ var results = dataSource.aggregates().TOTAL ; console.log(results.sum); }); ? – Vivz Jun 25 '17 at 10:26
  • Yeah..it is working fine now but is there no other way do load the data ..seems like so much redundant code... two places i have kendo data source... – Biswaranjan Pradhan Jun 25 '17 at 10:28
  • I think you can remove the service call from your function. The data will get updated in the read method every time you invoke it – Vivz Jun 25 '17 at 10:31
  • That's the problem I am facing ..without the service call the data is not loading every time by read method. – Biswaranjan Pradhan Jun 25 '17 at 10:45
  • Try creating a plunker. There are too many fixes in your code. Withou knowing the flow of code, I can't help you with all the bugs. – Vivz Jun 25 '17 at 10:48
  • https://codepen.io/ranjan9/pen/mwBrLX?editors=0010 here the sample code of mine... – Biswaranjan Pradhan Jun 25 '17 at 11:20
  • yeah, because the api is not setup..i just want you to see the code flow and help me if i am missing anything to fix this... – Biswaranjan Pradhan Jun 25 '17 at 11:35
  • You have to do it the way I have mentioned in my answer by defining a callback. Otherwise the e parameter inside your function call will be undefined. – Vivz Jun 25 '17 at 13:55