@model IEnumerable<FlexGridData.Sale>

<h1>
    FlexGridFilter Optimizations
</h1>
<p>
    The <b>wijmo.grid.filter</b> module provides a <b>FlexGridFilter</b>
    class that adds an Excel-style filtering UI to each column.
    The <b>FlexGridFilter</b> provides two types of filters:
    <b>value</b> filter and <b>condition</b> filter.
</p>
<p>
    The <b>value</b> filter editor contains a list of unique values
    for the user to choose from. If the grid contains a lot of data,
    this list of unique values may take a while to generate.
    Furthermore, if the list contains too many values, it is not
    very useful. A condition filter may be more appropriate
    in such cases. 
</p>
<p>
    This sample shows how you can optimize the <b>value</b> filters
    in three ways:
</p>
<ol>
    <li>
        <b>uniqueValues</b>: The 'Rating' column filter specifies
        the list of possible unique values in the column, so the
        filter does not have to scan the data to build the list.
    </li>
    <li>
        <b>maxValues</b>: The 'Sales' column filter specifies
        that the list should show up to 20 values only. You may
        use the filter field in the editor to select which
        values you are interested in.
    </li>
    <li>
        <b>filterType</b>: The 'Expenses' column filter specifies
        that the only filter type to be used is <b>condition</b>.
        A value filter is not even displayed for this column.
    </li>
</ol>

@(Html.C1().FlexGrid().Id("theGrid").Height(250)
    .Bind(b=>b.Bind(Model).DisableServerRead(true))
    .AutoGenerateColumns(false)
    .Columns(cs =>
    {
        cs.Add().Binding("Id").Header("ID");
        cs.Add().Binding("Country").Header("Country");
        cs.Add().Binding("Rating").Header("Rating");
        cs.Add().Binding("Sales").Header("Sales");
        cs.Add().Binding("Expenses").Header("Expenses");
    })
    .Filterable(f=>f.Id("theGridFilter"))
)