Search code examples
jqgrid

jqGrid: Frozen columns of parent grid not working after adding subgrid


I have a jqgrid with a subgrid. I made a few columns in the parent grid and subgrid as frozen. Frozen columns on subgrid works fine, but it does not work on the parent grid.

When I disable the subgrid by setting subGrid as false, frozen rows works perfectly on the parent.

Is there anything that I am missing which stops the frozen columns on the parent grid from working?

Here is my jqgrid:

$(function () {
"use strict";
var myData = {
        id: "509403957ae7d3929edcb812",
        name: "MYBOOK",
        chapters: [
            {
                name: "myfirstchapter",
                sequence: 10,
                title: "My First Chapter",
                filetype: "tex", 
                col3: "a", 
                col4: "b",
                files: [
                    { filetype: "tex", name: "myfile1", col3: "a", col4: "b" },
                    { filetype: "doc", name: "myfile2", col3: "c", col4: "d" },
                    { filetype: "doc", name: "myfile3", col3: "e", col4: "f" },
                ]
            },
            {
                name: "mysecondchapter",
                sequence: 20,
                title: "My Second Chapter",
                filetype: "tex", 
                col3: "a", 
                col4: "b",
                files: [
                    { filetype: "tex", name: "myfirstfile", col3: "a", col4: "b" },
                    { filetype: "tmpl", name: "myfileb", col3: "c", col4: "d" },
                ]
            }
        ]
    },
    $grid = $("#list");

$grid.jqGrid({
    datatype: "local",
    data: myData.chapters,
    colNames: ["Sequence", "Name", "Title", "Filetype", "col3", "col4"],
    colModel: [
        {name: "sequence", width: 65, key: true, frozen: true },
        {name: "name", width: 200, frozen: true },
        {name: "title", width: 150},
        {name: "filetype", width: 130},
        {name: "col3", width: 130},
        {name: "col4", width: 130}
    ],
    rowNum: 3,
    rowList: [3, 5, 10],
    pager: "#pager",
    gridview: true,
    ignoreCase: true,
    rownumbers: true,
    sortname: "sequence",
    viewrecords: true,
    height: "auto",
    autowidth: false,
    shrinkToFit: false,
    width: 600,
    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");
    }
});
$grid.jqGrid("navGrid", "#pager", {add: false, edit: false, del: false});
$grid.jqGrid("setFrozenColumns");

});


Solution

  • In Guriddo jqGrid subgrid can not be used when frozen columns are on.

    Here you can read all the limitation of Guriddo jqGrid. We do not know how this is in free-jqgrid.