kendo ui angularjs网格编辑

时间:2014-04-13 21:56:38

标签: angularjs kendo-ui angular-kendo

我正在为AngularJS和Kendo UI做POC,我需要知道如何在kendo网格上保存更新的数据。我启用了内联编辑,但无法挂钩到kendo UI以获取更新的数据。我创建了一个小提琴(http://jsfiddle.net/aMz7V/14/),但无法让jsfiddle工作(对不起,这是我第一次创建小提琴),所以我粘贴了下面的代码:

JavaScript(控制器代码):

var myApp = angular.module('myApp', ['kendo.directives']);

myApp.controller("gridCtrl", function($scope) {
    $scope.assignments = {};

    $scope.assignments.dataSource = new kendo.data.DataSource({
        data: [
            { StudentName: "John Smith", HomeWork: 9, HomeWork1: 12 },
            { StudentName: "Kodjo Adu", HomeWork: 5, HomeWork1: 15 },
            { StudentName: "Patrick smith", HomeWork: 10, HomeWork1: 19 },
            { StudentName: "Richard lomax", HomeWork: 8, HomeWork1: 18 },
            { StudentName: "Aglade Bone", HomeWork: 7, HomeWork1: 20 }
        ],
        schema: {
            model: {
                fields: {
                    StudentName: { type: "string" },
                    HomeWork: { type: "number" },
                    HomeWork1: { type: "number" },
                }
            }
        },
        pageSize: 3,
    });

    $scope.assignments.columns = [
        { field: 'StudentName', title: 'Student Name' },
        { field: 'HomeWork', title: 'Home Work / 10' },
        { field: 'HomeWork1', title: 'Home Work / 20' }
    ];
});

HTML:

<div ng:app="myApp">
    <div ng-controller='gridCtrl'>
        <div kendo-grid k-data-source="assignments.dataSource" k-selectable="'row'"
         k-pageable='{ "refresh": true, "pageSizes": true }'
         k-columns='{{assignments.columns}}' k-sortable="true" k-editable="true" k-toolbar="['save','cancel']"></div>
    </div>
</div>

1 个答案:

答案 0 :(得分:2)

所以我想通了,处理我需要做的保存更改事件

k-on-save-changes="saveChanges(kendoEvent)"

只需将saveChanges函数添加到控制器中的$ scope。