jqGrid remove column headers from subgrid

Question

I am using jqGrid-4.4.1 subGrid functionality.

In my case I want to remove Column headers from subGrid for each row.

I tried

var grid = $("#list");
var gview = grid.parents("div.ui-jqgrid-view"); 
gview.children("div.ui-jqgrid-hdiv").hide();

from this link. But, It removes header of main table, rather than subgrid.

I found an alternative but its HTML based. How to remove the table column headers from Jqgrid subgrid

Also, How can I to remove carot sign the from the first column when row is expanded.

Here is the snapshot. I want to remove the border marked red.

enter image description here

score 6 · Accepted Answer · edited May 23 '17 at 11:52

In general you use the correct way to hide the column headers. The only problem is that you need to use hiding with the correct grid. Typically one creates subgrid as grid inside of subGridRowExpanded callback. jqGrid create <div> where you should place new subgrid. The id of the div you get as the first parameter of subGridRowExpanded callback (see the documentation for more details). So one creates subgrid with some id constructed typically based on the id of the div. If you would use the id of the subgrid instead of #list you will be able to hide the column headers of the subgrid.

The demo demonstrate such implementation:

enter image description here

Below is the code which I used for the demo

var myData = [
        {
            id: "10",
            c1: "My Value 1",
            c2: "My Value 1.1",
            subgridData: [
                { id: "10", c1: "aa", c2: "ab" },
                { id: "20", c1: "ba", c2: "bb" },
                { id: "30", c1: "ca", c2: "cb" }
            ]
        },
        {
            id: "20",
            c1: "My Value 2",
            c2: "My Value 2.1",
            subgridData: [
                { id: "10", c1: "da", c2: "db" },
                { id: "20", c1: "ea", c2: "eb" },
                { id: "30", c1: "fa", c2: "fb" }
            ]
        },
        {
            id: "30",
            c1: "My Value 3",
            c2: "My Value 3.1",
            subgridData: [
                { id: "10", c1: "ga", c2: "gb" },
                { id: "20", c1: "ha", c2: "hb" },
                { id: "30", c1: "ia", c2: "ib" }
            ]
        }
    ],
    $grid = $("#list"),
    mainGridPrefix = "s_";

$grid.jqGrid({
    datatype: "local",
    data: myData,
    colNames: ["Column 1", "Column 2"],
    colModel: [
        { name: "c1", width: 180 },
        { name: "c2", width: 180 }
    ],
    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);

        $subgrid.appendTo("#" + $.jgrid.jqID(subgridDivId));
        $subgrid.jqGrid({
            datatype: "local",
            data: $(this).jqGrid("getLocalRow", pureRowId).subgridData,
            colModel: [
                { name: "c1", width: 178 },
                { name: "c2", width: 178 }
            ],
            height: "100%",
            rowNum: 10000,
            autoencode: true,
            gridview: true,
            idPrefix: rowId + "_"
        });
        $subgrid.closest("div.ui-jqgrid-view")
            .children("div.ui-jqgrid-hdiv")
            .hide();
    }
});
$grid.jqGrid("navGrid", "#pager", {add: false, edit: false, del: false});

UPDATED: The answer shows how to implement resizing of columns of subgrid after resizing of the columns of the main grid.

Thanks a ton for the reply. But this also removes main header. I want to keep header of main grid. — Hardik Mishra, Jan 07 '13 at 09:57
@HardikMishra: Sorry, it was typing error. One should use `$subgrid.closest` instead of `$subgrid.parents`. I modified the answer and the demo. — Oleg, Jan 07 '13 at 10:44
Hi Oleg.. If possible can you provide any pointers on http://stackoverflow.com/questions/14216113/resize-subgrid-columns-on-resizing-main-grid — Hardik Mishra, Jan 10 '13 at 13:19

jqGrid remove column headers from subgrid

1 Answers1

Linked