CODEWITHSUNDEEP
javascriptjqgrid
Matt Murdock
Matt Murdock

Reputation: 169

How to sort the column by its summary value alone in jqgrid grouping

I have the code available here: https://jsfiddle.net/zqLp4yrg/41/

datatype is "local" not json. 

$("#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: 30 },
        { label: 'InventoryDate', name: 'InventoryDate', width: 70 },
        { label: 'ProductName', name: 'ProductName', width: 150 },
        { label: 'RemainingQuantity', name: 'RemainingQuantity', width: 150, summaryType: 'sum', sortable: true }

    ],
    iconSet: "fontAwesome",
    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: true
    }
});

In here I want to sort the Remaining quantity based on its summary value in header. Please help.

Upvotes: 0

Views: 375

Answers (1)

Oleg
Oleg

Reputation: 221997

Your demo has many small problems:

  • First of all you write about the usage of datatype is "local", but you use datatype: "json" in the demo. Moreover, you use no loadonce: true option and no forceClientSorting: true option. It means that the server is responsible for sorting the data. Moreover, if you use grouping, then the data returned from the server have to be sorted (on the server) by both groupingView.groupField (CatId in your case) and then by sortname (RemainingQuantity in your case). The data which you use as the source are not sorted correctly. One sees, for example, that jqGrid displays two CatId: 2 and two CatId: 3 groups.
  • You can fix the problem by adding loadonce: true and forceClientSorting: true options, but you use old version of free jqGrid (4.11.1), which is not support forceClientSorting: true. You have to upgrade to the latest version (4.14.0) of free jqGrid to be able to sort and group the data returned from the server on the client before displaying.
  • The source data, which contains integer data will be returned from the server as strings. Moreover, some data items contains spaces (" 16" instead of "16" or 16). It changes the order of sorting the data.
  • You should use sorttype (for example sorttype: "integer") to sort the data in the column corresponds to the type of the data.
  • To sort the date column correctly you should use both sorttype: "date" and the formatter: "date" with the formatoptions (in you case: formatoptions: { srcformat: "d/m/Y H:i:s", newformat: "d/m/Y H:i:s" })
  • If you want that the options rowNum, rowList and viewrecords work, then the grid have to have at least one pager. Thus you probably skip pager: true or toppager: true (or both) options.

The fixed demo is https://jsfiddle.net/OlegKi/zqLp4yrg/43/. I removed groupingView.groupollapse: true and height: 250 only to make easy to examine the results. The settings are not important for your main problem.

Upvotes: 1

Related Questions