<h1>
    FlexGrid
</h1>
<p>
    FlexGrid allows you to visualize and edit tabular data.
    It provides a variety of options about how to present and
    perform operations over the data, including selection,
    sorting, filtering, grouping, paging, editing, formatting,
    etc.
</p>
<p>
    Populate the FlexGrid by setting its <b>itemsSource</b>
    property to an array containing regular JavaScript objects.
    The grid will automatically generate columns to display
    the data items, and will allow users to select, sort, and
    edit the data.
</p>
@Html.C1().FlexGrid().Id("gridDefault")

<p>
    You can customize the grid columns by setting the
    <b>autoGenerateColumns</b> property to false and populating
    the columns property in code.
</p>
@Html.C1().FlexGrid().Id("gridCols")

<p>
    You can customize the default features of grid by setting
    the properties such as <b>selectionMode</b>, <b>allowSorting</b>, 
    <b>allowDragging</b>, <b>isReadOnly</b> and <b>headersVisibility</b>. 
</p>
@Html.C1().FlexGrid().Id("gridProps")
<label>
    <div class="header">selectionMode:</div>
    @(Html.C1().ComboBox().Id("selectionMode")
        .Bind(new[] { "None", "Cell", "CellRange", "Row", "RowRange", "ListBox" })
        .Text("CellRange")
    )
</label>
<label>
    <div class="header">allowSorting:</div>
    @(Html.C1().ComboBox().Id("allowSorting")
        .Bind(new[] { "True", "False" })
        .Text("True")
    )
</label>
<label>
    <div class="header">allowDragging:</div>
    @(Html.C1().ComboBox().Id("allowDragging")
        .Bind(new[] { "None", "Columns", "Rows", "Both" })
        .Text("Solumns")
    )
</label>
<label>
    <div class="header">isReadOnly:</div>
    @(Html.C1().ComboBox().Id("isReadOnly")
        .Bind(new[] { "True", "False" })
        .Text("False")
    )
</label>
<label>
    <div class="header">headersVisibility:</div>
    @(Html.C1().ComboBox().Id("headersVisibility")
        .Bind(new[] { "None", "Column", "Row", "All" })
        .Text("All")
    )
</label>