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.

Gameness

@Oleg, Can you please give a hand here? and help me like you did many times before?? – Gameness

I receive the message like above. If you want to send me a message in the future you should post it on any page where I wrote my answer or a comment. Only in the case I'll receive the notification about the message. – Audacious

ok thanks, Ill know for next time... – Gameness

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

Audacious

One problem, after doing the search the first time, the dialog closes, i need it to stay open all the time... how can i do that? i see in your demo that it stays open, what could be that i did wrong? – Gameness

also is there a way that the select for the "and" or "or" options would not we there, and by default it will always do and when there are a few filters? – Gameness

@Ovi: Your first question was about closing the dialog. Which settings you use? In my demo I used default settings closeAfterSearch: false, closeAfterReset: false and made the close button of the dialog as hidden. So I didn't understand how the dialog can be closed. To the next question. Every column from the colModel can has search: false option. The last your question about "and" or "or" options: you can use $searchDialog.find("select.opsel").hide(); to hide the select with "ADD"/"OR" operation. – Audacious

now that i hide the "AND"/"OR", after i click the + or - to add a additional rule, it appears again. What can i do to make stay hidden? – Gameness

It's the problem if you try to use some standard dialog instead of writing your own one, but you want to have to many customization in the standard dialog. One way is to try to hide the "ADD"/"OR" buttons in the afterRedraw callback. Another way to define your custom event handler on the "+"/"-" buttons. You can choose absolutely another way and create your custom input field: see here for details. – Audacious

@Ovi: OK! Solved problem is the best problem. – Audacious

can you please take a look at this easy question i posted here? thank you – Gameness

@Audacious I am currently working on such a sample. But how can I use the beforeClear listener method in the above scenario ? Can you guide me please. – Deaconess

@happybuddha: I'm not sure what you mean. Probably you need to use onReset (see the documentation)? beforeClear callback exist only in toolbar searching (see the documentation). – Audacious

@Audacious I have a similar grid with the search displayed on top of it. After searching for something, when I click reset, it reloads the grid also. But I only want to reset the search fields (and not reload the grid). How can I do that ? Something like this : trirand.com/blog/?page_id=393/help/… – Deaconess

@Oleg, ignore the trirand link. That is a different thing sorry. Can you give me some idea about my question ? – Deaconess

@happybuddha: You can use onReset which reset searching dialog controls and which return false to prevent reloading. So what you can do is either recreating of the searching dialog or removing all unneeded filters. Implementation of both ways seems me not complex. – Audacious

@Audacious Thank you. This is over. Now am onto another bug. The search box as in the example above, disappears on FF when I clean cache and load page. Any suggestion for that please ? – Deaconess

@Audacious Please,Can you help me with this subject:jqGrid: Search form changed to be flat? ? – Deodar

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.

Madalinemadalyn

Hi @Mike.This solution works great but if we load all 1000 records without pagination then filtering do not work properly as expected.Any suggestion on this? – Florist

I Have set rowNum:-1 to load all records at once in this case filtering do not work properly. – Florist