0

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.stack.imgur.com/MC6fC.jpg

Thank you very much for the help.

Javier .Albornoz
  • 5
  • 1
  • The syntax you are using there in your setCell calls, sets inline styles on the element. You might have better luck, if you apply the custom formatting via a class instead. Then the :hover(?) styling from the stylesheet could still apply (provided the specificity of those hover rules is high enough.) – CBroe Feb 04 '22 at 14:19
  • Thanks! I do the changes, but when i do click in the row , the column no change the colors of row selected. I used :active instead of :hover – Javier .Albornoz Feb 04 '22 at 14:37
  • `:active` only applies the moment the element actually _gets_ activated - for mouse users for example that means, only as long as they keep the mouse button pressed down. As soon as they lift it, the element is _not_ considered to be in :active state any more. – CBroe Feb 04 '22 at 15:12
  • OK. Thanks for answering. When I select the row (by clicking on any column), the column that I changed the background color of, stays with that color and doesn't change color like the other columns. Programming the :hover pseudo-class doesn't work as it only works when you "hover" the mouse over the row. What I need is that when selecting the row (by clicking on it), the column in question remains as the other columns and not with the color that I defined. Thanks!! – Javier .Albornoz Feb 04 '22 at 15:49

1 Answers1

0

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.

Tony Tomov
  • 3,122
  • 1
  • 11
  • 18