Javascript 对列进行分组时，网格数据将消失

我使用剑道网格来显示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>

---

我有一个类似的问题，分组的功能与您描述的完全相同。我用的是KendoUI和AngularJS，看起来你是。我可以通过从旧的商业版本升级到telerik.kendoui.professional.2014.3.1119.commercial来解决这个问题。看起来这一定是剑道的一个bug，但我还没有在他们的文档中找到任何关于它的明确信息。我花了几个小时或工作来找出我做错了什么

====== 为将来遇到此问题的任何人更新： 当与angular一起使用时，这是KendoUI中DataSource的一个bug。

---

非常感谢！我已经放弃了这一点，并禁用了分组。升级可能会给我们带来其他问题，但在试图解决这些问题时，我们偶然发现了一些文档，证实这是DataSource的一个错误。

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' }
                ];