Jqgrid Zebra/Alt Rows Background Not Working Due to UI Theme Class

jqGrid zebra/alt rows background not working due to UI Theme class

jqGrid use jQuery UI class 'ui-priority-secondary' as the default value of the altclass parameter. The class are described in jQuery UI documentation as

Class to be applied to a priority-2
button in situations where button
hierarchy is needed. Applies normal
weight text and slight transparency to
element.

It is of cause not exactly the description of the zebra striping, but there are not so many standard classes which can be used. Unfortunately even rows having 'ui-priority-secondary' looks not so different from odd rows in the most themes. So to improve visibility one have to define the class altclass manually.

One of the most native ways to make even rows seen different as the odd rows is the usage of different background color. The problem is that ui-widget-content class use an background image defined with background CSS style, so the most native setting of background-color will not work. To fix the problem one have to do one from the things 1) remove ui-widget-content class 2) use background CSS style instead of background-color 2) use background-image:none together with the background-color style. The simplest way to do this is define your custom AltRowClass as

.myAltRowClass { background: #DDDDDC; }

or

.myAltRowClass { background-color: #DDDDDC; background-image: none; }

and then to use altRows:true and altclass:'myAltRowClass' parameters of jqGrid.

Another way is to do the same without altRows and altclass parameters:

loadComplete: function() {
    $("tr.jqgrow:odd").css("background", "#DDDDDC");
}

In the case you will has some small disadvantages in hovering or selecting the even lines. The following code works better, but it do the same what altRows:true and altclass:'myAltRowClass' do:

loadComplete: function() {
    $("tr.jqgrow:odd").addClass('myAltRowClass');
}

Of cause the background color and other CSS styles attributes which you can set for the even rows are depend from the theme which you use, so if you plan to use ThemeRoller you will have to choose altclass for every theme, which you will allow to choose.

UPDATED: Just seen that I forgot to include the link to the demo file which demonstrate what I wrote live. The demo is here.

jqGrid zebra striping

Yes. Use the altRows and altclass options.

jqgrid alternate row background

It seems to me that you will find the answer on your question here with the corresponding demo.

jqGrid: change background color of row based on row cell value by column name

The main ideas to change the background color of the row you will find here and here. I recommend you to read this answer which discussed different advantages and disadvantages of different approaches.

To get column index from the column name you can use following simple function:

var getColumnIndexByName = function(grid, columnName) {
        var cm = grid.jqGrid('getGridParam','colModel'),i=0,l=cm.length;
        for (; i<l; i++) {
            if (cm[i].name===columnName) {
                return i; // return the index
            }
        }
        return -1;
    };

The function getColumnIndexByName($("#list"), 'MyColumnName') will get you the index in colModel of the 'MyColumnName' column.

To change the background color you can follow the example

loadComplete: function() {
    $("tr.jqgrow:odd").addClass('myAltRowClass');
}

from the answer, but instead of ':odd' filter you can write the filter yourself using jQuery.filter. Inside of the filter you can use :nth-child() to access the data from the corresponding <td> element (see here)

UPDATED: You can do the following (very close to the code from the another answer):

loadComplete: function() {
    var iCol = getColumnIndexByName($(this),'closed'),
        cRows = this.rows.length, iRow, row, className;

    for (iRow=0; iRow<cRows; iRow++) {
        row = this.rows[iRow];
        className = row.className;
        if ($.inArray('jqgrow', className.split(' ')) > 0) {
            var x = $(row.cells[iCol]).children("input:checked");
            if (x.length>0) {
                if ($.inArray('myAltRowClass', className.split(' ')) === -1) {
                    row.className = className + ' myAltRowClass';
                }
            }
        }
    }
}

The corresponding demo is here. You will see the following:

By the way if the 'Closed' column will be hidden everything will continue to work as before.

UPDATED 2: The answer describe how to use rowattr callback to simplify the solution and to have the best performance (in case of gridview: true).

How to SET JQGRID ROW background color?

look at jqGrid Coloring an entire line in Grid based upon a cells value. You should examine current row values after data loading (inside of loadComplete for example). For the elements where you want change the background-color you should remove 'ui-widget-content' css class and then add another class which defines the color which you want.

how to set the cell background color baced on the cell value in jqgrid?

You can do this in many ways: see this, this or this. Important is not only how you do this, but where. The loadComplete event handle is the good place for that.

UPDATED: In the next version of jqGrid you will able to use new cellattr option as function in the colModel. See this demo and my original suggestion.

JQGrid Paging details before Grid

Probably you mean the toppager. In the case you will find the answer on your question here. By the way in case of usage the toppager:true you don't need define the div like <div id="pager"></div>, jqGrid will create the corresponding div for you.

On the page of jqGrid documentation I inserted recently two additional screen-shorts which shows different layers which can be managed by jqGrid. On one picture you will find the toppager layer.

---

Related Topics