jqgrid change cursor while sorting

Question

I would like to change the cursor to wait when a user clicks on a column header to sort the data (because the process takes several seconds during which nothing changes).

To do so, I tried to change the cursor CSS property in the onSortCol event:

onSortCol: function (index, iCol, sortorder) {
    $("body, .ui-jqgrid .ui-th-column > div.ui-jqgrid-sortable").css({'cursor' : 'wait'});
}

and changed it back in the loadComplete event:

loadComplete: function () {
     $("body").css({'cursor' : 'default'});
     $(".ui-jqgrid .ui-th-column > div.ui-jqgrid-sortable").css({'cursor' : 'pointer'});
}

But it doesn't work. It seems like the browser doesn't render the cursor before the sorting is done.

Any idea how to proceed ?

H4dr1en · Accepted Answer · 2018-07-02T11:58:40.380

I ended up with this solution:

Find in the jqGrid library where was the call that started the sorting
Change the cursor before this call
Set a timeout to let the time to the browser to take in account the changes
Run the sorting
Restore the cursor

This is done in jquery.jqgrid.src.js (version 4.15.4) in line 5729:

if (iColByName != null) {
    // the $("div", this)[0].id looks like "jqgh_" + p.id + "_" + colIndex (like "jqgh_list_invdate")
    sortData.call(ts, $("div", this)[0].id.substring(5 + p.id.length + 1), iColByName, r, d, this, e);
}

I replaced with:

if (iColByName != null) {
    // the $("div", this)[0].id looks like "jqgh_" + p.id + "_" + colIndex (like "jqgh_list_invdate")
    $("body").addClass('waiting');
    setTimeout(() => {
        sortData.call(ts, $("div", this)[0].id.substring(5 + p.id.length + 1), iColByName, r, d, this, e);
        $("body").removeClass('waiting');
    }, 50);
}

Here the CSS class waiting is taken from here: https://stackoverflow.com/a/25207986/8790102

body.waiting * {
    cursor: progress;
}

jqgrid change cursor while sorting

1 Answers1