jqGrid - Change filter/search pop up form - to be flat on page - not a dialog

Question

I am using jqgrid.

I really need help with this, and have no clue how to do it, but i am sure its possible... can any one give me even a partial answer? were to start from?

I now have a requirement saying that for searching and filtering the grid I dont want the regular model form pop op thing opening, instead the filter should be open when entering the page but not as a pop up form , but should be on the top of the page but still have all the functions to it.

Needs to look like this:

And again having the select tag filled with the correct information (like they do in the popup form) and when clicking on "Save" it should send the request to the server, like regular.

Is this possible?

*******EDIT*******

The only thing i basically need is to have the filter with out the dialog part of it.

Answer 1

The solution of the problem for the old searching dialog you can find here. I modified the demo to the current implementation of the searching dialog in the jqGrid.

You can see the results on the demo:

The corresponding code is below:

var $grid = $('#list');

// create the grid
$grid.jqGrid({
    // jqGrid opetions
});

// set searching deafauls
$.extend($.jgrid.search, {multipleSearch: true, multipleGroup: true, overlay: 0});

// during creating nevigator bar (optional) one don't need include searching button
$grid.jqGrid('navGrid', '#pager', {add: false, edit: false, del: false, search: false});

// create the searching dialog
$grid.jqGrid('searchGrid');

var gridSelector = $.jgrid.jqID($grid[0].id), // 'list'
    $searchDialog = $("#searchmodfbox_" + gridSelector),
    $gbox = $("#gbox_" + gridSelector);

// hide 'close' button of the searchring dialog
$searchDialog.find("a.ui-jqdialog-titlebar-close").hide();

// place the searching dialog above the grid
$searchDialog.insertBefore($gbox);
$searchDialog.css({position: "relative", zIndex: "auto", float: "left"})
$gbox.css({clear:"left"});

Answer 2

Here's the way I implemented it, using Oleg's excellent help.

I wanted my users to be able to immediately type in a search criteria (in this case, a user's name) and for the jqGrid to show the results. No messing around with the popup Search dialog.

Here's my end result:

To do this, I needed this HTML:

Employee name:
<input type="text" name="employeeName" id="employeeName" style="width:250px" />

<!--  This will be my jqGrid control and pager -->
<table id="tblEmployees"></table>
<div id="pager"></div>

and this JavaScript:

$("#employeeName").on('change keyup paste', function () {
    SearchByEmployeeName();
});

function SearchByEmployeeName()
{
    //  Fetch the text from our <input> control
    var searchString = $("#employeeName").val();

    //  Prepare to pass a new search filter to our jqGrid
    var f = { groupOp: "AND", rules: [] };

    //  Remember to change the following line to reflect the jqGrid column you want to search for your string in
    //  In this example, I'm searching through the UserName column.

    f.rules.push({ field: "UserName", op: "cn", data: searchString });

    var grid = $('#tblEmployees');
    grid[0].p.search = f.rules.length > 0;
    $.extend(grid[0].p.postData, { filters: JSON.stringify(f) });
    grid.trigger("reloadGrid", [{ page: 1 }]);
}

Again, my thanks to Oleg for showing how to use these search filters.

It really makes jqGrid much more user-friendly.