@model IEnumerable<FlexGridData.Sale>

<h1>
    Column Sizing
</h1>
<p>
    You can specify the column widths when creating them.
    Ater that, users may resize the FlexGrid columns using
    mouse. As in the case of Excel, users may either drag
    the column header's right edge to adjust the width, or 
    they may double-click the edge to auto-size the column
    to fits its content.
</p>
<p>
    If you want to prevent users from resizing the columns,
    you can either set the grid's <b>allowResizing</b> property
    to 'None', or prevent them from resizing specific columns
    by setting the column's <b>allowResizing</b> property to
    'false'.
</p>
<p>
    For example, the grid below does not allow resizing the 'ID'
    column. Other columns may be resized and auto-sized:
</p>
@(Html.C1().FlexGrid().Id("theGrid").Bind(Model)
    .AutoGenerateColumns(false)
    .Columns(cs=>
    {
        cs.Add().Binding("Id").Header("ID");
        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">
        The grid also allows you to resize multiple columns
        at once. Select a range of columns and press the 'control'
        key while resizing them with the mouse, and all selected
        columns will be resized at once.
    </div>
</div>

<div class="panel panel-warning">
    <div class="panel-heading">
        C1 MVC uses the HTML5 drag/drop API for column resizing.
        Unfortunately, most of the mobile devices do not support this API.
        If you want to support column resizing on mobile devices,
        we suggest to use the
        <a href="https://github.com/Bernardo-Castilho/dragdroptouch" target="_blank">
            DragDropTouch polyfill
        </a>.
    </div>
</div>