KO Grid - repeating value

Question

I have an ASP.Net MVC site with a KOGrid in one of my views. This pulls data by making an Ajax call to a controller which then selects from SQL Server via EF. My data table can be seen below:

I have the following column definition for my KO Grid:

self.columnDefs = [
        { width: 50, field: 'workflowTask_WorkflowTaskId', displayName: 'Id' },
        { width: 150, field: 'Timestamp', displayName: 'Timestamp', cellFilter: function (data) { return moment(data).format('DD/MM/YYYY h:mm a') } },
        { width: 100, field: 'currentState', displayName: 'Crnt State' },
        { width: 500, field: 'note', displayName: 'Notes' },
        { width: 100, field: 'previousState', displayName: 'Prev State' },
        { width: 100, field: 'currentUser', displayName: 'Crnt User', sortable: false },
        { width: 100, field: 'amendedByUser', displayName: 'Amnd By', sortable: false },
        { width: 100, field: 'previousUser', displayName: 'Prev User', sortable: false }
    ];

I have the following grid options:

self.gridOptions = {
        data: self.recs,
        columnDefs: self.columnDefs,
        autogenerateColumns: false,
        showGroupPanel: true,
        canSelectRows: false,
        showFilter: true,
        filterOptions: self.filterOptions,
        enablePaging: true,
        pagingOptions: self.pagingOptions,
        sortInfo: self.sortInfo,
        rowHeight: 35
    };

I have an observable array to hold the data to be displayed in the kogrid:

self.recs = ko.observableArray([]);

This is populated by the following javascript function:

self.get = function () {
        $loadingIndicator.show();

        $.ajax({
            url: BASE_URL + 'TaskHistory/GetRecords',
            type: 'get',
            data: {
                'page': self.pagingOptions.currentPage(),
                'pageSize': self.pagingOptions.pageSize(),
                'filter': self.filterOptions.filterText == undefined ? '' : self.filterOptions.filterText(),
                'sort': self.sortInfo().column.field + ' ' + self.sortInfo().direction
            },
            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                self.pagingOptions.totalServerItems(data.RecCount);

                var recsArray = [];
                $.each(data.PageOfRecords, function (key, value) {
                    recsArray.push(
                    new Task(value.WorkflowTaskHistoryId,
                                value.Timestamp,
                                value.PreviousState,
                                value.CurrentState,
                                value.AmendedByUser,
                                value.Note,
                                value.PreviousUser,
                                value.CurrentUser,
                                value.WorkflowTask_WorkflowTaskId));
                });
                self.recs(recsArray);
            }
        });
        $loadingIndicator.hide();
    };

As can be seen in the following screen grab from Chrome Developer tools, this observable is correctly populated:

My problem is - when displayed, the date shown are all for the current machine datetime - not related to the data retrieved from the ajax call, as shown below:

Can anyone see where I went wrong please?

Answer 1

You have a typo in your code, in your column def you have 'Timestamp' with a capital T but your property is called timestamp .

So the fix is very simple:

{ width: 150, field: 'timestamp', displayName: 'Timestamp', cellFilter: function (data) { return moment(data).format('DD/MM/YYYY h:mm a') } },

Why the strange behavior:

• the KoGrid does not check that you provide a valid field name and in this case it passes undefined to the cellFilter function as the data parameter
• if you call moment function without a valid date it defaults to the current time, that is why all your columns show the same time