Sorting Dates on knockout binded grid

[jrParticipant]

Hey there, I have a grid that I am binding with knockout and a date column that I’m receiving from the server as a string so that it doesn’t get any timezone adjustment. Anyways I have a cell renderer for that column that builds the string date as a JavaScript date and added some surrounding HTML. Since I am binding this grid with knockout and don’t get to set the datasource so that I can set the datafields type property as date, the grid is sorting the column as a string.

This is my grids definition:

<div class="gridClass" data-bind="jqxGrid: {
                                                            source: VoyageItineraryList,
                                                            editable: false,
                                                            sortable: true,
                                                            selectionmode: 'singlerow',
                                                            theme: 'bootstrap',
                                                            columnsresize: true,
                                                            width: '99%',
                                                            height: 760,
                                                            enabletooltips: true,
                                                            columns: [
                                                                { text: 'Date', dataField: 'CallDateFormatted', width: '25%', cellsformat: 'dd-MMM-yyyy', cellsrenderer: cellsrendererTurnCallWithDate },
                                                                { text: 'Day', dataField: 'ArrivalDayOfWeek', cellsrenderer: cellsrendererTurnCall },
                                                                { text: 'Ship', dataField: 'ShipCode', width: 25, cellsrenderer: cellsrendererTurnCall },
                                                                //{ text: 'Turn', dataField: 'TurnIndicator', columntype: 'checkbox' },
                                                                { text: 'FY', dataField: 'AccountingMonth', width: '15%', cellsrenderer: cellsrendererTurnCall },
                                                                { text: 'Port', dataField: 'PortName', width: '45%', cellsrenderer: cellsrendererTurnCall }
                                                            ]
                                                        }"
                            id="jqxgridItineraries">

This is my cellrenderer:

 var cellsrendererTurnCallWithDate = function (row, columnfield, value, defaulthtml, columnproperties) {
            var isTurnCall = this.owner.source.records[row]['TurnIndicator'];

            var year = value.substring(7, 12);
            var monthname = value.substring(3, 6);
            var monthnumber = month_names.indexOf(monthname);
            var day = value.substring(0, 2);

            var JSdate = new Date(year, monthnumber, day);

            if (isTurnCall) {
                return '<span class="turnCallWarning" style="margin: 4px; float: ' + columnproperties.cellsalign + ';">' + JSdate + '</span>';
            }
        };

This should be a separate post but its related so I’ll put it on the same port. I’ve had problems with dates and timezone adjustments for a while now and my teams solution was to a dateFormatted property to the business objects which is a date as a string. Is this a better solution to this problem? We allow for editing the dates.

[Peter StoevKeymaster]

Hi jr,

You can use KO with jqxDataAdapter’s binding so you can use the same approach and set the type: “date” of your date fields. Ex: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxknockout/gridwithjson.htm?arctic

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts