The afterInsertRow : function(ids) method is not executing when I use gridview:true

Question

When I set gridview to true (gridview:true) in our jqGrid to increase the performance of jqGrid, the method like afterInsertRow, or other similar methods are not executed. Following is the code of my jgGrid:

jQuery("#displaylistGrid").jqGrid({
    url: contextRoot + '/StandardProxy/displayListService?userRole='+
         userRole+'&userName='+userName+'&userId='+userId+
         '&duration='+displayDuration+'&wicNo='+wicNo+
         '&displayName='+dlDisplayName+'&displayNameArr='+displayNameArr+
         '&pointValue='+pValue+'&locationId='+locId+'&locationCode='+
         locCode+'&serviceType=forecast',
    datatype: 'json',
    colNames: ["CM Name", "Display ", "Loc. Pt.","Max. Ben." ,"Display Name",
               "Items w/Fcst", "Units", "Sales $", "Profit $", "GP%", "Units",
               "Sales $", "Profit $", "GP%","Hidden","Hidden1","Hidden2",
               "Start Date and End Date", "Hidden4"],
    colModel: [
        { name: "cm_name",      index: "cm_name",     sorttype: "text", width: 120,
          resizable: true },
        { name: "ds_location",  index: "ds_location", sorttype: "text", width: 120,
          resizable: true },
        { name: "ds_symbol",    index: "ds_symbol",   sorttype: "text", width: 50,
          align: "center",      resizable: true },
        { name: "ds_benchMark", index: "ds_benchMark",sorttype: "text", width: 50,
          align: "center",      resizable: true },
        { name: "ds_name",      index: "ds_name",     sorttype: "text", width: 230,
          resizable: true },
        { name: "ds_ItemFrcst", index: "ds_ItemFrcst",sorttype: "int",  width: 60,
          align: "center",      resizable: true,
          unformat: addDemoninatorSortingFormatter },
        { name:"ds_units_promo",index:"ds_units_promo",sorttype:"float",width: 85,
          align: "right",       unformat : spaceFormatter },
        { name:"ds_sales_promo",index:"ds_sales_promo",sorttype:"float",width: 95,
          align: "right",       unformat : spaceFormatter },
        { name: "displaylistGrid_ds_profit_promo",
          index: "displaylistGrid_ds_profit_promo",
          sorttype: "float",    width: 95,             align: "right",
          unformat : spaceFormatter },
        { name:"ds_gp_pct_promo",index:"ds_gp_pct_promo",sorttype:"int",width: 50,
          align: "right",       unformat : spaceFormatter },
        { name: "ds_units_per_store_week",
          index: "ds_units_per_store_week",            sorttype:"float",width: 85,
          align: "right",       unformat : spaceFormatter },
        { name: "ds_sales_per_store_week",
          index: "ds_sales_per_store_week",
          sorttype: "float",    width: 90,             align: "right",
          unformat : spaceFormatter },
        { name: "ds_profit_per_store_week",
          index: "ds_profit_per_store_week",
          sorttype: "float",    width: 90,             align: "right",
          unformat : spaceFormatter },
        { name: "ds_gp_pct_per_store_week",
          index: "ds_gp_pct_per_store_week",
          sorttype: "float",    width: 40,             align: "right",
          unformat : spaceFormatter  },
        { name: "hidden1",      index: "hidden1",      sorttype: "int",
          align: "center",      hidden: true },
        { name: "hidden2",      index: "hidden2",      sorttype: "text",
          align: "center",      hidden: true },
        { name: "hidden3",      index: "hidden3",      sorttype: "int",
          align: "center",      hidden: true },
        { name:"forecast_dates",index:"forecast_dates",sorttype: "text",
          align: "center",      hidden: true },
        { name: "hidden4",      index: "hidden4",      sorttype: "text",
          align: "center",      hidden: false }
    ],
    onSelectRow: function(ids){ 
        //checkDisplayDetail();
        //setDefaultValuesToTheSortingParams();
        var dropDownVal = document.getElementById("displayDetailSelection").value;
        var subTabName = document.getElementById("detailSubTabName").value;
        if(subTabName=="Active")
            dropDownVal = document.getElementById("displayDetailActiveSelection").value;
         reLoadDisplayDetailData(ids,'forecast',dropDownVal,subTabName);
    },
    afterInsertRow : function(ids) {  // shows custom tooltip
        var customToolTip = jQuery("#displaylistGrid").getCell(ids,'ds_name') +
                     " -- " + jQuery("#displaylistGrid").getCell(ids,'hidden4');
        $("#displaylistGrid").setCell(ids,'ds_name', '','',{title:customToolTip}); 
    }, 
    gridComplete : function(){
        if($("#isForecastedSalesGridLoaded").val()=="no"){
            $("#jqgh_displaylistGrid_ds_profit_promo").click();
        }
        else{
            $("#isForecastedSalesGridLoaded").val("no");
        }
    },
    onSortCol : function(){
        $("#isForecastedSalesGridLoaded").val("yes");
    },
    width: 983,
    rowNum: 999,
    height: eval(heightOfDispListGrid()+7),
    toolbar: [true, "top"],
    viewrecords: true,
    treeIcons: {leaf: "ui-icon-document-b"},
    treeGrid: true,
    treeGridModel: 'nested',
    ExpandColumn : 'Description',
    ExpandColClick: true,
    loadonce:false,
    refresh : true,
    shrinkToFit: true,
    gridview:true,         
    sortorder:"asc",
    sortname:"displaylistGrid_ds_profit_promo"
});

