JQGrid: 'beforeSelectRow' and 'sortabl

Question

I am using Oleg's suggestion to use the beforeSelectRow event to handle clicks on cells within my grid.

Oleg's code in his answer (which mine exactly mimics):

You can define the columns with buttons like following

{ name: 'add', width: 18, sortable: false, search: false, 
formatter:function(){
    return "<span class='ui-icon ui-icon-plus'></span>"
}}

In the code above I do use custom formatter of jqGrid, but without any event binding. The code of

beforeSelectRow: function (rowid, e) {
        var iCol = $.jgrid.getCellIndex(e.target);
        if (iCol >= firstButtonColumnIndex) {
        alert("rowid="+rowid+"\nButton name: "+buttonNames[iCol]);
    }

    // prevent row selection if one click on the button
    return (iCol >= firstButtonColumnIndex)? false: true;
}

where firstButtonColumnIndex = 8 and buttonNames = {8:'Add',9:'Edit',10:'Remove',11:'Details'}. In your code you can replace the alert to the corresponding function call.

The problem is that my grid is also sortable- (I use the sortableRows method on my grid). If the user is moving the mouse even a little when clicking the cell, the beforeSelectRow event is never triggered (the sortable event is).

This is desirable in most situations- however, I think what would fix this is to somehow exclude columns from being 'handles' to drag (sort) the row and let my onSelectRow event trigger on those columns. I just can't seem to figure out how to do this! Any help is extremely appreciated :)

Answer 1

You can fix the problem if you add the following additional code

var grid = $('#list'), tbody = $("tbody:first",grid[0]), ptr, td;
grid.bind('mouseover',function(e) {
    var iCol = $.jgrid.getCellIndex(e.target);
    if (iCol >= firstButtonColumnIndex) {
        tbody.sortable("disable");
    } else {
        tbody.sortable("enable");
    }
});

the code will be disable sortable feature of jqGrid if the mouse will be over the actions buttons. So you will be able to sort the rows only in another column.

You can see the modified demo here.