@model IEnumerable<FlexGridData.Sale>

<h1>
    Auto-Sizing
</h1>
<p>
    FlexGrid has <b>autoSizeColumns</b> and <b>autoSizeRows</b>
    methods to automatically size rows and columns to fit their content.
</p>
<p>
    The auto-size methods take special styles and formats
    applied to the cells into account.
</p>
<p>
    For example, click this button to size the columns of the
    grid below to fit their content.
</p>
<button id="autoSizeColumns" class="btn byn-default">
    autoSizeColumns
</button>

@(Html.C1().FlexGrid().Id("theGrid").Height(150)
    .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">
        Automatically resizing rows and columns is one of the
        most time-consuming grid operations. If your grid has
        more than a few hundred rows, avoid auto-sizing and
        consider setting the column sizes to explicit numeric
        values instead.
    </div>
</div>