jqgrid v5.2.1 with subgrid and local data CRUD operations

Question

Here is my scenario. My jqgrid v5.2.1 doesn't display any data when a page loads up. It is by design. Users will either have to enter all the data for the grid and subgrid manually or click a button to load a default data from the server in the json format via
$("#jqGrid").jqGrid('setGridParam', { datatype: 'local', data: dataResponse.groups }).trigger("reloadGrid");

Users perform CRUD operations locally until the data is right in which case a button is clicked and the grids data goes to the server via $("#jqGrid").jqGrid('getGridParam', 'data').

Edit/Delete operations work fine with the default data loaded but I have a problem with adding new records.

Id's of new rows are always _empty(which is fine because the server side will generated it), but the new rows from the subgrids are not transferred to the server. The question is how to establish the relationship between the newly created rows in the main grid and associated rows in the subgrid and then transfer everything to the server for processing?

Here is the code:

var mainGridPrefix = "s_";

        $("#jqGrid").jqGrid({
            styleUI: 'Bootstrap',
            datatype: 'local',        
            editurl: 'clientArray',               
            postData: {},
            colNames: ['Id', 'Group', 'Group Description', 'Markets', 'Group sort order'],
            colModel: [
                { name: 'id', key: true, hidden: true },
                { name: 'name', width: 300, sortable: false, editable: true, editrules: { required: true }, editoptions: { maxlength: 50 } },
                { name: 'description', width: 700, sortable: false, editable: true, editoptions: { maxlength: 256 } },
                { name: 'market', width: 200, sortable: false, editable: true, editrules: { required: true }, editoptions: { maxlength: 50 }  },
                { name: 'sortOrder', width: 130, sortable: false, editable: true, formatter: 'number', formatoptions: { decimalSeparator: ".", thousandsSeparator: ',', decimalPlaces: 2 } }
            ],
            sortname: 'Id',
            sortorder: 'asc',
            idPrefix: mainGridPrefix,
            subGrid: true,
            //localReader: { repeatitems: true },
            jsonReader: { repeatitems: false},
            autowidth: true,               
            shrinkToFit: true,                
            loadonce: true,
            viewrecords: true,
            rowNum: 5000,
            pgbuttons: false,
            pginput: false,                
            pager: "#jqGridPager",
            caption: "Group Template",
            altRows: true,
            altclass: 'myAltRowClass',               
            beforeProcessing: function (data) {
                var rows = data.rows, l = rows.length, i, item, subgrids = {};
                for (i = 0; i < l; i++) {
                    item = rows[i];
                    if (item.groupItems) {
                        subgrids[item.id] = item.groupItems;
                    }
                }                   
                data.userdata  = subgrids;
            },               
            subGridRowExpanded: function (subgridDivId, rowId) {
                var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
                    pureRowId = $.jgrid.stripPref(mainGridPrefix, rowId),
                    subgrids = $(this).jqGrid("getGridParam", "userData"),
                    subgridPagerId = subgridDivId + "_p";

                $("#" + $.jgrid.jqID(subgridDivId)).append($subgrid).append('<div id=' + subgridPagerId + '></div>');

                $subgrid.jqGrid({
                    datatype: "local",
                    styleUI: 'Bootstrap',
                    data: subgrids[pureRowId],
                    editurl: 'clientArray',
                    colNames: ['Item', 'Item Description', 'Health Standard', 'Sort order', 'Statuses', 'Risks', 'Solutions', 'Budgets'],
                    colModel: [
                        { name: 'itemName', width: '200', sortable: false, editable: true, editrules: { required: true }, editoptions: { maxlength: 50 }  },
                        { name: 'itemDescription', width: '400', sortable: false, editable: true, editoptions: { maxlength: 500 }  },
                        { name: 'healthStandard', width: '400', sortable: false, editable: true, editoptions: { maxlength: 500 }  },
                        { name: 'itemSortOrder', width: '200', sortable: false, editable: true, formatter: 'number', formatoptions: { decimalSeparator: ".", thousandsSeparator: ',', decimalPlaces: 2 } },
                        { name: 'statuses', width: '400', sortable: false, editable: true, editoptions: { maxlength: 500 }  },
                        { name: 'risks', width: '400', sortable: false, editable: true, editoptions: { maxlength: 500 } },
                        { name: 'solutions', width: '400', sortable: false, editable: true, editoptions: { maxlength: 500 } },
                        { name: 'budgets', width: '400', sortable: false, editable: true, editoptions: { maxlength: 100 } }
                    ],
                    //rownumbers: true,
                    rowNum: 5000,
                    autoencode: true,
                    autowidth: true,
                    pgbuttons: false,
                    viewrecords: true,
                    pginput: false,
                    jsonReader: { repeatitems: false, id: "groupId" },
                    gridview: true,
                    altRows: true,
                    altclass: 'myAltRowClass',
                    idPrefix: rowId + "_",
                    pager: "#" + subgridPagerId
                });

                $subgrid.jqGrid('navGrid', "#" + subgridPagerId, { edit: true, add: false, del: true, search: true, refresh: false, view: false  }, // options
                    { closeAfterEdit: true }, // edit options  //recreateForm: true
                    { closeAfterAdd: true },  // add options
                    {},   //del options
                    {}  // search options
                );
            }               
        });

        $('#jqGrid').navGrid('#jqGridPager', { edit: true, add: false, del: true, search: true, refresh: false, view: false }, // options
            // options for Edit Dialog
            {                   
                editCaption: "Edit Group",                   
                beforeShowForm: function (form) {
                    form.closest('.ui-jqdialog').center();
                },                    
                bottominfo: "<br/>",
                recreateForm: true,
                closeOnEscape: true,
                closeAfterEdit: true                    
            },
            // options for Add Dialog
            {

                //url:'clientArray',
                addCaption: "Add Group",                   
                beforeShowForm: function (form) {
                    form.closest('.ui-jqdialog').center();
                },                   
                bottominfo: "<br/>",
                recreateForm: true,
                closeOnEscape: true,
                closeAfterAdd: true                    
            },  
            // options for Delete Dailog
            {
                caption: "Delete Group",
                beforeShowForm: function (form) {
                    form.closest('.ui-jqdialog').center();
                },
                msg: "Are you sure you want to delete?",
                recreateForm: true,
                closeOnEscape: true,
                closeAfterDelete: true                    
            },
            // options for Search Dailog
            {
                caption: "Search Group",
                beforeShowForm: function (form) {
                    form.closest('.ui-jqdialog').center();
                },                   
                recreateForm: true,
                closeOnEscape: true,
                closeAfterDelete: true
            }
        );     

