Cannot refresh kendo grid on button click in angularjs

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