jquery - jqGrid allow only 1 sort direction

Question

jqGrid's sort icon on the column header shows both up and down arrows. Is there a way to force the icon to show only 1 direction like only allowing ascending order?

Thanks.

Answer 1

In the answer I shown how to change the visibility of sorting icons. I modified for you the previous solution to show only the active sorting icon.

The demo demonstrate the results and shows the headers like this:

or this:

The code below shows the most important part of the code:

var $grid = $("#list");

$grid.jqGrid({
    //... other jqGrid options
    sortname: 'invdate',
    sortorder: 'desc',
    onSortCol: function (index, idxcol, sortorder) {
        var $icons = $(this.grid.headers[idxcol].el).find(">div.ui-jqgrid-sortable>span.s-ico");
        if (this.p.sortorder === 'asc') {
            //$icons.find('>span.ui-icon-asc').show();
            $icons.find('>span.ui-icon-asc')[0].style.display = "";
            $icons.find('>span.ui-icon-desc').hide();
        } else {
            //$icons.find('>span.ui-icon-desc').show();
            $icons.find('>span.ui-icon-desc')[0].style.display = "";
            $icons.find('>span.ui-icon-asc').hide();
        }
    }
});
// hide initially the disaabled sorting icon
$('#jqgh_' + $.jgrid.jqID($grid[0].id) + '_' + $.jgrid.jqID(sortName) + '>span.s-ico').each(function () {
    $(this).find('>span.ui-icon-' +
        (sortDirection ? 'asc' : 'desc')).hide();
});

I tried to use $icons.find('>span.ui-icon-asc').show(); in the onSortCol at the beginning , but has problems in the Google Chrome because the show() set display: block style on the <span> element. So I just removed the display: none style.

Answer 2

Check out the jqGrid Event documentation here. You could define your own sorting by returning 'stop' on the onSortCol event. Something like this should work:

onSortCol: function (index, iCol, sortorder) {
    if (sortorder === "desc") {
            return 'stop';
    } else {
            //do regular sorting.
    }
}

Also if you do this on gridComplete it should hide the descending arrows:

gridComplete: function () {
    $('.ui-grid-ico-sort.ui-icon-desc.ui-sort-ltr').hide();
}