@model IEnumerable<FlexGridData.Sale>

<h1>
    Persisting Layout
</h1>
<p>
    By default, FlexGrid allows users to resize and reorder
    columns.
</p>
<p>
    It is easy to extend this and allow users to select columns as well.
    For example, you can use the <b>MultiSelect</b> control below
    to select the columns to be displayed on the grid:
</p>
@Html.C1().MultiSelect().Id("columnPicker").DisplayMemberPath("header").CheckedMemberPath("visible").HeaderFormat("{count:n0} columns visible")
<br />
<br />
@Html.C1().FlexGrid().Id("theGrid").Bind(Model)

<p>
    You can use the grid's <b>columnLayout</b> property to allow users
    to save and restore column layouts. Click the buttons below
    to see how this works.
</p>
<button id="btnSave" class="btn btn-default">
    Save Layout
</button>
<button id="btnRestore" class="btn btn-default">
    Restore Layout
</button>