JqGrid grouping not working

Question

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

Which version of jqGrid and which fork ([free jqGrid](https://github.com/free-jqgrid/jqGrid), [Guriddo jqGrid JS](http://guriddo.net/?page_id=103334) or an old jqGrid in version <=4.7) you use? You included very much properties in `colModel` and many unneeded options. Moreover you included `formatter: 'string'` and `formatter: 'String'` which are unknown. Could you create JSFiddle demo which reproduce the problem? If you need to load the data from the server you can use JSFiddle echo service like in the old demo https://jsfiddle.net/78m7jdaz/6/ for example. — Oleg, Dec 19 '15 at 14:56
you can remove `mtype`, `caption`, `sortorder`, `autowidth`, `shrinkToFit`, `autoheight`, `rownumbers`, `multiselect`, `jsonReader`. You can remove from all `colModel` items the properties `index`, `sortable: true`, `align: "left"`, `search: true` and so on. I think that `formatter: 'string'` and `formatter: 'String'` just wrong and there should be removed. You can reduce the code and to make it more readable by usage `template` property of the grid. See [the old answer](http://stackoverflow.com/a/6047856/315935). — Oleg, Dec 21 '15 at 10:19
I plhave use fiddle linke and parse my return data to see what the gris will return but could not get grid display. sorry not used to that fiddle so do not know what is wrong. — serge, Dec 21 '15 at 11:12

score 1 · Accepted Answer · answered Dec 21 '15 at 11:32

1

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.

answered Dec 21 '15 at 11:32

Oleg

220,925
34
403
798

Wowww thank you very much, did not know that records need to be sorted first before getting group. Did not know as well the tips with LocalData. Thanks a lot for your help – serge Dec 21 '15 at 16:33
@serge: You are welcome! I'm glad that I could help you. – Oleg Dec 21 '15 at 16:35
when I use "data: localdata" on my grid page I get a java script error saying localdata is undefined ??? I am using JqGrid version 4.4.3 – serge Dec 22 '15 at 15:51
@serge: Please don't use retro versions of software produces especially if you work on web development. If you really can't upgrade on the current free jqGrid 4.11.1 and have to use some retro version like 4.4.3 then you should write this **directly in your question**. – Oleg Dec 22 '15 at 16:20
I find the solution by doing the sorting at serve side. Thanks. Sorry I am not an exprt in jqgrid. just discover it and learning – serge Dec 22 '15 at 16:25
@serge: You are welcome! The most important the that problem seems be solved now. And no problem. All who ask the question is typically not exert in the subject of the question. Please just ask on the questions, which one ask you in comments. The question about the version and the fork should be written better in every question. – Oleg Dec 22 '15 at 17:26

JqGrid grouping not working

1 Answers1