jqgrid conditional formatting.

I'm trying to add conditional formatting to jqgrid using after insert row. However nothing seems to be happening. I've used afterInsertRow in the past and it's worked. Any suggestions?

jQuery("#gridDevicePlan").jqGrid
    ({ 
        url:'/dashboard/summarydeviceplans', 
        datatype: "json", 
        colNames:['Temporal','Short Name','Customer', 'Start', 'End', 'Duration', 'Device Count'], 
        colModel:[  {name:'Temporal',index:'Temporal'},
                    {name:'ShortName',index:'ShortName'},
                    {name:'Customer',index:'Customer'},
                    {name:'DateStart',index:'DateStart',formatter:'date', formatoptions:{srcformat:'Y-m-d H:i:s', newformat:'m/d/Y H:i'}},
                    {name:'DateStop',index:'DateStop',formatter:'date', formatoptions:{srcformat:'Y-m-d H:i:s', newformat:'m/d/Y H:i'}}, 
                    {name:'Duration',index:'Duration'},
                    {name:'DeviceCount',index:'DeviceCount'}
                    ],
        //multiselect: true,  
        rowNum:10, 
        rowList:[10,50,100,300],
        //autowidth: true,
        autowidth: true,
        height: 'auto', 
      开发者_如何转开发  pager: '#pagerDevicePlan', 
        sortname: 'ShortName,Customer,DateStart', 
        mtype: "POST", 
        editurl:'/deviceplan/abort',   
        postData:{'deviceIDs[]':$('#device').val(), 
                  'timezone':<?="'".$this->criteria['timezone']."'"?>,
                  'gmtStartDate':<?="'".$this->criteria['gmtStartDate']."'"?>,
                  'gmtStopDate':<?="'".$this->criteria['gmtStopDate']."'"?>           
                 },
        viewrecords: true,
        sortorder: "asc",
        grouping: true,
        caption:false, 
        afterInsertRow: function(rowid, aData) {  //set condiditonal formatting
            alert(aData.Temporal);
            if(aData.Temporal != 'Current'){
             $("#"+rowid).addClass("ui-state-error");
            }
        } 
    }); 
    jQuery("#gridDevicePlan").jqGrid('navGrid','#pagerDevicePlan',{edit:false,add:false,del:false});

I recommend you never use afterInsertRow. Instead of that you should always use gridview: true parameter which increase performance of jqGrid without any disadvantages. If you use gridview: true the filling of the grid body will be first constructed as a string represented the corresponding HTML fragment and then the body will be placed on the page as one operation. You can't use gridview: true together with afterInsertRow. If you use afterInsertRow the rows of the grid will be placed on the page sequentially and then will be called afterInsertRow after every row adding. Placing of any element of the page require that the web browser need to recalculate all position of all elements on the page. Which make the filling of the grid much slowly.

What you should to do instead is to enumerate the grid rows inside of loadComplete and add "ui-state-error" class to some rows of the grid. By the way the call $("#"+rowid).addClass("ui-state-error"); is also ineffective in the loop. The <table> DOM element (jQuery("#gridDevicePlan")[0] or this inside of loadComplete) has rows property which are very effective for row enumeration. It you do have to find table/grid row by rowid you can use another DOM method namedItem of the rows. It find the row in the grid more effectively.

The solution of your main question you will find here. The corresponding demo work very quickly even if the grid has relatively many rows.