Question

I am trying to manipulate the data fetched from the server in loadComplete event:

loadComplete:function(data){
    alert("load completed");
    $.each (data,function(index,item){

    item["customerSite"]=item.header.customerName + ' / '+item.header.siteDescription;
    });
}

The newly added field is meant to be used as a column to be grouped by
However I keep getting this column as undefined as grouping header. I tried adding another field to the JSON object as a regular column, the column ends up to be empty. As I was debugging I noticed the grid is constructed before my breakpoint in the loadComplete stops.

My understanding of the loadComplete event is that it will fired as soon as the ajax call has success return. After I introduced gridComplete event to my code, I noticed gridComplete is invoked before loadComplete is invoked.

gridComplete: function(){ 
    alert("grid completed");
}

What I am doing wrong? I am using

            jsonReader: {
                repeatitems: false,
                id: "id",
                root: function (obj) { return obj; },
                page: function (obj) { return 1; },
                total: function (obj) { return 1; },
                records: function (obj) { return obj.length; }
            }

to process returned JSON string, but cannot imagine that might be the problem. Please help!

Base on Oleg’s comment, I will use custom formatter. However the result of the fomratter does not work for the group header, which this column is for. If I set groupColumnShow : [true], the column’s data is all correct, but still leaves the group header to be ‘undefined’

Following grid’s definition:

buildGrid:function(){
        var myGrid = jQuery("#serverList");

        myGrid.jqGrid({

        datatype: "json",
        url: "http://localhost:8080/cm.server/api/v1/agent/config.json?",
        jsonReader: {
            repeatitems: false,
            id: "id",
            root: function (obj) { return obj; },
            page: function (obj) { return 1; },
            total: function (obj) { return 1; },
            records: function (obj) { return obj.length; }
        },              
        colNames:['Customer/Site','Customer','Site','Server ID', 'Server Name', ,'id'],

        colModel :[ 
              {name:'customerSite',editable:false, formatter:that.buildCustmerSite},   
              {name:'header.customerName',hidden:true,editable:true,editrules:{edithidden:true},editoptions:{readonly:true,size:25},formoptions:{ rowpos:1,elmprefix:" "}},

              {name:'header.siteDescription', hidden:true, editable:true,editrules:{edithidden:true},editoptions:{readonly:true,size:25},formoptions:{ rowpos:2,elmprefix:" "}},         

              {name:'header.serverID', index:'header.serverID', width:200, align:'right',editable:true,editoptions:{readonly:true,size:25},formoptions:{ rowpos:3,elmprefix:" "}},

              {name:'header.serverName', index:'header.serverName', width:150, align:'right',editable:true,editoptions:{readonly:true,size:25},formoptions:{ rowpos:4,elmprefix:" "}},

              {name:'id', hidden:true},

            ],
            height: '500',
            width: '100%',
            rowNum:20,
            autowidth: true,
            pager: '#pager',
            sortname: 'serverID',
            sortorder: "desc",
            viewrecords: true,
            caption: 'Server Configurations',
            editurl:"/cm.server/api/v1/agent/config-grid",
            autoencode:true,
            ignoreCase:true,
            grouping:true,
            groupingView:{
                groupField:['customerSite'],
                groupColumnShow : [false]
            }
          });

      jQuery("#serverList").jqGrid('navGrid','#pager',
      {edit:true,add:false,del:false,search:true}, 
      {height:450,reloadAfterSubmit:true,  recreateForm:true,jqModal:true, closeOnEscape:true,  closeAfterEdit:true, bottominfo:"Fields marked with (*) are required"}, // edit options
            {} // search options
        );
      jQuery("#serverList").jqGrid('filterToolbar'); 
      return true;
    }

and following is the custom formatter:

buildCustmerSite:function(cellvalue,options,rowObject){
    var customerSite =rowObject.header['customerName'] + '/'+ rowObject.header["siteDescription"];
    return customerSite;
}

Answer 1

There are small differences between loadComplate and gridComplete, but both will be called after the grid contain is prepared. So you can’t just modify the data of the loadComplate to change the grid contain.

You don’t posted the definition of your grid, so it is difficult to answer on your question exactly. What you probably want can be solved with respect of the custom formatter which you can define for the customerSite column. Inside of formatter function you have access to rowObject where you find source information to construct the customerName + ‘ / ‘ + siteDescription.