877-GRID-666 24/7 online support 604, Tower A, New Trade Plaza, N.T., Hong Kong

Conditional Formatting with Custom Javascript

What would you do if you need more than set_conditional_format() and set_conditional_value() for conditional display such as comparing two cells and set background of another cell based on the results? The answer is custom javascript.

The following snippet demonstrates how to use event handler to compare values between datagrid cells. Finally it changes another cell’s background color to gold.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$onGridLoadComplete = <<<ONGRIDLOADCOMPLETE
function(status, rowid)
{
    var ids = jQuery("#orders").jqGrid('getDataIDs');
    for (var i = 0; i < ids.length; i++)
    {
        var rowId = ids[i];
        var rowData = jQuery('#orders').jqGrid ('getRowData', rowId);

        var requiredDate = new Date($("#orders").jqGrid("getCell", rowId, "requiredDate"));
        var shippedDate = new Date($("#orders").jqGrid("getCell", rowId, "shippedDate"));

        // compare two dates and set custom display in another field "status"
        if(requiredDate < shippedDate){
           
            $("#orders").jqGrid("setCell", rowId, "status", '', {'background-color':'gold'});
               
        }
    }

}
ONGRIDLOADCOMPLETE
;

$dg = new C_DataGrid("SELECT * FROM orders", "orderNumber", "orders");
$dg->set_col_hidden('comments');
$dg->add_event("jqGridLoadComplete", $onGridLoadComplete);

$dg -> display();

Launch Demo!