@model IEnumerable<FlexGridData.Sale>

<h1>
    Sorting
</h1>
<p>
    FkexGrid supports sorting via source <b>CollectionView</b>.
</p>
<p>
    By default, clicking on any column header sorts the data
    based on the column that is clicked. Clicking the same column
    header again reverts the sort order. Control-clicking
    the column header removes the sort.
</p>
<p>
    You may customize the sorting behavior using the grid's
    <b>showSort</b> and <b>allowSorting</b> properties. You
    can disable sorting on specific columns by setting the
    column's <b>allowSorting</b> property to false.
</p>
<p>
    The grid below does not allow sorting by 'ID'.
    All other columns support sorting.
</p>

@(Html.C1().FlexGrid().Id("theGrid")
    .DeferResizing(true)
    .AutoGenerateColumns(false)
    .Bind(Model)
    .Columns(cs=>
    {
        cs.Add().Binding("Id").Header("ID").Width("60");
        cs.Add().Binding("Country").Header("Country");
        cs.Add().Binding("Sales").Header("Sales");
        cs.Add().Binding("Expenses").Header("Expenses");
    })
)

<div class="panel panel-warning">
    <div class="panel-heading">
        Although the <b>CollectionView</b> class supports sorting
        on multiple properties, the grid does not provide a UI
        for that. You can build your own Excel-style sort dialogs
        if you need that functionality.
    </div>
</div>