Make selected color highest level in jqGrid

Question

I change the color of some cells in the gridComplete: function(){ . This override the hover or selected color. I want to make the hover and selected colors the highest level. i.e. if I selected a colored row, it changes to the selected color.

Djebel

Answer 1

I suppose your question continues your previous question about the the color of the some cells. I created another demo which code is longer as my previous example from my answer to your previous question.

The main problem with the setting of the color of the cell (<td> element) is that the class of cell has of course higher priority as the classes of row because by the definition of the row classes was no "!important" attribute used. So to be able to make the selected of hovered cell be exactly like other standard cells one have to remove the cell class which changes its color. After "unselecting" or "unhovering" the corresponding row one should restore the removed cell class (the 'ui-state-error ui-state-error-text' classes). I implemented this behavior with the following code:

var grid = $("#list");
var saveErrorStateInData = function(ptr) {
    var redCells = $("td.ui-state-error",ptr);
    if (redCells.length > 0) {
        var errorCells=[];
        $.each(redCells,function(index, value) {
            errorCells.push(value);
            $(value).removeClass("ui-state-error ui-state-error-text");
        });
        $(ptr).data('errorCells',errorCells);
    }
};
var restoreErrorStateFromData = function(ptr) {
    var errorCells = $(ptr).data('errorCells');
    if (errorCells && typeof errorCells.length !== "undefined"
                   && errorCells.length>0) {
        $.each(errorCells,function(index, value) {
            $(value).addClass("ui-state-error ui-state-error-text");
        });
    }
};
grid.jqGrid({
    // all jqGrid parameters
    beforeSelectRow: function(rowid, e) {
        var selrowid = $(this).getGridParam('selrow');
        restoreErrorStateFromData($("#"+selrowid)[0]);

        ptr = $(e.target).closest("tr.jqgrow");
        saveErrorStateInData(ptr);
        return true;
    }
}).bind('mouseover',function(e) {
    var ptr = $(e.target).closest("tr.jqgrow");
    if($(ptr).attr("class") !== "subgrid") {
        $(ptr).addClass("ui-state-hover");
        saveErrorStateInData(ptr);
    }
    return false;
}).bind('mouseout',function(e) {
    var ptr = $(e.target).closest("tr.jqgrow");
    var selrowid = grid.getGridParam('selrow');
    $(ptr).removeClass("ui-state-hover");
    if (ptr.length === 1 && ptr[0].id !== selrowid) {
        restoreErrorStateFromData(ptr);
    }
    return false;
});

On the demo you will see how all this work.

Camisole

Answer 2

Sorry for answering this old question, but I hope someone else might find it useful. After searching quite a while for a solution, I came up with this:

1. Add a dummy class (with no styles) to the column using the jqGrid colmodel option 'classes'.
2. Add a style setting the background using a selector like this:

tr.jqgrow:not(.ui-state-hover):not(.ui-state-highlight) td.mydummycol {
    background-color: #ffd !important; 
}

This way the background is only applied if the row is not selected or in the hover state.

Selmore