Question

我正在学习AngularJS并尝试在指令中使用Telerik KendoGrid。我有一个指令，它将访问服务并获取一些数据。部分数据将用于填充指令中的可观察数组。与该指令关联的html中有另一个指令，它将创建一个应该可编辑的kendoGrid。当我点击更新按钮时，我得到一个未定义的错误，网格数据消失。我按如下方式定义我的数组：

$scope.currentData.event.submissionDates = new kendo.data.ObservableArray([
        ]);

并且在调用成功时将数据推送到数组中。网格在html中调用如下：

<submission-grid class="grid-16" event="currentData.event" ng-show="currentData.event.eventID"></submission-grid>

该指令调用以下html文件：

<div kendo-grid="grid" 
 k-columns="gridColumns"
 k-selectable="true"
 k-on-change="selected = data"
 k-options ="mainGridOptions "
 k-editable ="{'mode': 'inline', 'update': 'true'}"

并且支持js是：

(function () {

angular.module('app.submissionGrid', [])

.directive('submissionGrid', function () {

    var ctrlr = function ($scope) {

        $scope.gridColumns = [{
                field: "SubmissionDueDate",
                title: "Due Date",
                format: "{0:MM/dd/yyyy}",
                width: "100px"
            }, {
                field: "Source",
                title: "Agency",
                width: "100px"
            }, {
                field: "SubmissionFiledDate",
                title: "Filed Date",
                format: "{0:MM/dd/yyyy}",
                width: "100px"
            }, {
                field: "SeverityCategory",
                title: "Severity Category",
                width: "100px"
            }, { command: ["edit", ], title: " ", width: "200px" }
        ];


        $scope.mainGridOptions = {
            dataSource: {
                data: $scope.event.submissionDates,
                schema: {
                    model: {
                        id: "ReportId",
                        fields: {
                            SubmissionDueDate: { type: "string" },
                            Source: { type: "string" },
                            SubmissionFiledDate: { type: "string" },
                            SeverityCategory: { type: "string" }
                        }
                    }
                },
            }
        }
    }
    return {
        restrict: 'E',
        templateUrl: 'App/Event/SubmissionGrid/submissionGrid.html',
        controller: ctrlr,
        transclude: false,
        scope: {
            event: '='
        }
    };
})

}）（）;

任何建议都将受到赞赏。

使用AngularJS和KendoGrid

0 个答案: