How can I change Background colour and Font of any row in JQGrid?

Question

Iam trying to change the background colour of any row in JQGrid, Still I don't have any solution. Can anybody help me?

Thanks in advance.

Apocryphal

possible duplicate of jqGrid Coloring an entire line in Grid based upon a cells value – Kleper

Answer 1

Call loadComplete function to change background color of row in jqgrid.

loadComplete : function() {
    $("tr.jqgrow:odd").addClass('myAltRowClassEven');
    $("tr.jqgrow:even").addClass('myAltRowClassOdd');
},

for applying styles to background use below css.

<style type="text/css">
.myAltRowClassEven { background: #E0E0E0; border-color: #79B7E7; font: italic; font-family: sans-serif;}
.myAltRowClassOdd { background: orange; font: bold; font-family: Segoe Print, Tahoma, Comic Sans MS, Georgia}
</style>

Code: In jqgrid

$(document).ready(function(){  
    //jqGrid
    $("#projectsList").jqGrid({
        url:'<%=request.getContextPath()%>/Projects/getProjectsList',
        datatype : "json",
        mtype: 'GET',
        colNames : ['Edit','Delete','Client','ProjectSuit','Project','Description','Primary','Others', 'UATOn','ProductionOn', 'Status','ActiveYN'],
        colModel : [
        {name : 'projectId', index : 'projectId', width:'35%', search : false, sortable : false, formatter : editLink}, 
        {name : 'projectId', index : 'projectId', width:'40%', search : false, sortable : false, formatter : deleteLink}, 
        {name : 'client',index : 'customer.customerName', sortable : false},
        {name : 'projectSuit',index : 'projectSuite.projectSuitName'},
        {name : 'projectName',index : 'projectName'},
        {name : 'description',index : 'description'},
        {name : 'primary',index : 'primary'}, 
        {name : 'others',index : 'others'}, 
        {name : 'strUATDate',index : 'uatDate', searchoptions:{sopt:['eq', 'ne', 'lt', 'le', 'gt', 'ge']}}, 
        {name : 'strProductionDate',index : 'productionDate', searchoptions:{sopt:['eq', 'ne', 'lt', 'le', 'gt', 'ge']}},
        {name : 'strStatus',    index : 'strStatus'}, 
        {name : 'strActive',index : 'strActive'}, ],
        rowNum : 10,
        rowList : [ 10, 20, 30, 40, 50 ],
        rownumbers : true,pager : '#pagerDiv',
        sortname : 'projectId',
        viewrecords : true,
        sortorder : "asc",
        scrollOffset:0,
        caption : 'Projects',
        loadComplete : function() {
                $("tr.jqgrow:odd").addClass('myAltRowClassEven');
                $("tr.jqgrow:even").addClass('myAltRowClassOdd');
            },
    });

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

ScreenShot:

Nazarius

Answer 2

you can change it from your jquery Css images and themes.. If u want to do for particular grid then follow this steps:-

    Steps:-
           1) open jquery-ui.custom.css (Ex:jquery-ui-1.8.18.custom.css)
           2) create css class .ui-widget-content-own { border: 1px solid #dddddd;background: #eeeeee url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x; color: #333333; }

           3) JQuery("#jqgrid_id").removeClass("ui-widget-content jqgrow ui-row-ltr");
           4) JQuery("#jqgrid_id").addClass("ui-widget-content-own jqgrow ui-row-ltr");

   Note:change background property from css class 

if you want to change for particular row do this

  $("#jqgrid-id").find("#grid_row_id").removeClass("ui-widget-content jqgrow ui-row-ltr");

   $("#jqgrid-id").find("#grid_row_id").addClass("ui-widget-content-own jqgrow ui-row-ltr");

Copro