@model IEnumerable<FlexGridData.Sale>

<h1>
    Row Styling
</h1>
<p>
    By default, the grid adds a 'wj-alt' class to every other
    row, and the 'wijmo.css' file uses this class to style
    alternating rows. You can disable this using some custom
    CSS, but it is often easier just to set the grid's
    <b>showAlternatingRows</b> property to false if you don't
    want alternating row styles applied at all.
</p>
<p>
    FlexGrid re-generates rows whenever the data source
    refreshes, which happens when the data is sorted, filtered,
    grouped, or edited. Because of this, you should not expect
    row properties to retain their values in most cases.
</p>
<p>
    If you do want to apply custom styles to rows, you should
    do this when handling the <b>loadedRows</b> event, which
    fires whenever the grid re-generates the rows.
</p>
<p>
    The row properties that affect styling are:
</p>
<ul>
    <li>
        <b>cssClass</b>: Specifies a class name to be added to cells
        in this row. The class name can be used in CSS rules to
        modify the style of cells in this row.
    </li>
    <li>
        <b>height</b>: Specifies height of the row in pixels.
    </li>
</ul>
<p>
    The grid below shows the effect of the grid's <b>showAlternatingRows</b>
    and the row's <b>cssClass</b> properties.
</p>

<label>
    showAlternatingRows
    <input id="showAlternatingRows" type="checkbox" checked="true">
</label>
@(Html.C1().FlexGrid().Id("theGrid").Bind(Model)
    .AutoGenerateColumns(false)
    .Columns(cs=>
    {
        cs.Add().Binding("Id").Header("ID").Width("50");
        cs.Add().Binding("Country").Header("Country");
        cs.Add().Binding("Product").Header("Product");
        cs.Add().Binding("Sales").Header("Sales").Format("c0");
        cs.Add().Binding("Expenses").Header("Expenses").Format("c0");
    })
)