jqGrid Coloring an entire line in Grid based upon a cells value

Question

I know it's been asked before, but I cant get it to run and I'm out of things to try.

I want to colorize a row in a Grid if its value is not 1 - I use a custom formatter for this. The formatter itself works, that's not the problem.

I've tried multiple ways I've found so far on the web - adding a class, directly adding CSS code, using setRowData, using setCell....

Here are my examples - none of them worked for me (Linux, ff363) - any pointer would be greatly appreciated.

27.05.2010_00:00:00-27.05.2010_00:00:00 is my row id

<style>
.state_inactive {
            background-color: red !important;
        }
.state_active {
    background-color: green !important;
}
</style>

function format_state (cellvalue, options, rowObject)
{
    var elem='#'+options.gid;
    if (cellvalue != 1) {

        jQuery('#list2').setRowData(options.rowID,'',
                                    {'background-color':'#FF6F6F'});

        jQuery('#list2').setRowData('27.05.2010_00:00:00-27.05.2010_00:00:00',
                                    '',{'background-color':'#FF6F6F'});

        for (var cnt=0;cnt<rowObject.length;cnt=cnt+1) {
            jQuery(elem).setCell(options.rowId,cnt,'','state_inactive','');

            jQuery(elem).setCell('"'+options.rowId+'"',cnt,'','state_inactive');

            jQuery(elem).setCell('"'+options.rowId+'"',cnt,'5',
                                 {'background-color':'#FF6F6F'},'');
        }
    } else {
        for (var cnt=0;cnt<rowObject.length;cnt=cnt+1) {
            jQuery(elem).setCell(options.rowId,cnt,'','state_active','');
        }
    }
    <!-- dont modify, we simply added the class above-->
    return cellvalue;
}

Lysine

Answer 1

It seems to me that your main problem is you're not setting a 'background-color' style. You should remove 'ui-widget-content' class from the row (from <tr> element)

jQuery("#"+ options.rowId,jQuery('#list2')).removeClass('ui-widget-content');

before adding the class state_activ or state_inactive, because jQuery UI class 'ui-widget-content' is define .ui-widget-content like

{
border: 1px solid #fad42e;
background: #fbec88 url(images/ui-bg_flat_55_fbec88_40x100.png) 50% 50% repeat-x;
color: #363636;
}

and only with setting of CSS 'background-color' your not really change the background color. So try to use something like

var trElement = jQuery("#"+ options.rowId,jQuery('#list2'));
trElement.removeClass('ui-widget-content');
trElement.addClass('state_active');

Octosyllable

