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;
}
