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

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