{% extends "admin/base_site.html" %}
{% load i18n %}
{% block bodyclass %}grp-doc{% endblock %}
{% block content-class %}{% endblock %}
{% block title %}Grappelli Documentation &raquo; Filter{% endblock %}

{% block extrahead %}
    <script type="text/javascript" charset="utf-8">
        (function($) {
            $(document).ready(function() {
                $("a.grp-pulldown-handler").click(function() {
                    var pulldownContainer = $(this).closest(".grp-pulldown-container");
                    $(pulldownContainer).toggleClass("grp-pulldown-state-open").children(".grp-pulldown-content").toggle();
                });
                $("a.grp-pulldown-handler").bind('mouseout', function() {
                    $(this).blur();
                });
            });
        })(django.jQuery);
    </script>
{% endblock %}

{% block breadcrumbs %}
    <ul>
        <li><a href="../">Grappelli Documentation</a></li>
        <li>Filter</li>
    </ul>
{% endblock %}

{% block content %}
    <h1>Filter</h1>
    <div class="g-d-c">
        <section>
            <div class="g-d-24">
                <div class="grp-doc-description">
                    <h1>Basics</h1>
                    <p>A filter is meant to appear in a <span class="grp-doc-class">.grp-row</span> within a <span class="grp-doc-class">.grp-module</span>. It is a <span class="grp-doc-class">.grp-filter</span> containing an <span class="grp-doc-class">.grp-pulldown-container</span> with an <span class="grp-doc-dom"><span>a.grp-button.grp-pulldown-handler</span></span> and a <span class="grp-doc-dom"><span>div.grp-pulldown-content</span></span>. The <span class="grp-doc-dom"><span>div.grp-pulldown-content</span></span> itself contains a <span class="grp-doc-class">.grp-module</span> for each filter. Each choice is represented in a <span class="grp-doc-class">.grp-row</span>. Please note that you have to use javascript to make the pulldown work (see source code below).</p>
                    <p>You can use filters in two predefined ways: as <strong>selects</strong> and as <strong>listings</strong> (more information below).</p>
                    <p><small>Note: Make sure to wrap the filter with spaceless-tags to avoid whitespaces.</small></p>
                </div>
            </div>
            <div class="g-d-24">
                <div class="grp-doc-code-source">
                    <div class="grp-module">
                        <div class="grp-row">
                            <div class="grp-filter">
                                <div class="grp-pulldown-container">
                                    <a href="javascript://" class="grp-button grp-pulldown-handler">Filter</a>
                                    <div class="grp-pulldown-content" style="display: none">
                                        <div class="grp-module">
                                            <div class="grp-row">
                                                Your filters go in here.
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="g-d-24">
                <div class="grp-doc-code"><pre><code>{% filter force_escape %}
<div class="grp-module">
    <div class="grp-row">
        {% templatetag openblock %} spaceless {% templatetag closeblock %}
            <div class="grp-filter">
                <div class="grp-pulldown-container">
                    <a href="javascript://" class="grp-button grp-pulldown-handler">Filter</a>
                    <div class="grp-pulldown-content" style="display: none">
                        Your filters go in here.
                    </div>
                </div>
            </div>
        {% templatetag openblock %} endspaceless {% templatetag closeblock %}
    </div>
</div>
{% endfilter %}</code></pre></div>
                <div class="grp-doc-code"><pre><code>{% filter force_escape %}
(function($) {
    $(document).ready(function() {
        $("a.grp-pulldown-handler").click(function() {
            var pulldownContainer = $(this).closest(".grp-pulldown-container");
            $(pulldownContainer).toggleClass("grp-pulldown-state-open").children(".grp-pulldown-content").toggle();
        });
        $("a.grp-pulldown-handler").bind('mouseout', function() {
            $(this).blur();
        });
        $(".grp-filter-choice").change(function(){
            location.href = $(this).val();
        });
    });
})(grp.jQuery);
                    {% endfilter %}</code></pre></div>
                </div>
            </div>
        </section>
        <section>
            <div class="g-d-24">
                <div class="grp-doc-description">
                    <h1>Filters as a Select</h1>
                    <p>Each filter is represented by a <span class="grp-doc-class">.grp-module</span> containing a <span class="grp-doc-dom"><span>select</span></span> where the choices are <span class="grp-doc-dom"><span>options</span></span>.</p>
                </div>
            </div>
            <div class="g-d-24">
                <div class="grp-doc-code-source">
                    <div class="grp-module">
                        <div class="grp-row">
                            <div class="grp-filter">
                                <div class="grp-pulldown-container">
                                    <a href="javascript://" class="grp-button grp-pulldown-handler">Filter</a>
                                    <div class="grp-pulldown-content" style="display: none">
                                        <div class="grp-module">
                                            <div class="grp-row">
                                                <label>Filter 1</label>
                                                <select class="grp-filter-choice">
                                                    <option value="1" selected="selected">Option 1</option>
                                                    <option value="2">Option 2</option>
                                                    <option value="3">Option 3</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="grp-module">
                                            <div class="grp-row">
                                                <label>Filter 2</label>
                                                <select class="grp-filter-choice">
                                                    <option value="1" selected="selected">Option 1</option>
                                                    <option value="2">Option 2</option>
                                                    <option value="3">Option 3</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="g-d-24">
                <div class="grp-doc-code"><pre><code>{% filter force_escape %}
