Cannot refresh kendo grid on button click in angularjs

Published

I am working with kendo grid in angularjs. My grid is loading fine on page load. however, when I try to hit the search button with updated search criteria, it doesn’t refresh the grid and show the updated grid.

Here is my html:

    <div  kendo-grid="grid" k-toolbar="toolbarTemplate" k-options="mainGridOptions"</div>

In my controller Im doing this:



 $scope.mainGridOptions = {

            dataSource:    $scope.dataSource,
        //    enableRowSelection: true,

            sortable: true,
            pageable: true,
            autoSync: true,
            //height: 550,
            filterable: {
                extra: false,
                operators: {
                    string: {
                        startswith: "Starts with",
                        eq: "Is equal to",
                        neq: "Is not equal to"
                    }
                }
            },
            resizable: false,

            columns: [
                {
                    field: "refnum",
                    title: "Refnum",
                    width: "120px",
                    hidden:true
                },
                {
                field: "Agentid",
                title: "Agent ID",
                width: "120px"
            }, {
                field: "Agentid",
                title: "Agent Name",
                width: "120px"
            }, {
                field: "BAN",
                title: "BAN",
                width: "120px"
            }, {
                field: "Amount",
                title: "Amount",
                width: "120px"
            },
            {
                field: "status",
                title: "Status",
                width: "120px"
            },
            {
                field: "orderdate",
                title: "Submission Date",
                width: "120px",
                format: "{0:yyyy-MM-dd}",
                filterable: {
                    ui: function (element) {
                        element.kendoDatePicker({
                            format: "MM-dd-yyyy",

                        });

                    }
                }
            },
             {
                 field: "Comments",
                 title: "Comments",
                 width: "120px"
             },
            {
                command: { text: " ", template: "<button class="k-button" id="app"  ng-click="approve( this.dataItem,'Approved')">Approve</button> <button class="k-button" ng-click="goToSite(site)">Decline</button>" }, title: "Mark Status", width: "150px"
            },

            ]
        };

$scope.dataSource = new kendo.data.DataSource({

            transport: {

                read: {
                    type: "POST",
                    url: "/API/Tracker/GetSearchedData",
                    dataType: "json",
                },



                parameterMap: function (options, operation) {

                    //  if (operation == "read") {

                    if ($scope.agentid.AgentID != "" && !angular.isUndefined($scope.agentid.AgentID)) {

                        $scope.agentid_ = $scope.agentid.AgentID;
                    }
                    else {
                        $scope.agentid_ = "All";

                    }
                    var searchCriteria = {

                        status: $scope.status,
                        agentid: $scope.agentid_,

                        startdate: moment($scope.date.startDate).isValid() ? moment($scope.date.startDate).format('YYYY-MM-DD') : "",
                        enddate: moment($scope.date.endDate).isValid() ? moment($scope.date.endDate).format('YYYY-MM-DD') : "",
                        employeeid:  localStorage.getItem('EmployeeID')

                    }

                    return searchCriteria;
                }


            },

            batch: false,
            pageSize: 10,
            schema: {
                errors: "error",
                data: function (response) {
                    debugger;
                    console.log(response);
                    console.log(response.data);
                  //  $scope.mainGridOptions.dataSource = response;
                    return response;
                }
            },


            error: function (xhr, error) {


                console.log(xhr);
                console.log(error);
            }
        });

Calling this from my btn click

  $scope.GetRecords = function () {
            $scope.mainGridOptions.dataSource.read();
};

The data loads fine on pageload. Even when I update my criteria, and call $scope.mainGridOptions.dataSource.read(); it brings the updated data but doesn’t show on the grid. I have tried using $scope.grid.refresh() but angular doesn’t recognizes it.

I will be really grateful if somebody could resolve this.

Source: AngularJS

Published
Categorized as kendo-grid, refresh Tagged

Answers

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq