$ scope.gridOptions获取新数据后如何刷新kendo网格

时间:2017-11-17 17:30:23

标签: angularjs kendo-grid

我是剑道网格的新手 我已将数据分配给服务呼叫内的kendo网格 我在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被修改 每当服务调用命中时,我如何刷新重新加载kendo网格。

1 个答案:

答案 0 :(得分:0)

您可以为kendo-grid属性分配一个变量,然后您可以使用该属性调用正常的剑道功能。例如:

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

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

$scope.mygrid.refresh();

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