@model IEnumerable<FlexGridData.Sale>

<h1>
    Row Details
</h1>
<p>
    Sometimes rows are bound to data objects that contain
    more information than what would fit easily on a regular grid.
</p>
<p>
    In these scenarios, you may want to use the
    <b>FlexGridDetailProvider</b> class that is included with
    the <b>wijmo.grid.detail</b> module.
</p>
<p>
    <b>FlexGridDetailProvider</b> extends the <b>FlexGrid</b>
    class by adding collapse/expand buttons to row headers, and a
    <b>createDetailCell</b> method that can be used to provide
    additional details about an item. The detail information
    is shown in a 'detail row' added to the grid when the
    details are expanded, and removed when they are collapsed.
</p>

<h3>
    HTML in Row Details
</h3>
<p>
    This grid shows product categories on each row. Expanding
    the rows shows an HTML element with information about
    the products in that category.
</p>
@(Html.C1().FlexGrid().Id("htmlDetail").Height(250)
    .AutoGenerateColumns(false)
    .Columns(cs=>
    {
        cs.Add().Binding("CategoryName").Header("Category Name").Width("*");
        cs.Add().Binding("Description").Header("Description").Width("2*");
    })
    .ShowDetailRow(d => d.Id("htmlDetailRow"))
)

<h3>
    Grids in Row Details
</h3>
<p>
    You can add anything you want to the detail rows,
    including other grids. This example shows the same
    categories, but the detail row uses another grid
    to show the products.
</p>
@(Html.C1().FlexGrid().Id("gridDetail").Height(250)
    .AutoGenerateColumns(false)
    .Columns(cs=>
    {
        cs.Add().Binding("CategoryName").Header("Category Name").Width("*");
        cs.Add().Binding("Description").Header("Description").Width("2*");
    })
    .ShowDetailRow(d => d.Id("gridDetailRow"))
)