Resize SubGrid Columns on resizing main grid
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
.