locked
How to place the Filter of JQGrid outside the grid and keep filtering possibilities RRS feed

  • Question

  • User1263547581 posted

    Dear all,

    I have my actual JQ grids on my CMS which has been defined as you can see it here

    As you can see the filter facility in grid header make it to be quite big and does not looks so nice.

    I was thinking if tehre is a way to place this fildering outside the grid in order to narrow the header height and them keep it working similar.

    If you have any idea and sample how to do it would be please because I am not so expert in this.

    Thanks for help

    regards

    Friday, April 15, 2016 5:30 PM

Answers

  • User61956409 posted

    Hi sergeC,

    If you’d like to put filter outside the grid, you may need to create custom filtering functionality to retrieve records and repopulate grid instead of using built-in filter functionality.

    On other hand, you could try to specify custom CSS style to position these filter inputs. For example you could make the inputs as absolute positioned elements and specify top and left property to control the position of inputs to show inputs outside the grid.

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, April 16, 2016 8:46 AM

All replies

  • User61956409 posted

    Hi sergeC,

    If you’d like to put filter outside the grid, you may need to create custom filtering functionality to retrieve records and repopulate grid instead of using built-in filter functionality.

    On other hand, you could try to specify custom CSS style to position these filter inputs. For example you could make the inputs as absolute positioned elements and specify top and left property to control the position of inputs to show inputs outside the grid.

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, April 16, 2016 8:46 AM
  • User1263547581 posted

    Hello,

    Could you clarify with the follwoing with a sample ?

    "On other hand, you could try to specify custom CSS style to position these filter inputs. For example you could make the inputs as absolute positioned elements and specify top and left property to control the position of inputs to show inputs outside the grid."

    regards

    Thursday, April 21, 2016 9:03 AM
  • User61956409 posted

    Hi sergeC,

    sergeC

    Could you clarify with the follwoing with a sample ?

    "On other hand, you could try to specify custom CSS style to position these filter inputs. For example you could make the inputs as absolute positioned elements and specify top and left property to control the position of inputs to show inputs outside the grid."

    The following sample is for your reference.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <style>
            table tr {
                background-color: lightblue;
            }
    
                table tr th input {
                    ;
                    top: -25px;
                }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <br />
                <br />
                <table>
                    <tr>
                        <th>field1:<input id="txt1" type="text" />
                        </th>
                        <th>field2:<input id="txt2" type="text" />
                        </th>
                    </tr>
                    <tr>
                        <td>data1</td>
                        <td>data2</td>
                    </tr>
                </table>
            </div>
        </form>
    </body>
    </html>
    

    Best Regards,

    Fei Han

    Friday, April 22, 2016 7:56 AM
  • User1263547581 posted

    Thanks for your reply but how can I access the filter field in the JQgrid ?

    I have try to play with value in debug mode, but changing the top value of the filter field does not work because it simply move it inside the grid header row

    any other tips ? 

    Tuesday, April 26, 2016 3:45 PM