Question

我正在使用angularjs中的kendo网格。我的网格在页面加载时正常加载。但是，当我尝试使用更新的搜索条件点击搜索按钮时，它不会刷新网格并显示更新的网格。

这是我的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);
            }
        });

点击我的btn点击

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

数据在页面加载时加载正常。即使我更新我的标准，也要调用$ scope.mainGridOptions.dataSource.read（）;它会带来更新的数据，但不会显示在网格上。我尝试过使用$ scope.grid.refresh（）但是angular不能识别它。

如果有人能解决这个问题，我将非常感激。

Answer 1

你应该告诉kendo网格重装自己

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

和

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

或尝试

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

在angularjs中单击按钮时无法刷新kendo网格

1 个答案: