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 n

Solution 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 dialogvar 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.

Solution 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"});

Solution 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 } );