CODEWITHSUNDEEP
jqueryjqgrid
A Coder
A Coder

Reputation: 3056

Remove selected row highlight in jqGrid

I need to remove the selected row hightlight( the yellow color) from the grid and the selcted cell to be highlighted. It just needs to be plain. Since i'm working on the functionality of cell highlight i dont want to highlight the row.

I tried using the below event,

beforeSelectRow: function(rowid, e) {
    return false;
},

But my event

  onCellSelect: function (rowid,iCol,cellcontent,e) {

                },

is not getting fired.

When i tried using the below css,

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight
{
    border: 1px solid red !important; // Desirable border color
    background: none !important; // Desirable background color
    color: black !important; // Desirable text color
}

the selected row has borders showing red color on each cell and a light gray row highlight which doesn't look good.

I need a simple proper wa to get rid of the row highlight and to highlight the selected cell.

Upvotes: 0

Views: 6143

Answers (3)

JSub
JSub

Reputation: 141

I had a similar solution, but I just programmatically removed the highlight class after it would be loaded. Depending on which configurations you have, different events may be fired when you click on a cell, so you may need to add this function to multiple events (onSelectCell, beforeEditCell, onSelectRow). This will remove any rows that are highlighted, as well as the hoverrow effect that I got despite setting hoverrows:false.

function(rowId) {
   var row=$('#'+rowId);
   row.removeClass('ui-state-highlight');
   row.removeClass('ui-state-hover);
   row.find('.ui-state-highlight').removeClass('ui-state-highlight');
   row.find('.ui-state-hover).removeClass('ui-state-hover);
}

Upvotes: 0

Oleg
Oleg

Reputation: 222017

The usage of return false in the beforeSelectRow is correct way to prevent selection of the rows. If you use currently onCellSelect you can just move the code of onCellSelect in beforeSelectRow or to call onCellSelect from beforeSelectRow. You need just $.jgrid.getCellIndex or cellIndex property of to get the index of the cell in the row. The code could be like below:

beforeSelectRow: function (rowid, e) {
    var $td = $(e.target).closest("td"),
        iCol = $.jgrid.getCellIndex($td[0]),
        onCellSelect = $(this).jqGrid("getGridParam", "onCellSelect");

    if ($.isFunction(onCellSelect)) {
        onCellSelect.call(this, rowid, iCol, $td.html(), e);
    }

    return false;
}

Upvotes: 1

coding_idiot
coding_idiot

Reputation: 13734

http://jsfiddle.net/nitincool4urchat/yNw3C/9234/

Adding

.ui-state-highlight{
     border:none!important;
    background:none!important;
}

Removes the default highlight.

Upvotes: 1

Related Questions