Column text color when row takes focus (is clicked)

Question

I use jquery and jgrid for create a grid in php. I have modified the color of a column of my grid, using:

$grid[“loadComplete”] = "function(ids) { onloadFunction(ids)";

The onloadFunction function is as follows:

function onloadFunction(ids) {

   var ids = $(“#lstStudents”).jqGrid(‘getDataIDs’);

   for (var z=0;z<ids.length;z++) {

      var id=ids[z];

      $(“#lstStudents”).jqGrid(‘setCell’,id, ‘quarter1’,”, {‘background’:’rgb(250, 250, 250)’});
      $(“#lstStudents”).jqGrid(‘setCell’,id, ‘quarter1’,”, {‘color’:’rgb(0, 0, 0)’});

   }
}

When selecting a row, the column whose color I modified in the onLoadFunction function remains with the established color, that is, it does not take the defined color of a selected row. How would I make the modified column also have the background color and text color of the rest of the columns?

Image to clarify better: https://i.sstatic.net/MC6fC.jpg

Thank you very much for the help.

Answer 1

This is little bit tricky.

You know that the inline style (the style of the table cell) has higher priority than the css. Moreover the highlight class is added to the row while the custom class is added to the child table cell.

This mean that to solve the problem we need to redefine the cell class within the highlight class.

In your application do :

td.mycolor {        
    background:rgb(250, 250, 250);
    color : rgb(100, 200, 300);         
}

Add this class to the cell using the setCell method

$("#grid").jqGrid("setCell", rowid, "colname", "", "mycolor" );

Below the definition of mycolor class do:

.ui-widget-content .ui-state-highlight > td.mycolor { 
    background-color: inherit !important;
    color : inherit !important;
}

in case of Bootstrap this maybe should be

.table-success > td.mycolor { 
    background-color: inherit !important;
    color : inherit !important;
}

(check the docs to be a sure which class is added when the row is selected)

This way the mycolor will inherit the colors of the parent class when we add the class to the row.