5

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.

Reporter
  • 3,897
  • 5
  • 33
  • 47
Amy Anuszewski
  • 1,843
  • 17
  • 30
  • Probably the [toolbar searching](http://www.trirand.com/jqgridwiki/doku.php?id=wiki: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](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:advanced_searching) to build more complex filters. – Oleg Apr 16 '11 at 17:35
  • 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. – Amy Anuszewski Apr 16 '11 at 17:45

3 Answers3

8

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.

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Well in this case `onSearch` doesnt get called – Hunt Sep 24 '12 at 16:06
  • @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](http://stackoverflow.com/a/10131596/315935). 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. – Oleg Sep 24 '12 at 16:34
  • 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 – bkwdesign Sep 17 '14 at 15:52
  • @bkwdesign: See [another answer](http://stackoverflow.com/a/8833721/315935) for example. – Oleg Sep 17 '14 at 16:00
3

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"});
Julio
  • 1,903
  • 2
  • 16
  • 19
1

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 } );
Navamani Samuel
  • 568
  • 2
  • 4
  • 15