how to set jqgrid cell color at runtime

i am populating a jqgrid from database and one of its columns is a color column like red, blue, etc. Can i set the cell color of this column based on the value coming from database at run time? how should i set 开发者_如何学Goformatter in this case? i tried like this but do not work

var colorFormatter = function(cellvalue, options, rowObject) {
        var colorElementString = '<div class="colorBlock" style="background-color: red;"></div>';
        return colorElementString;
---
---
colModel: [
                { name: 'GroupName', index: 'GroupName', width: 200, align: 'left' },
                { name: 'Description', index: 'Description', width: 300, align: 'left' },
                { name: 'Color', index: 'Color', width: 60, align: 'left', formatter: colorFormatter}],

Add a load complete call to a function that formats the colors:

loadComplete: function (data) {
    $.each(data.rows, function (i, item) {
        var rowId = data.rows[i].id || data.rows[i]._id_;
        var myRow = new Array(item.valueOf());

        jQuery('#' + grid).setCell(rowId, colName, '', { background: 'red'});
    });
}

You just need to add the code to check for the conditions you want to apply.

I am changing the background color for the row based on status ("status" is the data column). Hope this might help. Here is the sample code:

<style>
    .state_inactive {
        background-color:##FF9999 !important;
        border:1px solid ##A6C9E2;
        color:##222222;
    }
</style>

<script type="text/javascript">
    $j("#Grid").jqGrid({
        url:"getData.php",
        datatype:"json",
        colNames:['Name', 'Organization', 'Status'],
        colModel:[{name:'name', index:'name'}, {name:'organization', index:'organization'}, {name:'status', index:'status'}],
    },
    gridComplete:function() {
        var ids = jQuery("#Grid").jqGrid('getDataIDs');

        for (var i = 0; i < ids.length; i++) { 
            var status = jQuery("#Grid").jqGrid("getCell", ids[i], 'status');

            if (status == "-20") {
                $j('#' + ids[i]).removeClass("ui-widget-content");
                $j('#' + ids[i]).addClass("state_inactive");
            }
        }
    })
</script> 

Looks like a design flaw of jqgrid.

The best way is to implement this during loading and the custom formatter only has a value where you can do this. But you need to do this not on the value, but on the div or span that is in front of it.