Possible to make jqGrid Search Box Stay on Page?

by

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.

More Related Contents:

  1. jqgrid server side error message/validation handling
  2. In javascript, how do you search an array for a substring match
  3. jqGrid does not render correctly in Chrome/Chrome Frame
  4. Why Array.indexOf doesn’t find identical looking objects
  5. javascript search array of arrays
  6. jqGrid add new column
  7. jQGrid, how to make a column editable in the add dialog but not during (inline) edits
  8. How to pass data to url from jqgrid row if hyperlink is clicked
  9. Case-insensitive search
  10. JS search in object values
  11. jqGrid: change background color of row based on row cell value by column name
  12. How to search JSON tree with jQuery
  13. How do I implement custom sort to a specific column after jqgrid has been generated?
  14. Resize jqGrid when browser is resized?
  15. What the difference between loadComplete and gridComplete events?
  16. jqGrid GridUnload/ GridDestroy
  17. jQGrid Column Chooser Modal Overlay
  18. jqGrid access cell data while it is being edited
  19. How can I preserve the search filters in jqGrid on page reload?
  20. Is there a full working example for a jqGrid ColumnChooser? [closed]
  21. Search array of objects for entry matching variable and check if it matches other fields
  22. Is JQGrid free?
  23. Customizing the Add/Edit Dialog in jqGrid
  24. Enabling Save button on JQ Grid with InlineEditing and CellEdit
  25. Sorting of jqGrid (v4.1.2) treegrid not working with Ajacency Model
  26. How to find a value in an array of objects in JavaScript?
  27. jqGrid multiselect “check all” in header: how to hide it?
  28. How to show all rows in the jqGrid?
  29. Using Javascript to find most common words in string?
  30. JQGrid: Resize Grid Width After Column Resized

Leave a Comment