Combining SlickGrid Filter Examples

Question

I like the functionality of the Filter in this example:

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

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

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

In that it can be hidden and shown via button click.

Is it possible to have the Filters from the first link, with the "hide-ability" of the Filter from the second link? Thanks!

Answer 1

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

For example, navigate to the first link, and replace the contents of the URL bar with:

javascript:grid.hideHeaderRowColumns()

and hit Enter. You should see the filter bar slide up and away. If you are building your app from the first example code, you should be able to call these functions from almost anywhere, ie.

<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 styled header bar:

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

And the 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>