Possible to make jqGrid Search Box Stay on Page?
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.
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.
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"});
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 } );