$scope.gridOptions 获取新数据后如何刷新剑道网格答案

【问题标题】：how to refresh the kendo grid once $scope.gridOptions get new data$scope.gridOptions 获取新数据后如何刷新剑道网格
【发布时间】：2017-11-17 17:30:23
【问题描述】：

我是剑道网格的新手我已在服务调用中将数据分配给剑道网格我在 html 表单中有搜索字段，每当键入数字并按下搜索服务时，新数据将绑定到 $scope.gridOptions.dataSource.data 但在视图屏幕中未显示新数据。

                'use strict';
            angular
                .module('app.core')
                .controller('CheckController', function($scope,PageValues,eventService,$filter,$timeout) {

                var vm = this;
                PageValues.title = "Check";
                PageValues.description = "Check";


                $scope.checkStatus = function(){


                    if($scope.phone_number != ''){
                        var chkPostRequest = {
                            "checkContacts": [
                                {

                                    "Date": '2011=02-01',
                                    "Type": "test"
                                    "Category": 'test'
                                }
                            ]
                        };
                        eventService.checkStatusSer(chkPostRequest).then(function(response){
                                if(angular.lowercase(response.transactionStatus) == "success"){
                                $scope.gridOptions = {};
                                    response.checkContactResponses.forEach(function(contStatus, key) {
                                        $scope.chkStsRes.checkContactResponses[key] = {
                                            "PhoneNumber" : contStatus.contactDetail.contact,
                                            "phoneType" : contStatus.phoneType
                                        };
                                    });
                                    $scope.gridOptions = {
                                        dataSource: {
                                           data: $scope.chkStsRes.checkContactResponses,
                                            schema: {
                                                model: {
                                                    fields: {
                                                        PhoneNumber: { type: "string" } ,
                                                        PhoneNumberType: { type: "string" },
                                                    }
                                                }
                                            },
                                            pageSize: 10
                                        },

                                        scrollable: true,
                                        sortable: true,
                                        columns: [
                                            { field: "PhoneNumber", title: "Phone Number",  width: "130px",cellFilter: 'phonemask'},
                                            { field: "PhoneNumberType", title: "Phone Number Type", width: "80px" },
                                        ]
                                    };
                                   $scope.mygrid.refresh();
                                }
                        });
                    }
                }
                });

HTML 代码

<input required id="phone_number" ng-model="phone_number" class="k-textbox" style="width: 100%;" value=""/>
<button class="btn" ng-click="checkStatus()" type="button" ><span>Check Status</span></button>
<kendo-grid options="gridOptions" id="searchGrid"></kendo-grid>

响应 json

        {            
          "transactionStatus": "SUCCESS",
          "checkContactResponses": [
            {
              "phoneType": "Mobile",
              "contactDetail": {
                "contact": "3341234567"
              }
            },
            {
              "phoneType": "Landline",
              "contactDetail": {
                "contact": "3346543210"
              }
            }
          ]
        }

每当我单击按钮时，响应 json 都会被修改每当服务调用命中时，我如何刷新重新加载剑道网格。

【问题讨论】：

标签： angularjs kendo-grid

【解决方案1】：

您将一个变量分配给kendo-grid 属性，然后您可以使用它来调用普通的剑道功能。例如：

<div kendo-grid="mygrid" options="gridOptions" id="searchGrid"></div>

现在，在您的控制器中，您可以像这样刷新网格：

$scope.mygrid.refresh();

这是一个简单的小提琴：https://plnkr.co/edit/JX0S08cfKDERMwkLaKPs

【讨论】：

我遇到了这个问题：“无法读取未定义的属性‘刷新’”
那么您没有正确地将kendo-grid 绑定到变量。你在右边叫它$scope？您是否尝试复制小提琴正在做的事情？
我的html现在才这样
那么你可能使用了错误的$scope。显示更多你的控制器、服务和模板代码，它会更容易帮助你。
我添加了完整的控制器，没有html和json，请看上面问题的变化。