kendo-grid 中的数据在排序时消失答案

【问题标题】：data within kendo-grid disappears on sortkendo-grid 中的数据在排序时消失
【发布时间】：2016-04-26 18:16:21
【问题描述】：

在一个角度应用程序中，我有一个页面，该页面根据从 http 请求中检索到的数据显示几个 Kendo-grids。数据以 json 形式返回。

这是在成功检索数据时执行的函数。这是在控制器中，而 ctrl 是控制器范围内的“this”对象。 Moment 是一个用于管理日期的 JavaScript 库。它在这里做的唯一事情是将日期 (MM/DD/YYYY) 和时间 (hh:mm A) 格式化为字符串。

function (data) {
    ctrl.dateGroups = {};
    var currentDate = '';
    data.Data.forEach(function (item) {
        item.Date = item.StartDateTime ? moment(item.StartDateTime).format(HC_APP_CONFIG.dateFormat) : '';
        item.ClockInTime = item.StartDateTime ? moment(item.StartDateTime).format(HC_APP_CONFIG.timeFormat) : '';
        if ( angular.isEmpty(item.EndDateTime) ||
            item.EndDateTime === '' ||
            item.EndDateTime.format(HC_APP_CONFIG.dateFormat).match(HC_APP_CONFIG.badLocalDatePattern) !== null ){
            item.ClockOutTime = '';
            item.EndDateTime = '';
        } else {
            item.ClockOutTime = moment(item.EndDateTime).format(HC_APP_CONFIG.timeFormat);
        }
        var currentDate = 'd'+item.Date;
        if (ctrl.dateGroups.hasOwnProperty(currentDate) &&
            ctrl.dateGroups[currentDate].length > 0) {
            ctrl.dateGroups[currentDate].push(item);
        } else {
            ctrl.dateGroups[currentDate] = [item];
        }
    });
}

该函数（成功）获取每个返回的项目并将其作为以日期命名的数组的一部分放入一个对象中，例如，从 1 月 14 日开始的所有项目都以一个数组结尾，而 1 月 15 日则以另一个数组结尾，等等

这会显示在带有此循环的页面中：

<div class="col-sm-12" ng-repeat="(key,value) in punchList.dateGroups">
    <h2 class="punch-heading">{{key.substring(1)}}</h2>
    <div hc-grid id="grid-{{key}}"></div>
</div>

结果是一系列网格，每个网格对应一个日期并包含该日期的所有项目。这又是成功的。

网格配置：

gridConfig = {
    uiOptions: {},
    autoBind: false,
    sortable: {
        mode: 'single'
    },
    height: 'auto',
    columnMenu: false,
    filterable: false,
    dataSource: {
        type: 'json',
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true,
        pageSize: HC_APP_CONFIG.defaultPageSize,
        schema: {
            data: 'Data',
            total: 'TotalCount',
            model: {
                id: 'ShiftId',
                fields: {
                    EmployeeName: {
                        type: 'string'
                    },
                    EmployeeCode: {
                        type: 'string'
                    },
                    JobName: {
                        type: 'string'
                    },
                    ClockIn: {
                        type: 'string'
                    },
                    ClockOut: {
                        type: 'string'
                    }
                }
            }
        }
    },
    columns: [
        {
            field: 'EmployeeName',
            title: 'Name',
            sortable: false
        },
        {
            field: 'EmployeeCode',
            title: 'Employee Code',
            sortable: false
        },
        {
            field: 'JobName',
            title: 'Job',
            sortable: false
        },
        {
            field: 'ClockInTime',
            title: 'Clock In'
        },
        {
            field: 'ClockOutTime',
            title: 'Clock Out'
        }
    ]
}

问题是当我按时钟输入或时钟输出列（唯一可排序的列）排序时。此时，网格结构（分页指示器、列标题等）保持完好，但数据消失了。

我正在使用 Kendo UI v2015.1.429

【问题讨论】：

注意：就 DOM 行为而言，构成网格的正在从 DOM 中完全移除。
serverSort 参数是否期望对新源进行新的 API 调用？我在其他代码示例中看到可以为 Kendo UI 网格提供一个用于直接 API 调用的 url。我的直觉反应是，由于 serverSort 参数为真，Kendo 网格在排序时放弃了数据模型，并期望服务器提供一个新模型（而不是在本地排序）。
嘘，@Daniel Nalbach。将其发布为答案。我会把它标记为答案。谢谢！