Change Cursor Style Depending On Sort Or Not

I'm using the jqGrid and have 3 columns that can NOT be sorted. At this point the cursor changes to a hand when the user hovers over the headers regardless of sorting set to true

Solution 1:

I find the question very good. So +1 from me.

You are not the first person (and not the last one) who wish to have another cursor on non-sortable columns. It's pity, but jqGrid gives you not classes or some other simple attributes which can be used to find the elements at which one can set CSS "cursor:default".

So I suggest to do this with the following code:

var myGrid = $("#list");

// create the grid
myGrid.jqGrid({
  // all jqGrid parameters
});

// fix cursor on non-sortable columnsvar cm = myGrid[0].p.colModel;
$.each(myGrid[0].grid.headers, function(index, value) {
    var cmi = cm[index], colName = cmi.name;
    if(!cmi.sortable && colName!=='rn' && colName!=='cb' && colName!=='subgrid') {
        $('div.ui-jqgrid-sortable',value.el).css({cursor:"default"});
    }
});

You can see on the demo live that the method work. In the demo the last column 'Notes' is non-sortable.

It would be nice if such behavior would be standard in the next version of jqGrid. I will try to find time and to write suggestion what from the code of jqGrid should be changed to make the behavior out-of-the-box.

UPDATED: The problem with the cursor on non-sortable columns is not exist more in free jqGrid 4.8.

Solution 2:

Welcome to SO.

Absolutely. CSS:

th.unsortableclass {
cursor: default;
}

Now apply that class to your column headers that aren't sortable.

Solution 3:

Oleg's example worked great but I had a request to always show the arrows if the column was sortable. I know I'm commenting but thought some one might have the same requirement.

So I added this to his loop:

jQuery('span.s-ico',value.el).remove();

Then after his code runs:

jQuery(".s-ico").show();

And then added this to my grid create:

onSortCol:function(index, iCol, sortorder){
    // redisplay all arrowsjQuery(".s-ico").show();
}

Solution 4:

$("jquery selector to pick only non-sorted columns").css("cursor", "default");