Answer 1

There was a small bug in the form editing which is fixed now. Thank you for help us to find them.

Now to the problem.

When you add data in main grid it is natural to add a unique id of every row. Since of the bug instead of inserting a row with the Guriddo id Generator there was a wrong insertion with id = s_empty. This causes every inserted row in main grid to have same id, which is not correct.

The fix is published in GitHub and you can try it.

We have updated your demo in order to insert correct the data in the subgrid. The only small addition is in afterSubmit event in add mode, where the needed item is created.

Hope this will solve the problem

Here is the demo with the fixed version

Edited

At server you can analyze the id column if contain string 'jqg', which will point you that this is a new row. The corresponding id for the subgrid is in userData module which will connect the main grid id with the subgrid data

EDIT 2

One possible solution to what you want to achieve is to get the main data and the to get the subgrid data using userData property. After this make a loop to main data and update it like this

var maindata =  $("#jqGrid").jqGrid('getGridParam', 'data');
var subgrids = $("#jqGrid").jqGrid('getGridParam', 'userData');

for(var i= 0;i < maindata.length;i++) {
    var key = maindata[i].id;
    if(subgrids.hasOwnProperty(key) ) {
        if(!maindata[i].hasOwnProperty(groupItems) ) {
            maindata[i].groupItems = [];
        }
        maindata[i].groupItems = subgrids[key];
    }
}

The code is not tested, but I think you got the idea.

The other way is to update the groupitems on every CRUD of subgrid, which I think is not so difficult to achieve.