Is there any method to expand/collapse the grid by clicking on the caption layer? I have 3 very large tables that are displayed on a 1680x1050 screen which are loaded by default, collapsed, and each time the user wants to expand/collapse a table, he has to click on the expand/collapse button of the caption layer, which is "very far" positioned.

Is there any method to expand/collapse the grid by clicking on the caption layer? I have 3 very large tables that are displayed on a 1680x1050 screen which are loaded by default, collapsed, and each time the user wants to expand/collapse a table, he has to click on the expand/collapse button of the caption layer, which is "very far" positioned.

• php
• javascript
• jquery
• html
• jqgrid

4 Answers 4

You can use construct like

$(".ui-jqgrid-titlebar-close",$("list")[0].grid.cDiv).click();

You can see live demo here.

UPDATED: Probably it will help you just to place the minimize element of from the capture bar on the left size instead of default right position? You can do this with

.ui-jqgrid .ui-jqgrid-titlebar-close {position:relative;top:auto;margin:0;float:left}

see updated demo here.

UPDATED 2: See also one more example where click on the whole grid capture follows to the expand/collapse the grid.

This one will work for all the grids on the page.

$(".ui-jqgrid-titlebar").click(function() {
     $(".ui-jqgrid-titlebar-close", this).click();
});

I mean,to click on the actual caption layer (the titlebar), the dark blue part from your table,where you put the text "How to expand /collapse grid on caption layer click" text and on the right side you have the small button to expand/collapse. Is there something like :

onCaptionClick:function(state){$(".ui-jqgrid-titlebar-close",$("#id")[0].grid.cDiv).click();}

or

onTitleBarClick:function(state){$(".ui-jqgrid-titlebar-close",$("#id")[0].grid.cDiv).click();}

In the documentation there is an event for the Header of the grid onHeaderClick ,but there is nothing for the Caption layer that contains mon information for the represented data.

Perfect that did the trick. Thank you a lot! So, acording to Oleg to expand/collapse the entire table by clicking on the titlebar(caption layer) you can use:

 $(myGrid[0].grid.cDiv).click(function() {
            $(".ui-jqgrid-titlebar-close",this).click();
        });

where myGrid is:

var myGrid = jQuery("#jquery_grid");