Following is the code of afterInsertRow method:

afterInsertRow : function(ids) {  // shows custom tooltip
    var customToolTip = jQuery("#displaylistGrid").getCell(ids,'ds_name') + " -- " +
                        jQuery("#displaylistGrid").getCell(ids,'hidden4') ;
    $("#displaylistGrid").setCell(ids,'ds_name', '','',{title:customToolTip}); 
}, 

The preceding code is used to show customize tool tip. Please suggest me what I am doing wrong.

Please help me

Thanks, DISMGMT

Answer 1

The sense of the usage of gridview:true is following. In the "gridview" mode the most grid contain will be created as a string. To be exactly one builds an array of substrings with HTML markup for every grid row, one creates one string from the string array with respect of join('') and only then one creates an DOM object represented the grid. It improves the performance not only because of better working with the long strings (join('')), but because of reducing working with DOM objects which is much slowly as working with strings.

So I recommend you not use afterInsertRow at all. Instead of that you can successfully do the same with respect of the following code

var myGrid = jQuery("#displaylistGrid");
var ids = myGrid.jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
    var id=ids[i];
    var customToolTip = myGrid.jqGrid('getCell',ids,'ds_name') + " -- " +
                        myGrid.jqGrid('getCell',ids,'hidden4');
    myGrid.jqGrid('setCell',ids,'ds_name', '','',{title:customToolTip});
}

which you can include in the gridComplete or loadComplete.

The best performance you will archive using custom formatter for the column ds_name where you want to set the custom tooltip. The implementation is pretty simple because your custom formatter will receive as the rowObject parameter the row of the server data in the same form like it will be received from the server (as array or as an object). The properly hidden4 will be immediately accessible (I recommend you to read this answer for more details).

UPDATED: The answer is very old. jqGrid provides many alternative implementation ways which are much better from the performance point of view. Every change on the page follows browser reflow. So the usage of setCell in the loop is not effective. Much better is the usage of cellattr or rowattr and to continue to use gridview: true which advantages are described in the answer.

The answer demonstrates very effective way to set title on the cell using cellattr instead of setCell used in the current answer. Another answer provide one more common example to use cellattr. To set attributes of the rows of the grid one can use rowattr callback. See the answer for the code example.