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

Question

When I set gridview to true (gridview: true) in our jqGrid to improve jqGrid performance, a method like afterInsertRow or other similar methods are not executed. Below 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" }); 

The following is the code for the 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 previous code is used to display a custom tooltip. Please suggest me what I am doing wrong.

Please help me

Thanks DISMGMT

Answer 1

The meaning of using gridview:true as follows. In gridview mode, most of the grid will be created as a row . To be exactly one, it builds an array of substrings with HTML markup for each grid line, one creates one row from the array of strings with respect to join('') , and only then a DOM object representing the grid is created. This improves performance not only because of the better work with long strings ( join('') ), but also because of the decrease in work with DOM objects that work very slowly with strings.

Therefore, I recommend that you do not use afterInsertRow at all. Instead, you can do the same with 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 gridComplete or loadComplete .

The best performance you'll be archiving using a custom formatter for the ds_name column, where you want to set a custom tooltip. The implementation is quite simple because your custom formatter will receive a row of server data as the rowObject parameter in the same form as receiving it from the server (as an array or as an object). Properly hidden4 will be immediately available (I recommend that you read this answer for more details).

UPDATED . The answer is very old. jqGrid provides many alternative implementation methods that are much better in terms of performance. Each change on the page follows the browser reflow . Therefore, using setCell in a loop is inefficient. It is much better to use cellattr or rowattr and continue to use gridview: true , the benefits of which are described in.

The answer demonstrates a very efficient way to set the title in a cell using cellattr instead of setCell used in the current answer. Another answer is another example of using cellattr . You can use the rowattr callback to set grid row attributes. See the answer for sample code.

Answer 2

Note: this event does not fire if gridview is set to true.

I had a similar problem by reading the jqgrid wiki, I thought of giving a link to the document if someone else is facing the same problem.