Possible to make jqGrid Search Box Stay on Page?

Question

Right now, I have to click the jqGrid Search icon to popup the search box. What I would like to do is have the search box open above the grid (not as a popup) at all times. I'm not seeing anything in their demos, but am hoping somebody has done it or knows how.

Artifice

Probably the toolbar searching is better? What kind of searching you need? Do you use 4.0.0 version of jqGrid having new style searching? One can implement want you want, but I am not sure that at the end you meant some another thing. In the most cases I include two searching in the grid: the toolbar searching for quick intuitive searching and advanced searching to build more complex filters. – Marcellmarcella

We are using jqGrid 3.8.2 advanced searching. Toolbar searching wouldn't allow us to have ranges for the same column (I don't believe) otherwise, that might be the right way to go. – Artifice

Answer 1

The simplest way to do what you need is

var grid = $("#list"),
    prmSearch = {multipleSearch:true,overlay:false};

grid.jqGrid({
    // all jqGrid parameters
});

// next line is optional
grid.jqGrid('navGrid','#pager',
            {add:false,edit:false,del:false,search:true,refresh:true},
            {},{},{},prmSearch);

// create the searching dialog
grid.searchGrid(prmSearch);

// find the div which contain the searching dialog
var searchDialog = $("#fbox_"+grid[0].id);

// make the searching dialog non-popup
searchDialog.css({position:"relative", "z-index":"auto"});

You can see the results live here. To make away the border over the searching dialog and grid you can do additionally the following:

searchDialog.addClass("ui-jqgrid ui-widget ui-widget-content ui-corner-all");
searchDialog.css({position:"relative", "z-index":"auto", float:"left"})
var gbox = $("#gbox_"+grid[0].id);
gbox.before(searchDialog);
gbox.css({clear:"left"});

It moves the searching dialog outside of "gbox_list" div.

The end solution you can see here.

Marcellmarcella

Well in this case onSearch doesnt get called – Waddington

@Hunt: I am not sure what you mean. The demo from my answer uses jqGrid 3.8.2. The filtering module are full rewritten later. So if you use the current version of jqGrid you have to use another code. For example from here. The current version of jqGrid has much more changes in the searching module. In any way if you have a problem where onSearch not be called you should post URL to the corresponding demo. – Marcellmarcella

I have a 4.4.5 jqGrid. I use both the toolbar search as well as the popup dialog. I have customized slightly to feature icons in top caption region and am looking for how to launch the fbox_ search dialog from my custom icon – Cantu

@bkwdesign: See another answer for example. – Marcellmarcella

Answer 2

This is my fixed version for jqgrid > 4.3

var searchDialog = $("#searchmodfbox_"+grid[0].id);    
    searchDialog.addClass("ui-jqgrid ui-widget ui-widget-content ui-corner-all");
    searchDialog.css({position:"relative", "z-index":"auto", "float":"left"})    
    var gbox = $("#gbox_"+grid[0].id);
    gbox.before(searchDialog);
    gbox.css({clear:"left"});

Prosenchyma

Answer 3

Here is the simplest way that might help someone to make jq grid search box stay on the page (as popup) all the time until close is clicked.

$("#grid").searchGrid({ closeAfterSearch: false } );
$("#grid").searchGrid({ closeOnEscape: false } );

Pickings