How can you remove (or hide) the caption bar in jqgrid?

Question

I see you can add a top caption bar and put a title by using this code:

jQuery('#grid').setCaption("Title");

Is there anyway, if I have already set a title, to remove the caption bar?

I tried this but it just removes the text (doesn't remove the whole caption bar).

jQuery('#grid').setCaption("");

score 19 · Accepted Answer · answered Mar 12 '11 at 17:52

19

if you want hurry, test

$(".ui-jqgrid-titlebar").hide();

or if you have multiple grids, then only hide titlebar of $("#grid"), then do

$("#gview_grid > .ui-jqgrid-titlebar").hide()

answered Mar 12 '11 at 17:52

Mujah Maskey

8,654
8
40
61

score 7 · Answer 2 · edited May 23 '17 at 11:51

If you create jqGrid having no title bar (caption: "") and examine the grid with respect of Developer Tools or with respect of Firebug you will see the <div> with the class "ui-jqgrid-titlebar" having <span> with the class "ui-jqgrid-title" and the anchor with the class "ui-jqgrid-titlebar-close" as the child elements:

<div id="gbox_list" class="ui-jqgrid ui-widget ui-widget-content ui-corner-all">
    ...
    <div id="gview_list" class="ui-jqgrid-view">
        <div style="display: none;"
             class="ui-jqgrid-titlebar ui-widget-header ui-corner-top ui-helper-clearfix">
            <a style="right: 0px;" class="ui-jqgrid-titlebar-close HeaderButton"
               role="link" href="javascript:void(0)">
                <span class="ui-icon ui-icon-circle-triangle-n"></span>
            </a>
            <span class="ui-jqgrid-title"></span>
        </div>
        ...

So even you create the grid without the title bar jqGrid create all hidden elements of the title bar.

I looked through the jqGrid code where the caption are created and could find the following fragment

if(ts.p.caption) {
    ...
    $(".ui-jqgrid-titlebar-close",grid.cDiv).click( function(e){
    ...
} else {$(grid.cDiv).hide();}

So to have the same results as with the grid initialized with caption: "" parameter you can do following

var mygrid = jQuery('#list'),
    cDiv = mygrid[0].grid.cDiv;
mygrid.setCaption("");
$("a.ui-jqgrid-titlebar-close",cDiv).unbind();
$(cDiv).hide();

You should do unbinding from the minimize button only if you are sure, that the grid will not have the title (caption) later. The bindings took less resources and do nothing for the hidden grid.

So the suggestion of Pravat Maskey just to hide the title is absolutely correct and my investigations only confirm this.

How can you remove (or hide) the caption bar in jqgrid?

2 Answers2