Sounds logical but unfortunately it doesnt work - the ui-widget-content class is not removed. I put it in the formatter call and in a gridComplete function - nothing :( – Lysine

@Thomas. In loadComplete are rows filled and in the gridComplete not. At me it works inside of loadComplete. I recommend you always use gridview: true wnd no time use afterInsertRow event, which break quick execution behavior of gridview: true parameter. You can call jQuery('#list2').getDataIDs(); inside or loadComplete, test cell value with getCell() and then remove and add the class. – Octosyllable

It still doesnt work :( Aparantly its b/c the jquery selector cant find the row id - the object is null although the id is there ... id=25.05.2010_00:00:00-26.05.2010_00:00:00 <tbody><tr id="25.05.2010_00:00:00-26.05.2010_00:00:00" role="row" class="ui-widget-content jqgrow ui-row-ltr"><td ...</tr> alerts from var l2=jQuery('#list2'); alert ("id="+ cl +" "+l2.html()); var trElement = jQuery('"#'+cl+'"',jQuery('#list2')); trElement.removeClass('ui-widget-content'); trElement.addClass('state_active'); trElement is null with .html()... – Lysine

It can be that you have such problem because of special symbols inside of id. You use ':', '-' and '.'. jqGrid had problems with some symbols inside of id. To verify this try to use more easy form of ids. Moreover some characters have a spatial meaning for jQuery. So the constructs like jQuery("#"+ options.rowId) can be wrong interpret by jQuery. If all will be work with the simple ids, then you can implement some form of encoding/decoding of id values. – Octosyllable

yeah i thought so already as well - maybe jqgrid.jqid might help here, i'll try that later. In the meanwhile, the following code is working (and fast enough so while its not pretty i might use it) loadComplete: function(xhr) { var mids = jQuery("#list2").getDataIDs(); for (var i=0;i<mids.length;i=i+1){ var cl=mids[i]; var state=jQuery("#list2").getCell(cl,'state'); if (state !=1) { for (var l=0;l<7;l=l+1) { jQuery("#list2").setCell(cl,l,'',{'background-color':'red'}); }} Any way to find out the # of cols dynamically? I tried getRowData).length but that didnt work out... – Lysine

JavaScript has no private properties. So you can use any jqGrid internal properties. See https://mcmap.net/q/430395/-get-the-jqgrid-colmodel for example discussion about getting of colModel. So you can use construct like jQuery("#list2")[0].p.colModel to receive a colModel or jQuery("#list2")[0].p.colNames to receive colNames. Both of properties are arrays so you can use jQuery("#list2")[0].p.colModel.length to get a number of columns. Don't forget, that if you use rownumbers: true then colModel has an additional rm column on the first place (index 0). – Octosyllable

Finally that did it - escaping the ids... Thanks a lot for your help:) loadComplete: function(xhr) { var mids = jQuery("#list2").getDataIDs(); for (var i = 0; i < mids.length; i=i+1){ var cl2=jQuery.jgrid.jqID(mids[i]); var trElement = jQuery("#"+ cl2,jQuery('#list2')); trElement.removeClass('ui-widget-content'); trElement.addClass('state_active'); } – Lysine

I should correct my a little about the best way to find out the number of columns. jQuery("#list2").jqGrid ('getGridParam', 'colModel') is a documented way to receive colModel array. So if you want to get the number of VIABLE columns you can do following: var cm = jQuery("#list2").jqGrid('getGridParam', 'colModel'); var length = cm.length, columnCount = 0; for (var i=0; i<length; i++) { if (!cm[i].hidden && cm[i].name !== "rn") { columnCount++; } }. The value columnCount is the number of visible columns of the jqGrid #list2. Column "rn" (has index 0) exist only if rownumbers: true. – Octosyllable

Thanks, but actually i dont need that any more since i can modify the entire row now and have no need to loop over each cell - but its good to know anyway :) – Lysine

I dont want to see the lines of the JQGrid which is displayed at the border then how can I do that ? – Silvanasilvano

@BhavikAmbani: In general it's new question. It's better for other users if you ask the question not in the comments because such answers will be not found during searching. To your problem: You can use transparent color for the border. For example .ui-jqgrid tr.ui-row-ltr td {border-right-color: transparent;} removes the vertical borders between cells. In the same way .ui-jqgrid tr.ui-row-ltr td {border-bottom-color: transparent;} will remove the borders between the rows. Another answer shows how to remove the borders in the column headers. – Octosyllable

Answer 2

for anyone that looking for a real answer at this topic..

this works !

afterInsertRow : function(rowid, rowdata)
{
    if (rowdata.colmodelnamefield == "something")
    {
        $(this).jqGrid('setRowData', rowid, false, 'StyleCss');
    }

}

In another file stylesheet the custom CSS

.StyleCss{ background-color:red !important; }

dont forget the !important to overwrites the theme ui roller

Maronite

agreed. This worked perfectly. If you need to set it to the correct jquery ui css class it is: $(this).jqGrid('setRowData', rowid, false, 'ui-state-error'); – Alicyclic

I ended up putting similar logic to gridComplete, but concept worked great. – Bulahbulawayo

Your solution seems to be the most convenient, but how can I set inlined CSS? – Discourteous

Answer 3

I was trying solution for a long time and finally from all examples and suggestions combine someting that worked for me. Of course you need to define custom css styles for this to work. Hope that this helps, although it could produce potential speed issue.

...

loadComplete: function() {

      var rowIDs = jQuery("#grid").getDataIDs(); 
      for (var i=0;i<rowIDs.length;i=i+1){ 
        rowData=jQuery("#grid").getRowData(rowIDs[i]);
        var trElement = jQuery("#"+ rowIDs[i],jQuery('#grid'));
        if (rowData.statusID > 5) { 
            trElement.removeClass('ui-widget-content');
            trElement.addClass('rowColorRED');
        }else{ 
          if (rowData.statusID == 1){
            trElement.removeClass('ui-widget-content');
            trElement.addClass('rowColorGREEN');
          }
        }
      }
  },

...

Tympany

Answer 4

I've tried solutions above, but I think that one is the correct:

afterInsertRow : function(rowid, rowdata)
{
    if (parseFloat(rowdata.amount) > 500)
    {
        $(this).jqGrid('setRowData', rowid, false, {color:'red'});
    }
}

If css class is between apostrophes, then it is overwritten by to the original one (you can see that easily using firebug):

<tr class="ui-widget-content jqgrow ui-row-ltr RedStyle" ...>  

correct with {color:'red'}:

<tr class="ui-widget-content jqgrow ui-row-ltr" style="background: none repeat scroll 0pt 0pt red;" ...>

According to documentation of setRowData:

If the cssprop parameter is string we use addClass to add classes to the row. If the parameter is object we use css to add css properties.

Respecting

Answer 5

I suggest that you try someing like this. This will actualy give you access to the whole row.

afterInsertRow: function(rowid, aData, rowelem) 
     {  
        if (aData.field =='value'){    
            jQuery("#list1").setCell(rowid,'message','',{color:'red'});   
        }   
     } 

Saskatoon

Well this at least works :) I'll try to use setRowData instead of setCell, i hope thats cheaper from an execution point of view - this take quite long on my test vm... – Lysine

