jQuery Grid Plugin - jqGrid - Topic: removing column header row

kobruleht on removing column header row

Sat, 07 May 2011 22:02:50 +0300

Thank you. It works.

I noticed that if some item is clicked in tree, treeview changes its width. How to disable this so that treeview width does not change if clicked in item ?

Andrus.

OlegK on removing column header row

Sat, 07 May 2011 18:26:46 +0300

You can execute the code which I suggested you before directly after the jqGrid will be created.

var grid = $("#west-grid");
grid.jqGrid({
// all jqGrid parameters
});
grid.parents("div.ui-jqgrid-view").children("div.ui-jqgrid-hdiv").hide();

Best regards
Oleg

kobruleht on removing column header row

Sat, 07 May 2011 15:45:05 +0300

I havent found any event whichg occurs only once after grid is constructed. So I used:

lloadComplete: function (rowid) {
var grid = $("#west-grid");
var gview = grid.parents("div.ui-jqgrid-view");
gview.children("div.ui-jqgrid-hdiv").hide();
},

Is this best place to remove header ?

OlegK on removing column header row

Sat, 07 May 2011 13:32:34 +0300

You can find here the description of the jqGrid elemens. There are gvew div which contain both grid body and grid headers. You cen get the gview with the code

var grid = $("#west-grid");
var gview = grid.parents("div.ui-jqgrid-view");

oder with

var grid = $("#west-grid");
var gview = $("#gview_"+grid[0].id);

To disable (to hide) the column headers of jqGrid you should do the following:

gview.children("div.ui-jqgrid-hdiv").hide();

The hiding of the column headers can have sense only if like in your case there are only one visible column in the grid.

By the way you don't need to define pager: false parameter of jqGrid. Exactly like you not defined caption parameter you can just not define the pager parameter.

Best regards
Oleg

kobruleht on removing column header row

Sat, 07 May 2011 08:43:04 +0300

Single column treegrid shows grid header row. Setting colNames: ["id", "", "url"], shows blank header. How to remove column header, so that treeGrid appears more like traditional tree ?

$("#west-grid").jqGrid({
     url: '<%= ResolveUrl("~/Store/GridData")%>',
     datatype: "json",
     mtype: "POST",
       height: "auto",
     pager: false,
   loadui: "disable",
   treeGridModel: "adjacency",
   colNames: ["id", "", "url"],
     colModel: [
            { name: "id", width: 1, hidden: true, key: true },
            { name: "menu" },
            {name: "url", width: 1, hidden: true }
                    ],
                autowidth: true,
                treeGrid: true,
                ExpandColumn: "menu",
                rowNum: 200,
                ExpandColClick: true,
                treeIcons: { leaf: 'ui-icon-document-b' },
                onSelectRow: function (rowid) {
                    var treedata = $("#west-grid").jqGrid('getRowData', rowid);
                    if (treedata.isLeaf == "true") {
                        window.location = '<%= ResolveUrl("~/")%>' + treedata.url;
                    }
                }

}
);