Applying color to Jqgrid row

Question

I want to apply background color to row of jqGrid row based on value of company attributes, however the basic rowattr is not applying class to rows. Below is the code,have added *** against the condition.

function drawGrid() {
                $("#grid").jqGrid("GridUnload");
                var grid = $("#grid"),lastSel;
                jQuery("#grid").jqGrid({
                    sortable: true,
                    datatype: "local",
                    data: $scope.jqGridData,
                    colNames: $scope.jqgridColHeader, 
                    colModel: $scope.colModelValue,
                    viewrecords: true,
                    caption: "Peer Analysis",
                    rowNum:10,
                    rowList:[10,20,30],
                    recordpos: 'left',
                    footerrow : true,
                    userDataOnFooter : true,
                    restoreAfterSelect: false,
                    saveAfterSelect: true,
                    altRows : true,
                    multiselect: true,
                    cellEdit:   true,
                    autowidth:true,
                    treeGrid: true,
                    grouping: true,
                    shrinkToFit: true,
                    pager: '#pager',
                    gridview: true,
                    'cellEdit': true,
                    'cellsubmit' : 'clientArray',
                    editurl: 'clientArray',
                    onSelectRow: function(id){ 
                    },
                    ***rowattr: function (rd) {
                    console.log("rddetails"+rd.isBaseCompany);
                    if (rd.isBaseCompany=="true") { 
                    return {"class": "baseCompanyClass"};
                    //alert("hi");
                    } }***,
                    gridComplete: function() {
                    },afterSaveCell:function (rowid, cellname, value, iRow, iCol){
                        var rowData = $('#grid').jqGrid('getRowData', rowid);
                        $('#grid').jqGrid('saveRow', rowData);
                        var price = rowData.price;
                        var tarPrice = rowData.tagetPrice
                        var formula0= rowData.formula0;
                        var formula1= rowData.formula1;
                        var formula2= rowData.formula2;
                        var formula3= rowData.formula3;
                        var formula4= rowData.formula4; 



                        }else if(cellname=='tagetPrice'){
                            rowData.upside = Number(tarPrice/price)-1;
                            $('#grid').jqGrid('setRowData', rowid, rowData);
                        }else{
                            if(cellname=='formula0'){
                                rowData.formula0 = formula0;
                            }if(cellname=='formula1'){
                                rowData.formula1 = formula1;
                            }
                            if(cellname=='formula2'){
                                rowData.formula2 = formula2;
                            }if(cellname=='formula3'){
                                rowData.formula3 = formula3;
                            }if(cellname=='formula4'){
                                rowData.formula4 = formula4;
                            }
                            $('#grid').jqGrid('setRowData', rowid, rowData);
                        }   
                    },ondblClickRow: function(rowid) {
                            $scope.newBaseComp = jQuery('#grid').jqGrid ('getRowData', rowid);
                            $scope.showChangeBase(rowid-1);
                        },
                        beforeSaveCell : function(rowid,celname,value,iRow,iCol) {
                          if(rowid) {
                              return value;
                          }
                        },
                        loadComplete:function()
                        {

                        }});


                    }





Here is the css class for the same.

 .ui-widget-content .baseCompanyClass{
    background-color: #DCFFFF; 
    background-image: none;
}

So while checking the condition if(rd.isBaseCompany=="true") even though the the attribute comes to be true but doesn't enter into the if condition for setting the class.what could be the issue??

Answer 1

Your datatype is local. The important part here is how is defined your data field isBaseCompany . If the data field is string the condition should be done if it is json definition then you just need to compare

if (rd.isBaseCompany) { 
    // do something
}

or more strictly

if (rd.isBaseCompany === true ) { 
    // do something
}

i.e isBaseCompany is a boolean and not string