jqgrid odd even row color

Question

When I apply style class myAltRowClassto change alternate colors for jqgrid odd even row. left, right and bottom borders are in black color.

I want to apply odd even row color for all jqgrids through css

The grid looks like below screenshot.

oddevenproblem

When used below code in loadComplete function this problem is not occurred

$("tr.jqgrow:odd").css("background", "#E0E0E0");

jqgrid looks like below screenshot.

oddevenrow

Css Class

.myAltRowClass {
    background: #E0E0E0;
}

Code:

$(document).ready(function(){
            //jqGrid
            $("#usersList").jqGrid({
                url:'<%=request.getContextPath() %>/Admin/getAllUsersList',
                datatype: "json",               
                colNames:['Edit','First Name','Middle Name','LastName','Mobile Number','Active'],
                colModel:[
                    {name:'userId',search:false,index:'userId',width:30,sortable: false,formatter: editLink},                       
                    {name:'firstName',index:'firstName', width:100},
                    {name:'middleName',index:'middleName', width:100},
                    {name:'lastName',index:'lastName', width:100},
                    {name:'mobileNo',index:'user.mobileNo', width:100},
                    {name:'isActive',index:'user.isActive',width:80},
                    ],
                    rowNum:20,
                    rowList:[10,20,30,40,50],
                    rownumbers: true,  
                    pager: '#pagerDiv',
                    sortname: 'user.primaryEmail',  
                    viewrecords: true,  
                    sortorder: "asc",

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

                        $("tr.jqgrow:odd").addClass('myAltRowClass');
                    },

            });
            $('#gridContainer div:not(.ui-jqgrid-titlebar)').width("100%");
            $('.ui-jqgrid-bdiv').css('height', window.innerHeight * .65);
            $('#load_usersList').width("130");
            $("#usersList").jqGrid('navGrid','#pagerDiv',{edit:false,add:false,del:false},{},{},{}, {closeAfterSearch:true});
            $(".inline").colorbox({inline:true, width:"20%"});
        });

        function editLink(cellValue, options, rowdata, action)
        {
            return "<a href='<%=request.getContextPath()%>/Admin/editUser/" + rowdata.userId + "' class='ui-icon ui-icon-pencil' ></a>";
        }

score 4 · Accepted Answer · answered Feb 21 '14 at 09:38

The demo demonstrates how to define CSS rules and set the rules to odd and even rows of the grid. The code used in the demo

loadComplete: function () {
    $(this).find(">tbody>tr.jqgrow:odd").addClass("myAltRowClassEven");
    $(this).find(">tbody>tr.jqgrow:even").addClass("myAltRowClassOdd");
}

It's important to understand that jqGrid use first hidden row in the grid to set the column widths. So one have to use jQuery :even selector to set class on odd rows and one have to use :odd selector to set class on even rows.

The CSS rules which I used in the demo are the following

.myAltRowClassEven { background: #E0E0E0; border-color: #79B7E7; color: Tomato; }
.myAltRowClassOdd { background: DarkOrange; }
.ui-state-hover.myAltRowClassEven { color: Magenta; }
.ui-state-hover.myAltRowClassOdd { color: RoyalBlue; }
.ui-state-highlight.myAltRowClassEven { color: PaleGreen; }
.ui-state-highlight.myAltRowClassOdd { color: Sienna; }

As the result one get very multicolored picture like with different colors or background colors for odd/even/hovered/selected rows:

enter image description here

The colors looks terrible. I wanted just demonstrates how one customize there.

UdayKiran Pulipati · Answer 2 · 2014-02-21T09:44:39.607

0

Added the border-color: #79B7E7 in myAltRowClass. jqgrid odd row background color is changed without borders.

.myAltRowClass {
   background: #E0E0E0;
   border-color: #79B7E7;
}

edited Feb 21 '14 at 09:44

answered Feb 20 '14 at 11:21

UdayKiran Pulipati

6,579
7
67
92

it's clear that `background-color` and `border-color` (or `border-bottom-color` used by jqGrid [here](https://github.com/tonytomov/jqGrid/blob/v4.6.0/css/ui.jqgrid.css#L38)) are different. You can just extend CSS settings which you use either for `.myAltRowClass` or `$("tr.jqgrow:odd").css({background: "#E0E0E0", "border-color": "#79B7E7"});`. The CSS rule for `background-color` can don't work depend on jQuery UI Theme which one use because of background image. `background: #E0E0E0;` removes `background-image` of jQuery UI Theme. So the color will be safe shown. – Oleg Feb 20 '14 at 12:06
@Oleg for applying odd row even row color in jqgrid in entire project I called `myAltRowClass` class. if I use `$("tr.jqgrow:odd").css({background: "#E0E0E0", "border-color": "#79B7E7"});` this format I update on every screen where jqgrid is used. – UdayKiran Pulipati Feb 20 '14 at 12:15
1

If you do this in `loadComplete` then you should of cause use `this`: `$(this).find(">tbody>tr.jqgrow:odd").addClass("myAltRowClass")`. Moreover you should define CSS rule for `myAltRowClass` with *more deep* cascading. For example `.ui-jqgrid .myAltRowClass {background: #E0E0E0;}` makes unneeded to use `.removeClass('ui-widget-content')`. I personally prefer to use just `.myAltRowClass {background: #E0E0E0;}`. In the case hovering of even rows works correctly and the row can be selected. – Oleg Feb 20 '14 at 13:02
1

@Oleg can we change the `even row` color in jqgrid?. – UdayKiran Pulipati Feb 21 '14 at 08:12
Sorry, but I don't understand what you mean. jqGrid set it only if you use `altRows: true` and `altclass: "myAltRowClass"` options. You prefer to set the class manually. The color of the text can be set in `myAltRowClass` class. Try to use for example the following CSS rules: `.myAltRowClass { background: #E0E0E0; border-color: #79B7E7; color: red; } .ui-state-hover.myAltRowClass { color: Magenta; } .ui-state-highlight.myAltRowClass { color: PaleGreen; }`. The last two rules changes the color of text of even rows which are hovered or selected. – Oleg Feb 21 '14 at 08:56
@Oleg I mean odd row background color is `background: #E0E0E0` and even row color is `white`. Can I change the `white` background color to some other color like `orange`. – UdayKiran Pulipati Feb 21 '14 at 09:00
I posted the demo in the answer. I hope it clear all above questions. – Oleg Feb 21 '14 at 09:38

jqgrid odd even row color

2 Answers2

Linked