@model IEnumerable<FlexGridData.Sale>

<h1>
    Column Properties
</h1>
<p>
    The <b>wijmo.grid.Column</b> class has
    <a href="http://helpcentral.componentone.com/nethelp/c1mvchelpers/wijmo.grid.Column.Class.html" target="_blank">
        almost 40 properties
    </a> which you can use to configure each column's appearance and behavior.
</p>
<p>
    These properties are set automatically for auto-generated
    columns, but when creating columns in code you will normally
    set a few of these:
</p>
<ul>
    <li>
        <b>binding</b>:
        Defines property of the data item to be shown in
        the column.
    </li>
    <li>
        <b>header</b>:
        Defines the content of column's header cell.
    </li>
    <li>
        <b>format</b>:
        Specifies format string used to convert numbers and dates into display
        strings for the column.
    </li>
    <li>
        <b>width</b>:
        Specifies width of the column in pixels. You may also use 'star' sizing
        to specify the column width in relative units (e.g. '2*' is
        twice as wide as '*').
    </li>
    <li>
        <b>align</b>:
        Defines the horizontal alignment of items in the column.
        This is set to null by default, which aligns data based
        on the column's data type. You can override the default
        by setting this property to 'left', 'right', or 'center'.
    </li>
    <li>
        <b>isReadOnly</b>:
        Determines whether the column can be edited by the user.
        You can disable editing altogether by setting the grid's
        <b>isReadOnly</b> property to false.
    </li>
    <li>
        <b>isRequired</b>:
        Determines whether users should be able to set values
        in the column to empty strings or null values.
    </li>
</ul>

<p>
    For example, the grid below has a custom set of columns with the main
    properties set in code:
</p>
@Html.C1().FlexGrid().Id("theGrid").Bind(Model)