Question

My Response data looks like this

{"page":"1","total":"10","records":"8","message":null,"rowdata":
[{"status":null,"contactNo":null,"approvalStatus":null,"userInfoID":32,"userName":"bbb
1234","userFullName":"bbb 1234","profiles":[{"profileInfoID":10,"profileName":"Profile 
Ganda"},{"profileInfoID":15,"profileName":"Sample Profile 123"}]},
{"status":null,"contactNo":null,"approvalStatus":null,"userInfoID":28,"userName":
"yyyy1234","userFullName":"yyyy 1234","profiles":       
"profileInfoID":10,"profileName":"Profile Ganda"}]},.......]}

I have got the response using AJAX and passed the response data to the Jqgrid and set the data type as local and the code is given below.

function buildUserGridAttach(response){
var jq = jQuery.noConflict();  
 jq("#attachTable").jqGrid({
 url:"searchUsers.htm",
 data: response.rowdata, 
 datatype: "local",
 mtype:"post",
 width: 1100,
 height: "auto",
 rowNum: 5,
 rowList: [5, 10, 20],
 viewrecords: true,
 rownumbers: false,
 toppager: true,
 bottompager:true,
 pager: jQuery("#resultsPagerAttach"),
 sortname: "userName",
 sortorder: "asc",
 caption: "Search Results",
   // Specify the column names
   colNames: ["Select","User ID", "User Name", "Profiles"],
   // Configure the columns
   colModel: [
   { name: "userInfoID",hidden:true,index: "userInfoID",editable:true, width: 25},                           
   { name: "userName", index: "userName", width: 25, align: "left", search:true, sorttype:'text',title:false},
   { name: "userFullName", index: "userFullName", width: 25,  align: "left" ,search:false, sorttype:'text'},
   { name:"profiles", index:"profiles", width:60, editable: true,edittype:"select",editoptions:{multiple:true,width:50} },       
   ],

   // Grid total width and height
   autowidth: true,
   height: 300,       
   // Paging
   rownumbers: true,
   toppager: true,
   bottompager : true,
   pager: jq("#paging"),
   rowNum: 5,
   rowList: [5, 10, 20],
   viewrecords: true, // Specify if "total number of records" is

   // Default sorting
   sortname: "userName",
   sortorder: "asc",
   hidegrid: false,
   emptyrecords: "No records to view",

   // Grid caption
   caption: "Search Results", 
   multiselect:true,

   gridComplete: function() {
     var grid = jQuery("#attachTable");         
      jQuery.each(response.rowdata, function(ID,row) {
         var rowId = (ID+1);
         grid.editRow(rowId, true);
         var de = "<select  style='width: 150px;' name=" + rowId + " id=" + rowId + " multiple=true >";               
         jQuery.each(row.profiles, function(Id,profile ) {
              de = de + '<option value="' + row.userInfoID +  ":" + profile.profileInfoID + '">'+ profile.profileName+'</option>';  
          }); 
         de = de + '</select>';
       //  de = de + "<input type=hidden id='userInfoID' value='"+ row.userInfoID + "'>";
         jQuery("#attachTable").jqGrid('setRowData', rowId, { profiles: de });
         jQuery("#attachTable").jqGrid('setRowData', rowId, { userInfoID: row.userInfoID});
         jQuery("#attachTable").jqGrid('setRowData', rowId, { userName: row.userName });
         jQuery("#attachTable").jqGrid('setRowData', rowId, { userFullName: row.userFullName});
        }); 
   },   
   jsonReader : {root: "rowdata", page: "page", total: "total", records: "records", repeatitems: false, id: "userInfoID"}
 });   
}

The data is populated correctly and I am able to do all the manipulations on the grid. The problem initially I faced is I am not able to reload the grid with the new Data.
After reading a lot of forums, I have tried with

grid.jqGrid('clearGridData').jqGrid('setGridParam', { data: response.rowdata})
.trigger('reloadGrid', [{ page: 1}]);

The above command works good and the data is reloaded. But when the gridComplete function is called, the previous data overrides the new data. This error I found out after commenting out the gridComplete function.

I need to solve this. I have been working on this for the past 3 days.

My JqGrid table looks as below.

http://i49.tinypic.com/2n9fsx.png

Answer 1

Try use GridUnload and then build the same grid again. Do something like:

jQuery("#attachTable").jqGrid("GridUnload");
buildUserGridAttach(response);

This is brutal, but should be working.