<div class="grp-module">
    <div class="grp-row">
        {% templatetag openblock %} spaceless {% templatetag closeblock %}
            <div class="grp-filter">
                <div class="grp-pulldown-container">
                    <a href="javascript://" class="grp-button grp-pulldown-handler">Filter</a>
                    <div class="grp-pulldown-content" style="display: none">
                        <div class="grp-module">
                            <div class="grp-row">
                                <label>Filter 1</label>
                                <select class="grp-filter-choice">
                                    <option value="1" selected="selected">Option 1</option>
                                    <option value="2">Option 2</option>
                                    <option value="3">Option 3</option>
                                </select>
                            </div>
                        </div>
                        <div class="grp-module">
                            <div class="grp-row">
                                <label>Filter 1</label>
                                <select class="grp-filter-choice">
                                    <option value="1" selected="selected">Option 1</option>
                                    <option value="2">Option 2</option>
                                    <option value="3">Option 3</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% templatetag openblock %} endspaceless {% templatetag closeblock %}
    </div>
</div>
{% endfilter %}</code></pre></div>
    </section>
        <section>
            <div class="g-d-24">
                <div class="grp-doc-description">
                    <h1>Filters as a Listing</h1>
                    <p>Each filter is represented by a <span class="grp-doc-class">.grp-module</span> where the choices are <span class="grp-doc-class">.grp-rows</span>.</p>
                </div>
            </div>
            <div class="g-d-24">
                <div class="grp-doc-code-source">
                    <div class="grp-module">
                        <div class="grp-row">
                            <div class="grp-filter">
                                <div class="grp-pulldown-container">
                                    <a href="javascript://" class="grp-button grp-pulldown-handler">Filter</a>
                                    <div class="grp-pulldown-content" style="display: none">
                                        <div class="grp-module">
                                            <h3>Filter 1</h3>
                                            <div class="grp-row">
                                                <a href="">Choice 1</a>
                                            </div>
                                            <div class="grp-row grp-selected">
                                                <a href="">Choice 2</a>
                                            </div>
                                            <div class="grp-row">
                                                <a href="">Choice 3</a>
                                            </div>
                                        </div>
                                        <div class="grp-module">
                                            <h3>Filter 2</h3>
                                            <div class="grp-row">
                                                <a href="">Choice 1</a>
                                            </div>
                                            <div class="grp-row grp-selected">
                                                <a href="">Choice 2</a>
                                            </div>
                                            <div class="grp-row">
                                                <a href="">Choice 3</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="g-d-24">
                <div class="grp-doc-code"><pre><code>{% filter force_escape %}
<div class="grp-module">
    <div class="grp-row">
        {% templatetag openblock %} spaceless {% templatetag closeblock %}
            <div class="grp-filter">
                <div class="grp-pulldown-container">
                    <a href="javascript://" class="grp-button grp-pulldown-handler">Filter</a>
                    <div class="grp-pulldown-content" style="display: none">
                        <div class="grp-module">
                            <h3>Filter 1</h3>
                            <div class="grp-row">
                                <a href="">Choice 1</a>
                            </div>
                            <div class="grp-row grp-selected">
                                <a href="">Choice 2</a>
                            </div>
                            <div class="grp-row">
                                <a href="">Choice 3</a>
                            </div>
                        </div>
                        <div class="grp-module">
                            <h3>Filter 2</h3>
                            <div class="grp-row">
                                <a href="">Choice 1</a>
                            </div>
                            <div class="grp-row grp-selected">
                                <a href="">Choice 2</a>
                            </div>
                            <div class="grp-row">
                                <a href="">Choice 3</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% templatetag openblock %} endspaceless {% templatetag closeblock %}
    </div>
</div>
{% endfilter %}</code></pre></div>
    </section>
    
    </div>
{% endblock %}

