Selected row background color

Question

I'm using jqgrid with jquery-ui 'smoothness' theme, unfortunately with this theme the selected row background color is too light, I'm trying to change the background color to make it more visible. I've tried changing ui-state-highlight in css (with !important override) but this does not work. Is there a CSS way to do this or perhaps a jqgrid custom formatter is the way to go?

Discernment

Answer 1

The class ui-state-highlight uses the background CSS attribute. So a small trick is to use background instead of background-color to remove the background image. For example

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

see live here.

UPDATED: It's not necessary to use !important. It's enough to specify a more specific rule like

.ui-jqgrid-btable .ui-state-highlight { background: yellow; }

or

.ui-jqgrid .ui-state-highlight { background: yellow; }

Deedeeann

Answer 2

jQuery('#jqGrid').find('.ui-state-highlight').css('background', 'skyblue');

You can add like this in your jquery file

Homopolar

Answer 3

Suppose if we want one color for the selected row cells and remaining rows cells having different color,

In the below example Highlighted row cells data will be in yellow color and remaining rows cells data will be in blue color

Suppose we have two classes with names "holdRow" for blue background and "HighlightHoldRow" for yellow color background then By using the below code "RowSelect" is the method which is invoked during row select,

Consider the following code

   .holdRow td {
font-weight : bold !important;
color: Blue !important;
  }

   .higLightholdRow td {
font-weight : bold !important;
color: Yellow !important;

}

   var LastRowId = "";
    function RowSelect(id) {
if (Flag == "TRUE") {
    var grid = $('#gvName);
    if (LastRowId != "" && LastRowId != undefined && LastRowId != id) {
        tr = grid[0].rows.namedItem(LastRowId);
        $(tr).removeClass("higLightholdRow");
        $(tr).addClass("holdRow");
        LastRowId = "";
    }
    tr = grid[0].rows.namedItem(id);
    $(tr).removeClass("holdRow");
    $(tr).addClass("higLightholdRow");
    LastRowId = id;
    }

}

During Trirand Grid Declaration we can call this Client side event using the following loc.

   ClientSideEvents-RowSelect="RowSelect"

The RowSelect method is invoked during the selection of a row,and selected row will have yellow color as background and remaining rows will have blue color as background

Wrench