Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JQGrid, change row background color based on condition

I have the following jqgrid that uses the jquery ui theme imported to my master page.

  $("#shippingscheduletable").jqGrid({
            url: $("#shippingscheduleurl").attr('href'),
            datatype: 'json',
            mtype: 'GET',
            altRows: true,
            colNames: ['Dealer', 'Model', 'Invoice', 'Date', 'PO', 'Serial', 'Status', 'City', 'State', 'IsPaid', 'Promo', 'Carrier', 'Int Notes', 'Ord Notes', 'Terms'],
            colModel: [
     { name: 'Company', index: 'id', width: 125, align: 'left' },
     { name: 'Model', index: 'Model', width: 50, align: 'left' },
     { name: 'Invoice', index: 'Invoice', width: 50, align: 'left' },
     { name: 'Date', index: 'OrderDate', width: 60, align: 'left' },
     { name: 'Po', index: 'PONum', width: 75, align: 'left' },
     { name: 'Serial', index: 'Serial', width: 50, align: 'left' },
     { name: 'Status', index: 'OrderStatus', width: 70, align: 'left' },
     { name: 'City', index: 'City', width: 100, align: 'left' },
     { name: 'State', index: 'State', width: 30, align: 'left' },
     { name: 'IsPaid', index: 'IsPaid', width: 30, align: 'left' },
     { name: 'Promo', index: 'Promo', width: 50, align: 'left' },
     { name: 'Carrier', index: 'Carrier', width: 80, align: 'left' },
     { name: 'InternalNotes', index: 'InternalNotes', width: 110, align: 'left' },
     { name: 'OrderNotes', index: 'OrderNotes', width: 110, align: 'left' },
     { name: 'Terms', index: 'Terms', width: 60, align: 'left' }
     ],
            pager: jQuery("#shippingschedulepager"),
            rowNum: 100,
            rowList: [100, 150, 200],
            sortname: 'Company',
            sortorder: "asc",
            viewrecords: true,
            height: '700px',
            multiselect: true
        });

I would like to change the row color for all rows that have a true value for the IsPaid Field. Is this possible? if so, how would I do this? I have been researching custom formatting, but I am unsure if this is the correct approach, as I cannot find anything about changing the color of the back ground.

like image 270
twal Avatar asked Oct 11 '10 16:10

twal


People also ask

How do I highlight a row in jqGrid?

You can select or highlight rows based on data using the queryCellInfo event or can also select a row using an external button click event. The queryCellInfo is triggered every time a request is made to access particular cell information, element and data.

What is rowNum in jqGrid?

jqGrid exposes a property rowNum where you can set the number of rows to display for each page.

What is jqGrid?

jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web.


2 Answers

Just for reference of others here is the completed code. I also found I needed to add another condition to change the color of the row. I needed to change the row color only when the paid field is true, and when the status is complete. This code shows that. It also fixed the problem of losing the formatting when the grid is reloaded when sorting the columns. I hope this helps someone else.

    var rowsToColor = [];
    jQuery(function () {
        $("#shippingscheduletable").jqGrid({
            url: $("#shippingscheduleurl").attr('href'),
            datatype: 'json',
            mtype: 'GET',
            altRows: true,
            colNames: ['Dealer', 'Model', 'Invoice', 'Date', 'PO', 'Serial', 'Status', 'City', 'State', 'Paid', 'Promo', 'Carrier', 'Int Notes', 'Ord Notes', 'Terms'],
            colModel: [
     { name: 'Company', index: 'id', width: 125, align: 'left' },
     { name: 'Model', index: 'Model', width: 50, align: 'left' },
     { name: 'Invoice', index: 'Invoice', width: 50, align: 'left' },
     { name: 'Date', index: 'OrderDate', width: 60, align: 'left' },
     { name: 'Po', index: 'PONum', width: 75, align: 'left' },
     { name: 'Serial', index: 'Serial', width: 50, align: 'left' },
     { name: 'Status', index: 'OrderStatus', width: 70, align: 'left' },
     { name: 'City', index: 'City', width: 100, align: 'left' },
     { name: 'State', index: 'State', width: 30, align: 'left' },
     { name: 'Paid', index: 'IsPaid', width: 30, align: 'left', formatter: rowColorFormatter },
     { name: 'Promo', index: 'Promo', width: 50, align: 'left' },
     { name: 'Carrier', index: 'Carrier', width: 80, align: 'left' },
     { name: 'InternalNotes', index: 'InternalNotes', width: 110, align: 'left' },
     { name: 'OrderNotes', index: 'OrderNotes', width: 110, align: 'left' },
     { name: 'Terms', index: 'Terms', width: 60, align: 'left' }
     ],
            pager: jQuery("#shippingschedulepager"),
            rowNum: 100,
            rowList: [100, 150, 200],
            sortname: 'Company',
            sortorder: "asc",
            viewrecords: true,
            height: '700px',
            multiselect: true,
            gridComplete: function () {
                for (var i = 0; i < rowsToColor.length; i++) {
                    var status = $("#" + rowsToColor[i]).find("td").eq(7).html();
                    if (status == "Complete") {
                        $("#" + rowsToColor[i]).find("td").css("background-color", "green");
                        $("#" + rowsToColor[i]).find("td").css("color", "silver");
                    }
                }
             }
        });
    });

    function rowColorFormatter(cellValue, options, rowObject) {
        if (cellValue == "True")
            rowsToColor[rowsToColor.length] = options.rowId;
        return cellValue;
    }

so the formatter function adds the rowid that needs to be changed to an array if the paid value is true, then when the grid is complete it changes the css for each row id, after it checks the value of the 7th td which is where my status is found to make sure it is complete.

like image 96
twal Avatar answered Sep 25 '22 20:09

twal


I tried this and works to set the background color for the entire row. Works with paging also:

gridComplete: function()
{
    var rows = $("#"+mygrid).getDataIDs(); 
    for (var i = 0; i < rows.length; i++)
    {
        var status = $("#"+mygrid).getCell(rows[i],"status");
        if(status == "Completed")
        {
            $("#"+mygrid).jqGrid('setRowData',rows[i],false, {  color:'white',weightfont:'bold',background:'blue'});            
        }
    }
}
like image 30
Anushka Avatar answered Sep 21 '22 20:09

Anushka