I try to groupe my records using jQgrid but it does not work correctly as you can see from linke below
As you can see from picture above, records are not properly grouped . The code I am using is as below :
$(document).ready(function () {
$('#ProductProductInventoryGrid').jqGrid({
colNames: ["Id","Date","Category","Code", "Name","Total Quantity","Total Weigth","Unit","UsedW","UsedQ"],
colModel: [
{ name: 'CatId', index: 'CatId', width: 5, sortable: true, align: "left", formatter: 'string',hidden: false },
{ name: 'InventoryDate', index: 'InventoryDate', width: 50, align: "left", sortable: true, search: false },
{ name: 'CategoryName', index: 'CategoryName', width: 150, sortable: false, align: "left", search: false, searchoptions: { sopt: ['cn', 'ne', 'eq'] }, formatter: 'string' },
{ name: 'ProductCode', index: 'ProductCode', width: 180, sortable: true, align: "left", search: false, formatter: 'string' },
{ name: 'ProductName', index: 'ProductName', width: 120, sortable: true, align: "left", search: true, searchoptions: { sopt: ['cn', 'ne', 'eq'] }, formatter: 'String' },
{ name: 'TotalQuantity', index: 'TotalQuantity', width: 60, sortable: true, align: "center", search: false, sorttype: 'number', formatter: 'number', summaryType: 'sum' },
{ name: 'TotalWeight', index: 'TotalWeight', width: 80, sortable: true, align: "right", search: false, sorttype: 'number', formatter: 'number', summaryType: 'sum' },
{ name: 'UnitMeasureCode', index: 'UnitMeasureCode', width: 60, sortable: true, align: "right", search: false, formatter: 'string' },
{ name: 'UsedWeight', index: 'UsedWeight', width: 60, sortable: true, align: "right", search: false, sorttype: 'number', formatter: 'number', summaryType: 'sum' },
{ name: 'UsedQuantity', index: 'UsedQuantity', width: 60, sortable: true, align: "center", search: false, sorttype: 'number', formatter: 'number', summaryType: 'sum' }
],
grouping: true,
groupingView : {
groupField: ['CatId'],
groupColumnShow : [false],
groupText : ['<b>{0}</b>'],
groupCollapse : false,
groupOrder: ['asc'],
groupSummary : [true],
showSummaryOnHide: true,
groupDataSorted : true
},
footerrow: true,
userDataOnFooter: true,
url: ServerBaseURL + "dashboard/getProductInventory",
mtype: 'GET',
cache: false,
datatype: 'json',
caption: "",
sortname: 'ProductName',
sortorder: "asc",
emptyrecords: '@Resources.lblNoData',
autowidth: false,
width: 1100,
shrinkToFit: true,
autoheight: true,
height: 'auto',
rownumbers: false,
altRows: true,
altclass: 'myAltRowClass',
multiselect: false,
viewrecords: true,
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
userdata: "userdata"
}
});
Thnaks for help regards
More info :
I have try to use fiddle as suggested in comment but could not get teh grid display data. not si sued to fiddle so do not know what could be wrong. here is below my return sample data :
var serverResponse = {
"rows":[
{ "CatId" :"3", "InventoryDate":"24/11/2015 15:08:00", "CategoryName":"MECHES", "ProductCode":"50F207229#434299004", "ProductName":"MECHE LENTE", "TotalQuantity":" 8", "TotalWeight":"0,0000", "UnitMeasureCode":"Pcs", "UsedQuantity":"4", "UsedWeight ":"0,0000", "Weight":"0,00", "RemainingQuantity":"0", "RemainingWeight":"0,0000" },
{ "CatId":"1", "InventoryDate":"24/11/2015 12:12:00", "CategoryName":"EXPLOSIFS", "ProductCode":"50F300440#151026E3170400596", "ProductName": "EURONIX", "TotalQuantity":"16", "TotalWeight":"25,0000", "UnitMeasureCode":"Kg" , "UsedQuantity":"0", "UsedWeight":"0,0000", "Weight":"25,00", "RemainingQuantity":"16", "RemainingWeight":"25,0000" },
{ "CatId":"1", "InventoryDate":"24/11/2015 11:09:00", "CategoryName":"EXPLOSIFS", "ProductCode":"50F300440#151026E3170500598", "ProductName":"EURONIX", "TotalQuantity":"16", "TotalWeight":"25,0000", "UnitMeasureCode":"Kg" , "UsedQuantity":"0", "UsedWeight":"0,0000", "Weight":"25,00", "RemainingQuantity":"16", "RemainingWeight:""25,0000" },
{ "CatId":"1", "InventoryDate":"24/11/2015 11:09:00", "CategoryName":"EXPLOSIFS", "ProductCode":"50F300440#151026E3170500599", "ProductName":"EURONIX", "TotalQuantity":"16", "TotalWeight":"25,0000", "UnitMeasureCode":"Kg ", "UsedQuantity":"0", "UsedWeight":"0,0000", "Weight":"25,00", "RemainingQuantity":"16", "RemainingWeight":"25,0000" },
{ "CatId":"1", "InventoryDate":"24/11/2015 11:09:00", "CategoryName":"EXPLOSIFS", "ProductCode":"50F300440#151026E3170500600", "ProductName":"EURONIX", "TotalQuantity":"16", "TotalWeight":"25,0000", "UnitMeasureCode":"Kg" , "UsedQuantity":"5", "UsedWeight":"7,8125", "Weight":"25,00", "RemainingQuantity":"6", "RemainingWeight":"17,1875" },
{ "CatId":"1", "InventoryDate":"24/11/2015 11:09:00", "CategoryName":"EXPLOSIFS", "ProductCode":"50F300440#151026E3170600601", "ProductName:":"EURONIX", "TotalQuantity":"16", "TotalWeight":"25,0000", "UnitMeasureCode":"Kg" , "UsedQuantity":"0", "UsedWeight":"0,0000","Weight":"25,00", "RemainingQuantity":"16", "RemainingWeight":"25,0000" },
{ "CatId":"1", "InventoryDate":"24/11/2015 11:09:00", "CategoryName":"EXPLOSIFS", "ProductCode":"50F300440#151026E3170600602", "ProductName":"EURONIX", "TotalQuantity":"16", "TotalWeight":"25,0000", "UnitMeasureCode":"Kg" , "UsedQuantity":"0", "UsedWeight":"0,0000", "Weight":"25,00", "RemainingQuantity":"16", "RemainingWeight":"25,0000"},
{ "CatId":"1", "InventoryDate":"24/11/2015 11:09:00", "CategoryName":"EXPLOSIFS", "ProductCode":"50F300440#151026E3170700603", "ProductName":"EURONIX", "TotalQuantity":"16", "TotalWeight":"25,0000", "UnitMeasureCode":"Kg" , "UsedQuantity":"0", "UsedWeight":"0,0000", "Weight":"25,00", "RemainingQuantity":" 16", "RemainingWeight":"25,0000" },
{ "CatId":"1", "InventoryDate":"24/11/2015 11:09:00", "CategoryName":"EXPLOSIFS", "ProductCode":"50F300440#151026E3170700604", "ProductName":"EURONIX", "TotalQuantity":"16", "TotalWeight":"25,0000", "UnitMeasureCode":"Kg" , "UsedQuantity":"0", "UsedWeight":"0,0000","Weight":"25,00", "RemainingQuantity":"16", "RemainingWeight":"25,0000" },
{ "CatId":"1", "InventoryDate":"24/11/2015 11:09:00", "CategoryName":"EXPLOSIFS", "ProductCode":"50F300440#151026E3170700605", "ProductName":"EURONIX", "TotalQuantity":"16", "TotalWeight":"25,0000", "UnitMeasureCode":"Kg" , "UsedQuantity":"0", "UsedWeight":"0,0000", "Weight":"25,00", "RemainingQuantity":" 16", "RemainingWeight":"25,0000" },
{ "CatId":"1", "InventoryDate":"24/11/2015 11:09:00", "CategoryName":"EXPLOSIFS", "ProductCode":"50F300440#151026E3170800606", "ProductName":"EURONIX", "TotalQuantity ":"16", "TotalWeight":"25,0000", "UnitMeasureCode":"Kg" , "UsedQuantity":"0", "UsedWeight":"0,0000", "Weight":"25,00", "RemainingQuantity":"16", "RemainingWeight":"25,0000" },
{ "CatId":"2", "InventoryDate":"24/11/2015 13:18:00", "CategoryName":"DETONATEURS", "ProductCode":"12640#143290051681", "ProductName":"PYRO ERIKA", "TotalQuantity":"100", "TotalWeight":"0,0000", "UnitMeasureCode":"Pcs", "UsedQuantity":"90", "UsedWeight":"0,0000", "Weight":"0,00", "RemainingQuantity":"80", "RemainingWeight":"0,0000 "},
{ "CatId":"3", "InventoryDate":"24/11/2015 15:12:00", "CategoryName":"MECHES", "ProductCode":"50F207229#434299005", "ProductName":"MECHE LENTE", "TotalQuantity":" 8", "TotalWeight":"0,0000", "UnitMeasureCode":"Pcs", "UsedQuantity":"3", "UsedWeight":"0,0000", "Weight":"0,00", "RemainingQuantity":"2", "RemainingWeight":" 0,0000" },
{ "CatId":"3", "InventoryDate":"24/11/2015 15:14:00", "CategoryName:":"MECHES", "ProductCode":"50F207229#434299006", "ProductName":"MECHE LENTE", "TotalQuantity":" 8", "TotalWeight":"0,0000", "UnitMeasureCode":"Pcs", "UsedQuantity":"0", "UsedWeight":"0,0000", "Weight":"0,00", "RemainingQuantity":"8", "RemainingWeight":" 0,0000"},
{ "CatId":"3", "InventoryDate":"24/11/2015 15:15:00", "CategoryName":"MECHES", "ProductCode":"50F207229#434299007", "ProductName":"MECHE LENTE", "TotalQuantity":" 8", "TotalWeight":"0,0000", "UnitMeasureCode":"Pcs", "UsedQuantity":"2", "UsedWeight":"0,0000", "Weight":"0,00", "RemainingQuantity":"4", "RemainingWeight":" 0,0000" },
{ "CatId":"2", "InventoryDate":"27/11/2015 19:40:00", "CategoryName":"DETONATEURS", "ProductCode":"UN0360#H34122", "ProductName":"LIGNE DE TIR NONEL", "TotalQuantity":" 120", "TotalWeight":"0,0000", "UnitMeasureCode":"Pcs", "UsedQuantity":"0", "UsedWeight":"0,0000", "Weight":"0,00", "RemainingQuantity":"120", "RemainingWeight":"0,0000" }
]
};
$("#jqGrid").jqGrid({
url: "/echo/json/", // use JSFiddle echo service
postData: {
json: JSON.stringify(serverResponse) // needed for JSFiddle echo service
},
mtype: "POST", // needed for JSFiddle echo service
datatype: "json",
colModel: [
{ label: 'CatId', name: 'CatId', key: true, width: 10 },
{ label: 'InventoryDate', name: 'InventoryDate', width: 70 },
{ label: 'ProductName', name: 'ProductName', width: 150 },
{ label: 'RemainingQuantity', name: 'RemainingQuantity', width: 150 }
],
loadonce:true,
viewrecords: true,
rowList: [20,30,50],
width: 780,
height: 250,
rowNum: 20,
sortname: 'ProductName',
grouping: true,
groupingView: {
groupField: ["CatId"],
groupColumnShow: [true],
groupText: [
"CatId: <b>{0}</b>"
],
groupOrder: ["asc"],
groupSummary: [true],
groupSummaryPos: ['header'],
groupCollapse: false
}
});
Your demo not works because of syntax error. The usage of
"RemainingWeight:""25,0000"
need be fixed to
"RemainingWeight":"25,0000"
Additionally you need remove unneeded wrapping to rows. The fixed code is https://jsfiddle.net/OlegKi/zqLp4yrg/
One can see that the server returns unsorted data, but the data needed be sorted by groupField (["CatId"] in your case).
You can fix the problem by usage datatype: "local" for example: https://jsfiddle.net/OlegKi/zqLp4yrg/1/ or by returning correct sorted data from the server.