@model IEnumerable<FlexGridData.Sale>

<h1>
    Chaining Filters
</h1>

<p>
    The <b>CollectionView.filter</b> property allows you
    to specify one filtering function for each collection.
</p>
<p>
    In some cases, you may want to use two or more independent
    filter functions. For example, you may want to apply a filter
    on the incoming data and let the <b>FlexGridFilter</b>
    apply a second level of filtering to the data.
</p>
<p>
    To achieve this, you can chain multiple <b>CollectionView</b>
    objects so the output of one collection serves as input for
    the next.
</p>
<p>
    This example creates a <b>view</b> collection with a filter
    based on an input field, and a second <b>view2</b> collection
    based on the first collection's output. It binds a grid to
    second collection which has an additional, independent
    filter:
</p>

@Html.C1().CollectionViewService().Id("collectionView").Bind(Model).DisableServerRead(true)

<input id="theFilter" name="filter" placeholder="country filter" />

<p>
    Result (<span id="cnt"></span> items):
</p>
@(Html.C1().FlexGrid().Id("theGrid").Height(250)
    .ShowAlternatingRows(false)
    .HeadersVisibility(C1.Web.Mvc.Grid.HeadersVisibility.Column)
    .Filterable()
)