Answer 6

 afterInsertRow: function (rowid, rowdata) {                                                     
    $(grid).jqGrid('setRowData', rowid, false, { background: 'red' });
}

Very Simple and works

Girard

Answer 7

Assumed other cell value is Y/N.

below code goes in loadComplete event

 var rowIDs = jQuery("#GRID").getDataIDs();   //Get all grid row IDs 
 for (var i = 0; i < rowIDs.length; i++) {     //enumerate rows in the grid
     var rowData = $("#GRID").jqGrid('getRowData', rowIDs[i]);   
     //If condition is met (update condition as req)
     if (rowData["COLNAME_CHECKED"] == "N") {          

         //set cell color if other cell value is matching condition
         $("#GRID").jqGrid('setCell', rowIDs[i], "COLNAMEModified", "", { color: 'red' });
         //for row color, update style. The code is given above by **Ricardo Vieira**
     }
 }

Garibull

Can you describe your code? Why does it helps the OP? – Bearskin

@user3755692: Already added comments. don't know what is not clear to you. This code colors cells/rows at load time for all rows once the grid is created. If you already know this code, it may be helpful to others. If you think its useless, delete it. – Garibull

It's always better to describe your code as good as you can. I don't think any answer that answers the question is useless, but there are always some answers more usefull than others - and you decide which answer is usefull by upvoting it – Bearskin

yes, u are right, detailed explanation is always better. Sometimes, its little subjective too. hope the updated code better now. BTW, how your user name changed to msrd07 from user3755692? – Garibull

yes, your updates version is better. You can change your username by going to your profile, click "edit" and then change your display name – Bearskin

Answer 8

May be it's too late for this answer but you can use rowattr to change row color like so :

rowattr : function(rd) {
            if(Difference_In_Days>=0&&rd.active==true){
                return {"class" : "online"};
            }else if(rd.active==false){
                return {"class" : "notActive"};
            }
            
        }

Lombard