Can I add a header row under the column header row in JQGrid

Question

I currently have code that creates a pretty standard JQGrid. However, I now want to add some search functionality below each header. I don't want to use the built in searchbar I've seen as it only provides textboxes, which don't work well for searching by date ranges. So I'm hoping there's a way to add a table row into JQgrid that I can just write the contents of myself.

Essentially, here's what I'd like the grid to look like:

--------------------------------
| JQGrid Header
--------------------------------
| Column 1  |  Column 2     | Col...
--------------------------------
| My new row here
--------------------------------
| Data row 1
--------------------------------
| Data row 2
--------------------------------
| Data row etc...
--------------------------------
| Footer
--------------------------------

I already built this search functionality for a previous project so I'd just like an empty div or table row that I can drop it into. I just don't know how to insert one between the JQGrid column headers and JQGrid data.

Thanks.

Answer 1

I found that this is no longer necessary to accomplish what I want to do. Instead, I am using the additional search options that I wasn't aware of at the time:

colModel:   [
                <cfloop from="1" to="#ListLen(attributes.ColumnHeaderList)#" index="x">
                    {   name: '#ListGetAt(attributes.ColumnFieldList, x)#',
                        index: '#ListGetAt(attributes.ColumnFieldList, x)#',
                        width: #ListGetAt(attributes.columnWidthList, x)#,
                        sorttype: '#ListGetAt(attributes.columnTypeList, x)#',
                        search:true,
                        stype:'<cfif datasearchtype[x] is 3>text<cfelse>select</cfif>',
                        searchoptions: {
                            value:{#DataSearchOptions[x][1]#}
                        }
                    }
                    <cfif x is not ListLen(attributes.ColumnHeaderList)>,</cfif>
                </cfloop>
            ],

Essentially, I have some coldFusion code that parses the data being returned by the query, and then makes a determination on how the column should be searched. For dates or numeric ranges, I create a dropdown with reasonable options (ie: 'Jan', 'Feb', 'March' or 'Jan 2013 - Jun 2013', 'Jul 2013 - Dec 2013', etc), and use the "searchoptions" attribute to have JQuery create the select box for me. For other values I leave the search bar to use a straight text field.

This provides a convenient alternative to the more powerful popup search box, and the selects provide a much more intuitive and efficient way to parse data in daily usage.