I have a jqGrid which I load with JSON Data from a Java Spring backend. We do this for some jqGrids already, but I have added grouping to this new grid. So far it just groups one level, and on the initial load it does this fine.
Later we will allow the user to change one field in a row, we don't need editing other than that, and that will be a popup with a list of values to choose from.
The problem shows up when the user enters new search parameters and clicks the search button -- the system takes the parameters and returns a new dataset, which I then want to appear in the (or a) grid just as the first dataset does. My first little test dataset was 3 records, the search I've been testing with returns 9 records; what the grid does is display 3 of the nine records in the places where the three original records appeared. I note that the groupings are still in place and are then wrong, i.e., the groups no longer reflect the data.
I finally set grouping:false on the jqGrid setup parameters; then the 3 records appeared correctly without grouping, and the 9 records also appeared correctly. I tried setting grouping:false before the searched data was put in the grid and setting it back afterwards, but that still leaves me with 3 of 9 records displayed. So what I'm doing at the moment is:
function processSearchSubmit() {
// show the dialog indicating a new search is underway.
$(".progressDialog").dialog({
bgiframe: true,
title: 'Progress Dialog',
modal: true,
width: "550px",
autoOpen: false,
closeOnEscape: false,
dialogClass: 'dlg-no-close'
});
$(".progressDialog").dialog('open');
setTimeout(function() { // we set a timeout so that IE will display the progress dialog just opened
$.ajax({
url: "/blah/blah/getDataList",
type:'POST',
data: {searchDetails:getSearchDetails()},
dataType: 'json',
emptyrecords: "No records to view",
loadtext: "Loading...",
async: false,
error: function(xhrInstance, status, e){
//alert("error data got back; status ==>" + status);
console.log("error data got back; status ==>" + status);
console.log("error data got back; e ==>" + e);
$(".progressDialog").dialog('close');
return false;
},
//process the response. send event to parent to refresh the whole screen.
success: function(gridData){
var listGrid = $('#listGrid');
$('#listGrid').clearGridData(true);
$('#listGrid').jqGrid('setGridParam', {grouping: false});
$('#listGrid').jqGrid('setGridParam', {data: gridData.rows});
$('#listGrid').trigger('reloadGrid');
listGrid.jqGrid('groupingGroupBy', "salesManager",
{
groupColumnShow: [true]
,groupText: ["<b>{0}</b>"]
,groupOrder: ["asc"]
,groupSummary: [true] // will use the "summaryTpl" property of the respective column
,groupCollapse: false
,groupDataSorted: true
,formatDisplayField: [function(curValue, srcValue, colModelOption, grpIndex, grpObject) {
return srcValue.toFixed(2);
}]
}
);
$('#listGrid').jqGrid('setGridParam', {grouping: true});
$('#listGrid').jqGrid('setGridParam', {userData:gridData.userdata}); // set filterText into param on grid
// because 'search' is implemented as an ajax call returning its 'gridData', the
// "filter text description" (a string describing search parameters, such as "Last 60 days, created by rcook")
// is obtained from that data with the following statement. When the list page is loaded
// with the initialization of the grid itself ($("#listGrid").jqGrid(getGridSettings());, where
// getGridSettings() uses a URL to obtain JSON data to load the grid), we use the jqGrid 'userData'
// parameter to store the filter text, and therefore other code loads this string differently.
$("#filterTextDesc").html(gridData.filterTextDesc);
$(".progressDialog").dialog('close');
}
});
}, 1);
This is in addition to the grouping specs on the initial jqGrid setup as well, of course.
What I'm looking for is an easier way to do this. This way, I'll have to duplicate the grouping settings, once at jqGrid setup and another time any time the data changes. I'd really like to have ONE place where I can put JSON data into the grid -- right now I return one JSON structure the first time the grid is loaded and another one when the user does a search. But I'll take a simpler solution fo the grouping issue by itself, if one's available.
I've tried the solution from Oleg's comment, and am seeing the same thing; when the grid is first loaded, it has 3 records, grouped as I expect. When I do a new search with the backend and attempt to reload the grid with the new data, the gropuing headers stay in place, and the three records are replaced with 3 of the 9 records returned in JSON to the 'success' option on the Ajax call. I've tried two things for reloading:
var listGrid = $('#listGrid');
var params = listGrid.jqGrid("getGridParam");
params.data = gridData.rows;
listGrid.trigger("reloadGrid");
and
var listGrid = $('#listGrid');
listGrid.jqGrid("setGridParam", {datatype: 'local', data: gridData.rows}, true);
listGrid.trigger("reloadGrid");
and they both have the same effect as each other, and the same as I was getting before when I was using "setGridParam" incorrectly. I'd welcome other ideas.
Also: stopping in the Firefox JS debugger after the "setGridParam" call, gridData shows as an object with 'rows' and 'userdata' fields, and the rows field shows an array of 9 objects. gridData.rows[0] shows a row with the newly loaded info. When I step past 'clearGridData()' the grid on the browser empties, and when I step past "reloadGrid" the old data appears on the grid.
