Resize SubGrid Columns on resizing main grid

Question

I am using below sample code to create jqGrid with subGrids.

In my case, I have removed headers of subGrids. So, It looks like a grouping.

Here, Whenever I

Answer 1

You question is very interesting, but the answer isn't easy. Nevertheless I invested some time and provide you the following demo which shows how you can implement the solution. The implementation are based on the analyse of the source code of internal function dragEnd which will be called inside of mouseup callback (see here). mousemove callback (see here) and mousedown on the column headers (see here) play all together.

As the result the demo adjust the size of the column of the subgrid:

I included in the demo the trick with resizing of the whole grid after resizing of the column. It is described originally in the answer. I use personally it in every my productive grid because I prefer to have grids without scroll bars.

Below I include full code (all from the document.ready handler) of the demo:

var myData = [
        {
            id: "10",
            c1: "My Value 1.1",
            c2: "My Value 1.2",
            c3: "My Value 1.3",
            c4: "My Value 1.4",
            subgridData: [
                { id: "10", c1: "aa", c2: "ab", c3: "ac", c4: "ad" },
                { id: "20", c1: "ba", c2: "bb", c3: "bc", c4: "bd" },
                { id: "30", c1: "ca", c2: "cb", c3: "cc", c4: "cd" }
            ]
        },
        {
            id: "20",
            c1: "My Value 2.1",
            c2: "My Value 2.2",
            c3: "My Value 2.3",
            c4: "My Value 2.4",
            subgridData: [
                { id: "10", c1: "da", c2: "db", c3: "dc", c4: "dd" },
                { id: "20", c1: "ea", c2: "eb", c3: "ec", c4: "ed" },
                { id: "30", c1: "fa", c2: "fb", c3: "fc", c4: "fd" }
            ]
        },
        {
            id: "30",
            c1: "My Value 3.1",
            c2: "My Value 3.2",
            c3: "My Value 3.3",
            c4: "My Value 3.4",
            subgridData: [
                { id: "10", c1: "ga", c2: "gb", c3: "gc", c4: "gd" },
                { id: "20", c1: "ha", c2: "hb", c3: "hc", c4: "hd" },
                { id: "30", c1: "ia", c2: "ib", c3: "ic", c4: "id" }
            ]
        }
    ],
    mainGridPrefix = "s_";

$("#list").jqGrid({
    datatype: "local",
    data: myData,
    colNames: ["Column 1", "Column 2", "Column 3", "Column 4"],
    colModel: [
        { name: "c1", width: 100 },
        { name: "c2", width: 130 },
        { name: "c3", width: 150 },
        { name: "c4", width: 170 }
    ],
    rowNum: 10,
    rowList: [5, 10, 20],
    pager: "#pager",
    gridview: true,
    ignoreCase: true,
    rownumbers: true,
    sortname: "c1",
    viewrecords: true,
    autoencode: true,
    height: "100%",
    idPrefix: mainGridPrefix,
    subGrid: true,
    subGridRowExpanded: function (subgridDivId, rowId) {
        var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
            pureRowId = $.jgrid.stripPref(mainGridPrefix, rowId),
            colModel = $(this).jqGrid("getGridParam", "colModel");

        $subgrid.appendTo("#" + $.jgrid.jqID(subgridDivId));
        $subgrid.jqGrid({
            datatype: "local",
            data: $(this).jqGrid("getLocalRow", pureRowId).subgridData,
            colModel: [
                { name: "c1", width: (colModel[2].width - 2) },
                { name: "c2", width: colModel[3].width },
                { name: "c3", width: colModel[4].width },
                { name: "c2", width: (colModel[5].width - 2) }
            ],
            height: "100%",
            rowNum: 10000,
            autoencode: true,
            gridview: true,
            idPrefix: rowId + "_"
        });
        $subgrid.closest("div.ui-jqgrid-view")
            .children("div.ui-jqgrid-hdiv")
            .hide();
    },
    resizeStop: function (newWidth, index) {
        // grid.dragEnd()
        var widthChange = this.newWidth - this.width,
            $theGrid = $(this.bDiv).find(">div>.ui-jqgrid-btable"),
            $subgrids = $theGrid.find(">tbody>.ui-subgrid>.subgrid-data>.tablediv>.ui-jqgrid>.ui-jqgrid-view>.ui-jqgrid-bdiv>div>.ui-jqgrid-btable");
        $subgrids.each(function () {
            var grid = this.grid;
            // we have subgrids which have no internal subgrids
            // it reduce the number of columns to 1
            // we have rownumbers: true in the main grid, but not in subgrids
            // it reduce the number of columns to additional 1
            // so we should use (index - 2) as the column index in the subgrids
            grid.resizing = { idx: (index - 2) };
            grid.headers[index - 2].newWidth = (index - 2 === 0) || (index - 1 === grid.headers.length) ? newWidth - 2 : newWidth;
            grid.newWidth = grid.width + widthChange;
            grid.dragEnd.call(grid);
            $(this).jqGrid("setGridWidth", grid.newWidth, false);
        });
        $theGrid.jqGrid("setGridWidth", this.newWidth, false);
    }
}).jqGrid("navGrid", "#pager", {add: false, edit: false, del: false});

UPDATED: The answer introduces new setColWidth method based on the code of the above solution. One use new setColWidth method to simplify the code of resizeStop.