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 ?

Answer 1

I ended up with this solution:

1. Find in the jqGrid library where was the call that started the sorting
2. Change the cursor before this call
3. Set a timeout to let the time to the browser to take in account the changes
4. Run the sorting
5. 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;
}