data within kendo-grid disappears on sort

Question

In an angular app I have a page that displays several Kendo-grids based on the data retrieved from an http request. The data comes back as json.

This is the function that executes on successful data retrieval. This is within a controller, and ctrl is the "this" object on the controller scope. Moment is a JavaScript library for managing dates. The only thing it's doing here is formatting as strings the date (MM/DD/YYYY) and the time (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];
        }
    });
}

The function (successfully) takes each returned item and puts it into an object as part of arrays named after the date, so that all items from Jan 14th, for example, end up in one array, and another for Jan 15th, etc.

This displays in the page with this loop:

<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>

The result is a series of grids, each corresponding to a date and containing all the items for that date. This again, is successful.

The grid configuration:

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

The problem is when I sort by the Clock In or Clock Out columns (the only sortable columns). At this point, the grid structure (pagination indicator, column heads, etc) remain in tact but the data disappears.

I'm using Kendo UI v2015.1.429

Answer 1

Kendo UI grids support direct server interaction via a built-in AJAX system for making API calls. It appears that setting serverSort:true may tell the Kendo UI grid to drop the current data model and query the server for newly sorted data (which it expects the server to provide). Since you are not using direct server interaction with the grid, it probably drops the model but then has no way to get a new one.

There is a sortable:true option that may be what you need for client side sorting of the existing data.

Link to Kendo UI grid server-side sorting article