Custom sorting for single column

[stlredlinkParticipant]

Hello,

we have to sort a single/specific column via a custom sort function. It seems like jqxGrid doesn’t support it right out of the box?! At least we didn’t find anything in the documentation about it except overriding the sort logic for all columns at once.

So based on the documentation example about custom sorting we tried to implement a way to sort by a single column on our own. Instead of setting the sort property of the source object like suggested in the documentation we used the ‘sortcomparer’ property. The latter seems to us more appropriate for our requirement as it will be passed to the sortby function within $.jqx.dataview.sort (see jqxgrid.sort.js – v.4.3.0). Unfortunately the sortcomparer callback will not always be passed when invoked within jqxgrid.js.
Custom sorting for a single column works when sort is done via click on the column header or via click on the respective column menu item. But when we update a row with updaterow than our custom sort function is not invoked because sortby is called without passing the sortcomparer callback.

Is there any way so that even after adding, updating or deleting a row custom sort of a single column still works by using the custom sort/compare function?

Simple example:

var datafields = [
        {name: 'id', type: 'number'},
        {name: 'status', type: 'string'},
        {name: 'start', type: 'date'},
        {name: 'end', type: 'date'},
        {name: 'name', type: 'string'}
    ],
    source =
    {
        localdata: [
            {id: 1, start: '2016-01-01', end: '2016-12-31', name: 'Unit-A'},
            {id: 2, start: '2015-01-01', end: '2015-12-31', name: 'Unit-B'},
            {id: 3, start: '2017-01-01', end: '2017-12-31', name: 'Unit-C'},
            {id: 4, start: '2016-01-01', end: '2018-12-31', name: 'Unit-D'}
        ],
        datatype: 'array',
        datafields: datafields,
        id: 'id',
        sortcolumn: 'status',
        sortdirection: 'desc',
        sortcomparer: function (valueData1, valueData2) {
            var columnName = $('#jqxgrid').jqxGrid('getsortinformation').sortcolumn,
                compareResult;

            console.log('---sortcomparer---');

            // if specific column than do custom comparing otherwise use original jqxGrid compare function
            if (columnName === 'status') {
                var startDate1 = valueData1.value.start,
                    endDate1 = valueData1.value.end,
                    startDate2 = valueData2.value.start,
                    endDate2 = valueData2.value.end,
                    status1 = getPeriodStatus(startDate1, endDate1),
                    status2 = getPeriodStatus(startDate2, endDate2),
                    statusMapping = {past: 0, present: 1, future: 2};

                status1 = statusMapping[status1];
                status2 = statusMapping[status2];

                compareResult = status1 - status2;

            } else {
                var type = null;

                $.each(datafields, function (index, datafield) {
                    if (columnName === datafield.name) {
                        type = datafield.type;
                    }
                });

                compareResult = $('#jqxgrid').jqxGrid('dataview')['_compare'](valueData1, valueData2, type);
            }

            return compareResult;
        }
    },
    dataAdapter = new $.jqx.dataAdapter(source),
    getPeriodStatus = function (startDate, endDate) {
        var status = 'past',
            now = new Date();

        now.setHours(0);
        now.setMinutes(0);
        now.setSeconds(0);
        now.setMilliseconds(0);

        if ((startDate === null || startDate.getTime() <= now.getTime()) && (endDate === null || endDate.getTime() >= now.getTime())) {
            status = 'present';
        } else if (startDate !== null && startDate.getTime() > now.getTime()) {
            status = 'future';
        }

        return status;
    },
    statusCellsRenderer = function (rowIndex, columnName, cellValue, defaultHtml, columnOptions, rowData) {
        var startDate = rowData.start,
            endDate = rowData.end;

        return '<div>' + getPeriodStatus(startDate, endDate) + '</div>';
    };

$('#jqxgrid').jqxGrid(
    {
        width: 600,
        autoheight: true,
        source: dataAdapter,
        sortable: true,
        columns: [
            {text: 'ID', datafield: 'id', hidden: true},
            {text: 'Status', datafield: 'status', width: 60, cellsrenderer: statusCellsRenderer},
            {text: 'Start', datafield: 'start', width: 120, cellsformat: 'dd.MM.yyyy'},
            {text: 'End', datafield: 'end', width: 120, cellsformat: 'dd.MM.yyyy'},
            {text: 'Name', datafield: 'name'}
        ]
    }
);

$('#updatePastRow').click(function () {
    $('#jqxgrid').jqxGrid('updaterow', 2, {
        id: 2,
        start: new Date('2015-01-01'),
        end: new Date('2015-12-31'),
        name: 'Unit-B - updated'
    })
});

<body>
<div id="jqxgrid"></div>
<div><button id="updatePastRow">Update past row</button></div>
</body>

Thanks in advance for your help.

Best regards

[ChristopherParticipant]

Hi stlredlink,

“sortcomparer” isn’t part of the API. Sort is used to apply custom sorting function for all of the columns. Unfortunatelly it’s not possible to apply a custom sorting function to specific columns only.

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[stlredlinkParticipant]

Hi Christopher,

thanks for your answer. Are there any plans to implement such feature?

For now we will stick with the solution above and just reapply the current sort settings after adding, updating or removing a row as that seems to work.

Best regards

[Author]

Posts