<h1>
    Popup Column Picker
</h1>
<p>
    You can easily implement a column-picker UI by using the
    grid's <b>columns</b> property, a <b>ListBox</b> control,
    and C1 MVC's <b>showPopup</b> and <b>hidePopup</b>
    methods.
</p>
<p>
    For example, the grid below loads with an auto-generated
    set of columns. Click the gear icon at the top-left cell to
    show a <b>ListBox</b> where you can select the columns
    you want to display.
</p>
@Html.C1().FlexGrid().Id("theGrid").Height(300)
<div style="display:none">
    @Html.C1().ListBox().Id("theColumnPicker").CssClass("column-picker")
</div>

<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>