@model IEnumerable<FlexGridData.Sale>

<h1>
    Adding and Removing Rows
</h1>
<p>
    In most of the cases, you do not need to write code to add or
    remove rows from the grid. By default, it has
    one row of column headers and one row per bound item
    which is added automatically when you set the grid's
    <b>itemsSource</b> property.
</p>
<p>
    If you want to allow users to add or remove rows at
    runtime, use the following properties:
</p>
<ul>
    <li>
        <b>allowAddNew</b>:
        Setting this property to true causes the grid to show
        a new row 'template' at the bottom of the grid. Users
        may add new rows to the <b>itemsSource</b> array by
        filling out the cells in the new row template.
    </li>
    <li>
        <b>allowRemove</b>:
        Setting this property to true causes the grid to handle
        the 'Delete' key and remove selected rows. Users may
        click row headers to select the row, then press 'Delete'
        to remove the bound items from the <b>itemsSource</b>
        array.
    </li>
    <li>
        <b>newRowAtTop</b>:
        Setting this property to true causes the grid to show the
        new row template at the top of the grid rather than at
        the bottom.
    </li>
</ul>
<p>
    The grid below shows how this works:
</p>

<label>
    newRowAtTop
    <input id="newRowAtTop" type="checkbox">
</label>

@Html.C1().FlexGrid().Id("theGrid").Bind(b=>b.Bind(Model).DisableServerRead(true)).Height(150)