jqGrid Frozen Columns in a Subgrid

Question

I know that frozen columns does not work if Sub-Grid is enabled from http://www.trirand.com/jqgridwiki/doku.php?id=wiki:frozencolumns.

My understanding is that frozen does not work in the parent grid but it should work in the Sub-grid?

But when I try frozen column in sub grid it does not work? Does it mean frozen columns does not work in both the parent and Sub-grid.

do you use [Subgrid as Grid](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:subgrid_as_grid)? Old style [subgrids](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:subgrid) don't support frozen columns. Which `datatype` you use in subgrid as grid? Which version of jqGrid you use? You should post the code which you use. — Oleg, Mar 13 '15 at 06:02
I am using the latest version as of now jqGrid 4.7.0 . My datatype is json. — Helen Araya, Mar 13 '15 at 16:40
I wrote you about [free jqGrid 4.8.0](https://github.com/free-jqgrid/jqGrid) which are based on jqGrid 4.7.0, but which contains many enhancements shortly described in [the wiki](https://github.com/free-jqgrid/jqGrid/wiki) and the readme. I'd recommend you to try it. It's the fork which I will continue to develop. — Oleg, Mar 13 '15 at 17:02

score 1 · Accepted Answer · edited May 23 '17 at 12:06

If you use subgrid as grid then jqGrid just creates empty <div> in the "subgrid row" where any information can be placed. So you can create for example new grid with any features in the div. You can create grid with frozen columns of cause.

I created the demo for you by modifying the demo from an old answer. The results looks like below

enter image description here

I marked the header of frozen columns using CSS

.ui-jqgrid .frozen-div .ui-th-column { background: #f0dcdd; color: black; }

The code of subgrid is the following

subGrid: true,
subGridRowExpanded: function (subgridId, rowid) {
    var $subgrid = $("<table id='" + subgridId + "_t'></table>");
    $subgrid.appendTo("#" + subgridId);
    $subgrid.jqGrid({
        datatype: "local",
        data: $(this).jqGrid("getLocalRow", rowid).files,
        colNames: ["Name", "Filetype", "col3", "col4"],
        colModel: [
            {name: "name", width: 130, key: true, frozen: true},
            {name: "filetype", width: 130, frozen: true},
            {name: "col3", width: 130},
            {name: "col4", width: 130}
        ],
        height: "100%",
        rowNum: 10,
        sortname: "name",
        shrinkToFit: false,
        autowidth: true,
        idPrefix: "s_" + rowid + "_"
    }).jqGrid("setFrozenColumns");
}

I use shrinkToFit: false to prevent default shrinking of columns of subgrids together with autowidth: true which set the width of the subgrid.

The code works in jqGrid 3.7 or free jqGrid 3.8 which I published recently (see here and here), but in case of usage more old versions of jqGrid you can need to trigger jqGridAfterGridComplete event (see the answer).

jqGrid Frozen Columns in a Subgrid

1 Answers1