Question

我使用Kendo网格在AngularJS指令中显示内联可编辑的事件列表。数据正在按预期加载和显示，一切似乎都正常工作。我可以对数据进行排序，编辑，更新和删除，这一切都很完美。

当我尝试按任何列进行分组时，数据会消失。分组标题正确显示正确的数据，但所有行都显示为完全空。编辑和删除按钮适用于应具有数据的每一行。我可以点击删除，它将删除一个空行。如果单击编辑按钮，则会显示文本框，其中包含从我的服务加载的正确数据。如果我更新数据并单击更新，它将返回不可见状态。

任何人都可以看到我做错了吗？

这是special-events.directive.js：

(function() {
    'use strict';

    angular
        .module('app')
        .directive('specialEvents', [specialEvents]);

    function specialEvents () {
        var directive = {
            restrict: 'EA',
            link: link,
            templateUrl: 'app/components/special-events/special-events.html',
            controller: SpecialEventsCtrl,
            controllerAs: 'specialEventsVM',
            scope: {
                source: '='
            }
        };
        return directive;

        function link(scope, element, attrs) {

        }
        /* directive controller */
        function SpecialEventsCtrl($scope, $http){
            var vm = this;
            var id = 0;

            vm.source = new kendo.data.DataSource({
                transport: {
                    read: function(options) {
                        $http.get('http://localhost:8181/ping').then(function(response) {
                            id = response.data.length;
                            vm.gridData = response.data;
                            options.success(response.data);
                        });
                    },
                    update: function(options) {
                        options.success(options.data.models[0]);
                        console.log(options.data.models[0]);
                    },
                    destroy: function(options) {
                        options.success(options.data.models[0]);
                        console.log('Row #' + options.data.models[0].id + ' deleted');
                    },
                    create: function(options) {
                        id++;
                        options.data.models[0].id = id;
                        options.success(options.data.models[0]);
                        console.log('Added ' + options.data.models[0] + ' with an id of ' + options.data.models[0].id);
                    }
                },
                batch: true,
                pageSize: 10,
                schema: {
                    model: {
                        id: 'id',
                        fields: {
                            id: {editable: false, type: 'number'},
                            eventName: { type: 'string' },
                            description: { type: 'string' },
                            dates: { type: 'string' },
                        }
                    }
                }
            });
        }
    }
})();

这里是special-events.html

<div id="grid" kendo-grid
    k-data-source="specialEventsVM.source"
    k-height="350"
    k-groupable="true"
    k-sortable="true"
    k-pageable="{
        refresh: true,
        pageSizes: true,
        buttonCount: 5 
        }"
    k-columns="[{
            field: 'eventName',
            title: 'Event Name',
            width: 200
        }, {
            field: 'description',
            title: 'Description'
        }, {
            field: 'dates',
            title: 'Dates'
        }, {
            command: ['edit', 'destroy']
        }]"
    k-editable="{'mode': 'inline', 'create': true, 'update': true, 'destroy': true}"
    k-toolbar="['create']"
></div>

这是数据：

var data =  
                [
                    {id: 1, eventName: 'Wedding', description: 'people getting married', dates: '11/02/2014 - 11/03/2015' },
                    {id: 2, eventName: 'Wedding', description: 'people getting married', dates: '11/02/2014 - 11/03/2015' },
                    {id: 3, eventName: 'Wedding', description: 'people getting married', dates: '11/02/2014 - 11/03/2015' },
                    {id: 4, eventName: 'Wedding', description: 'people getting married', dates: '11/02/2014 - 11/03/2015' },
                    {id: 5, eventName: 'Wedding', description: 'people getting married', dates: '11/02/2014 - 11/03/2015' },
                    {id: 6, eventName: 'Wedding', description: 'people getting married', dates: '11/02/2014 - 11/03/2015' },
                    {id: 7, eventName: 'Wedding', description: 'people getting married', dates: '11/02/2014 - 11/03/2015' },
                    {id: 8, eventName: 'Wedding', description: 'people getting married', dates: '11/02/2014 - 11/03/2015' },
                    {id: 9, eventName: 'Wedding', description: 'people getting married', dates: '11/02/2014 - 11/03/2015' },
                    {id: 10, eventName: 'Wedding', description: 'people getting married', dates: '11/02/2014 - 11/03/2015' },
                    {id: 11, eventName: 'Wedding', description: 'people getting married', dates: '11/02/2014 - 11/03/2015' },
                    {id: 12, eventName: 'Wedding', description: 'people getting married', dates: '11/02/2014 - 11/03/2015' },
                    {id: 13, eventName: 'Wedding', description: 'people getting married', dates: '11/02/2014 - 11/03/2015' },
                    {id: 14, eventName: 'Wedding', description: 'people getting married', dates: '11/02/2014 - 11/03/2015' },
                    {id: 15, eventName: 'Wedding', description: 'people getting married', dates: '11/02/2014 - 11/03/2015' },
                    {id: 16, eventName: 'Wedding', description: 'people getting married', dates: '11/02/2014 - 11/03/2015' }
                ];

Answer 1

我遇到了类似的问题，其中分组功能与您描述的完全相同。我正在使用KendoUI和AngularJS一样。我只需从较旧的商业版本升级到telerik.kendoui.professional.2014.3.1119.com commercial即可解决问题。看起来这肯定是剑道的一个错误，但我无法在他们的文档中找到任何关于它的确定性。我花了几个小时或者试图弄清楚我做错了什么。

====== 未来遇到此问题的任何人的更新：与角度一起使用时，这是KendoUI中DataSource的错误。 http://www.telerik.com/support/whats-new/kendo-ui/release-history/q2-2014-sp1

列分组时，网格数据会消失

1 个答案: