JqGrid: has the search form changed to be flat?

Question

This is a theme based on " jqGrid - change search / popup form - be flat on page, not dialog ". I made the search form flat depending on the topic, but now I want to not always show on the page, I want to show it only when the user clicks the "Search" button from jqGrid. Can someone give me a hint or solution how to do this, please? @ Oleg, can you help me, please? Thanks

Answer 1

Th solution can be very close to the old. You can use the following options in the search dialog box:

overlay: 0, drag: false, beforeShowSearch: function ($form) { var $searchDialog = $form.closest(".ui-jqdialog"), $gbox = $(this).closest(".ui-jqgrid"); $searchDialog.insertBefore($gbox); $searchDialog.css({ position: "relative", zIndex: "auto", float: "left" }) $gbox.css({clear:"left"}); } 

You can select other options (for example, closeOnEscape: true, closeAfterSearch: true, closeAfterReset: true, searchOnEnter: true, searchOperators: true and others) depending on your preference.

The demo displays a search dialog, for example

If you prefer to use Bootstrap CSS instead of jQuery UI CSS, you need to add a few extra lines:

 overlay: 0, drag: false, beforeShowSearch: function ($form) { var $searchDialog = $form.closest(".ui-jqdialog"), $gbox = $(this).closest(".ui-jqgrid"); $searchDialog.insertBefore($gbox); $searchDialog.css({ position: "relative", zIndex: "auto", padding: 0, float: "left" }); $searchDialog.children(".modal-dialog").css({ marginTop: 0, marginBottom: 0 }); $searchDialog.find(".modal-content").css({ boxShadow: "none" }); $gbox.css({clear:"left"}); } 

See a demo that displays: