@model IEnumerable<FlexGridData.Sale>

<h1>
    Column Styling
</h1>
<p>
    FlexGrid columns have a few properties that affect styling:
</p>
<ul>
    <li>
        <b>cssClass</b>: Specifies a class name to be added to cells
        in the column. The class name can be used in CSS rules to
        modify the style of cells in the column.
    </li>
    <li>
        <b>align</b>: Specifies the horizontal alignment of text
        in the cells. This property is set to null by default, which
        causes the grid to select the alignment based on the column's
        <b>dataType</b> (numbers are right-aligned, Boolean values
        are centered, and other types are left-aligned).
        If you want to override the default alignment, set this property
        to 'left' 'right', or 'center'.
    </li>
    <li>
        <b>wordWrap</b>: Specifies whether text in the cells should be
        allowed to wrap within the cell. Note that the grid will not
        adjust the row heights to fit the cell content unless you call
        the <b>autoSizeRows</b> method.
    </li>
</ul>
<p>
    The <b>cssClass</b> is the most powerful and flexible of the
    three properties, but <b>align</b> and <b>wordWrap</b> are
    simple and convenient. Also, <b>align</b> and <b>wordWrap</b>
    apply to all cells, including headers, while <b>cssClass</b>
    applies only to the scrollable cells.
</p>
<p>
    The grid below shows the effect of these properties. 
</p>
@Html.C1().CollectionViewService().Id("collectionView").Bind(Model)
@(Html.C1().FlexGrid().Id("theGrid")
    .ItemsSourceId("collectionView")
    .ShowAlternatingRows(false)
)

<h3>
    Formatting cells
</h3>
<p>
    The <b>cssClass</b> property is useful for formatting
    entire columns. If you have to format specific cells,
    perhaps based on their content or some other criteria,
    use the <b>formatItem</b> event instead.
</p>
<p>
    The grid below uses <b>formatItem</b> to add class
    names to numeric cells so that their style depends on
    their values. 
</p>
@(Html.C1().FlexGrid().Id("theGridFormatItem")
    .ItemsSourceId("collectionView")
    .ShowAlternatingRows(false)
)
