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 star

Answer 1

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:

and this JavaScript:

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

function SearchByEmployeeName()
{
    //  Fetch the text from our  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.