How to get the data from subgrid and post to Controller?

Question

I need to post all the subgrid data to MVC controller on click of "Submit" button outside the grid.

$("#simpleGrid").jqGrid({            
        url: '@Url.Action("GetMainGridData")',
        datatype: 'json',
        mtype: 'GET',
        colNames: ['', 'Codeset Category', 'Operating Amt', 'Direct Amt', 'Adjust Amt'],
        colModel: [
                    { name: 'CodesetCategoryId', hidden: true },
                    { name: 'CodesetCategoryDesc', width: 200},
                    { name: 'OperatingAmt', width: 200, align: 'right' },
                    { name: 'DirectAmt', width: 200, align: 'right' },
                    { name: 'AdjustAmt', width: 200, align: 'right' }
                  ],
        rowNum: 30,
        height: "100%",
        multiselect: false,
        viewrecords: true,
        caption: 'Expense Details',
        altRows: true,
        pager: '#pager',
        subGrid: true,
        subGridOptions: {
            "plusicon": "ui-icon-triangle-1-e",
            "minusicon": "ui-icon-triangle-1-s",
            "openicon": "ui-icon-arrowreturn-1-e"
        },
        subGridRowExpanded: function (subgrid_id, row_id) {
            var subgrid_table_id, pager_id;
            subgrid_table_id = subgrid_id + '_t';
            pager_id = "p_" + subgrid_table_id;
            $('#' + subgrid_id).html('<table id="' + subgrid_table_id + '" class="scroll"></table><div id="' + pager_id + '" class="scroll"></div>');
            $('#' + subgrid_table_id).jqGrid({
            url: encodeURI('@Url.Action("GetSubGridData")' + '?rowid=' + row_id),                
            datatype: 'json',
            mtype: 'GET',
            colNames: ['','','','', 'Program Name', 'Operating Amt', 'Direct Amt', 'Adjust Amt'],
            colModel: [
                        { name: 'id', hidden: true },
                        { name: 'submissionid', hidden: true },
                        { name: 'programid', hidden: true },
                        { name: 'codesetid', hidden: true },                           
                        { name: 'ProgramName', width: 200 },
                        { name: 'OperatingAmt', width: 200, align: 'right', editable: true },
                        { name: 'DirectAmt', width: 200, align: 'right', editable: true },
                        { name: 'AdjustAmt', width: 200, align: 'right', editable: true }
            ],
            rowNum: 20,
            sortname: 'id',
            pager:pager_id,
            viewrecords: true,
            onSelectRow: function(id){
                if(id && id!==lastsel){
                    jQuery(subgrid_table_id).restoreRow(lastsel);
                    jQuery(subgrid_table_id).editRow(id,true);
                    lastsel=id;
                }
            },
            cellEdit: true,
            cellsubmit: 'clientarray',             
            jsonReader: {
                id: "id",
                repeatitems: true},
            height: '100%'
            });
            $("#" + subgrid_table_id).jqGrid('navGrid', "#" + pager_id, { edit: false, add: false, del: false, search: false, refresh: false });
        }
    });

I am able to get the Parent grid data using the following code.

$('#btnSubmit').click(function () {            
        var griddata = $("#simpleGrid").jqGrid('getRowData');
        var dataToSend = JSON.stringify(griddata);
        alert(dataToSend);
        $.ajax({
            type: 'POST',
            url: '@Url.Action("SaveSubGridDataNew")',
            data: dataToSend,
            traditional: true,
            dataType: "json",
            contentType: "application/json; charset=utf-8"
    });
    })

How to get the subgrid data? Subgrid is inline editable.

Thanks in advance

Answer 1

I have used the following code to post the subgrid data. I really don't know about the performance wise. So far its working fine. If anybody have a different solution please post it.

$('#btnSubmit').click(function () {
        var maingridcount = $("#simpleGrid").getGridParam("reccount");
        var rids = $('#simpleGrid').jqGrid('getDataIDs');
        var subgridNameArray = [];
        var allsubgriddata = null;

        for ( var i = 1; i <= maingridcount; i++)
        {
            var nth_row_id = rids[i - 1];
            var subgridName = "#simpleGrid_" + nth_row_id + "_t";
            subgridNameArray[i-1] = subgridName;                
        }

        $(subgridNameArray).each(function () {
            var gridData = $(this.toString()).jqGrid('getRowData');

            if (JSON.stringify(gridData) != '{}' && allsubgriddata == null) {
                if (allsubgriddata == null) {
                    allsubgriddata = gridData;
                }
                else {
                    allsubgriddata = allsubgriddata.concat(gridData);
                }                    
            }               
        });            

        $(allsubgriddata).each(function () {                
            var vao = this.OperatingAmt.indexOf("value=");
            var vad = this.DirectAmt.indexOf("value=");
            var vaa = this.AdjustAmt.indexOf("value=");

            if (vao > 0) {
                var na = this.OperatingAmt.indexOf(" name=");
                this.OperatingAmt = this.OperatingAmt.substring(vao + 6, na);
            }

            if (vad > 0) {
                var na = this.DirectAmt.indexOf(" name=");
                this.DirectAmt = this.DirectAmt.substring(vad + 6, na);
            }

            if (vaa > 0) {
                var na = this.AdjustAmt.indexOf(" name=");
                this.AdjustAmt = this.AdjustAmt.substring(vaa + 6, na);
            }
        });

        var dataToSend = JSON.stringify(allsubgriddata);

        $.ajax({
            type: 'POST',
            url: '@Url.Action("SaveSubGridDataNew")',
            data: dataToSend,
            traditional: true,
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function () {
                jQuery("#simpleGrid").trigger('reloadGrid');
            }
    });
    })