Home/ Questions/Q 8574587
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T19:30:27+00:00

I’m starter in jqGrid, i write this code for Implement Grouping $(function () {

  • 0

I’m starter in jqGrid, i write this code for Implement Grouping 

$(function () {
            var mydata = [
                          { id: "11", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
                          { id: "12", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
                          { id: "13", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
                          { id: "14", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
                          { id: "15", invdate: "2007-10-05", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
                          { id: "16", invdate: "2007-09-06", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
                          { id: "17", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" }, 
                          { id: "18", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
                          { id: "19", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
                          { id: "21", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
                          { id: "22", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
                          { id: "23", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }, 
                          { id: "24", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
                          { id: "25", invdate: "2007-10-05", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
                          { id: "26", invdate: "2007-09-06", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
                          { id: "27", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
                          { id: "28", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
                          { id: "29", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00"}];
            jQuery("#list48").jqGrid({
                data: mydata,
                datatype: "local",
                height: 'auto',
                rowNum: 30,
                rowList: [10, 20, 30],
                colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
                colModel: [
                    { name: 'id', index: 'id', width: 60, sorttype: "int" },
                    { name: 'invdate', index: 'invdate', width: 90, sorttype: "date", formatter: "date" },
                    { name: 'name', index: 'name', width: 100, editable: true },
                    { name: 'amount', index: 'amount', width: 80, align: "right", sorttype: "float", formatter: "number", editable: true },
                    { name: 'tax', index: 'tax', width: 80, align: "right", sorttype: "float", editable: true },
                    { name: 'total', index: 'total', width: 80, align: "right", sorttype: "float" },
                    { name: 'note', index: 'note', width: 150, sortable: false}],
                pager: "#plist48",
                viewrecords: true,
                sortname: 'name',
                grouping: true,
                groupingView: { groupField: ['name'] },
                caption: "Grouping Array Data" });

        });

and create this grid
enter image description here

i want set Grouping Dynamicaly.Such that user Drag Header Column and Drop in top box after that grid Grop such this picture
enter image description here
please help me for implement this senaryo
. thanks all

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    On the jqGrid side you need to use groupingRemove and groupingGroupBy methods to change grouping dynamic, you can read more about them in documentation.

    For the UI part you should look at following interactions:

    The Shopping Cart sample in Droppable should give you a very good overview on how to approach the subject.

    Now after all that theoretical informations, I have created a sample on jsFiddle for you: jqGrid dynamic drag-n-drop grouping. It needs some styling to look exactly as what you are looking for, but it should allow you to understand all the internals. If you need some comments on the code let me know – I can add them later.

    • 0