JqGrid - Change search / popup form - be flat on page - no dialog

Question

I am using jqgrid.

I really need help with this, and I have no idea how to do this, but I'm sure it is possible ... can anyone even give me a partial answer? should have started with?

Now I have a requirement to say that for searching and filtering the grid I do not want the usual form form to pop op thing to open, instead the filter should be open when you enter the page, but not as a pop-up form, but should be included at the top pages, but still have all the features.

You need to look like this:

And again, having the select tag filled with the correct information (for example, they appear in a pop-up form), and when you click "Save" it should send a request to the server, as usual.

Is it possible?

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

The only thing I basically need is to have a filter with its part of the dialog.

Answer 1

The solution for the old search dialog box can be found here . I changed the demo to the current implementation of the search dialog in jqGrid.

You can see the results of the demo :

Relevant code 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 how I implemented it, using Oleg's excellent help.

I wanted my users to be able to immediately enter search criteria (in this case, the username), and for jqGrid to show the results. Do not bother with popup search dialog.

Here is my end result:

To do this, I needed this HTML code:

 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, thanks to Oleg for showing me how to use these search filters.

It really makes jqGrid more user friendly.