Combining SlickGrid Filter Examples

Question

I like the filter functionality in this example:

http://mleibman.github.com/SlickGrid/examples/example-header-row.html

where each column has its own filter, but I also require filter functionality from:

http://mleibman.github.com/SlickGrid/examples/example4-model.html

In this, it can be hidden and shown by pressing a button.

Is it possible to have filters from the first link with a "hidden ability" filter from the second channel? Thanks!

Answer 1

Yes it is. You can use the grid.hideHeaderRowColumns() method in the first example to hide the filter panel. Then use grid.showHeaderRowColumns() to show it again.

For example, go to the first link and replace the contents of the URL string:

 javascript:grid.hideHeaderRowColumns() 

and press Enter. You should see the filter panel move up and down. If you create your application from the first code sample, you should be able to call these functions from almost anywhere, that is.

 <input type="button" onclick="grid.hideHeaderRowColumns();" value="Hide Filter" /> 

Note that in the second example, the author uses the following code to add a predefined but hidden element to the stylized title bar:

 // move the filter panel defined in a hidden div into grid top panel $("#inlineFilterPanel") .appendTo(grid.getTopPanel()) .show(); 

And hidden element:

 <div id="inlineFilterPanel" style="display:none;background:#dddddd;padding:3px;color:black;"> Show tasks with title including <input type="text" id="txtSearch2"> and % at least &nbsp; <div style="width:100px;display:inline-block;" id="pcSlider2"></div> </div>