@{ 
    var countries = new[] { "US", "Germany", "UK", "Japan", "Italy", "Greece" };
    var products = new[] { "Phones", "Cars", "Stereos", "Watches", "Computers" };
}

<h1>
    Master Detail
</h1>
<p>
    The simplest way to deal with hierarchical data is
    the master-detail model. Use a control to select the
    main item and one or more additional controls to show
    the main item's details.
</p>

<p>
    For example, the ComboBox below is used as a master
    control. Select a country from the combo and the
    grid below will show the items in that country:
</p>

<label>
    Select a country:
    @Html.C1().ComboBox().Id("theCombo").Bind(countries)
</label>
@Html.C1().FlexGrid().Id("theGridDetail")

<p>
    In the next example, FlexGrid is used as the master
    control. Select an item on the grid and see the details
    in the controls below:
</p>

<h3>
    Master
</h3>
@Html.C1().FlexGrid().Id("theGridMaster").SelectionMode(C1.Web.Mvc.Grid.SelectionMode.Row).IsReadOnly(true)

<h3>
    Detail
</h3>
<table class="tbl-spaced">
    <tr>
        <td>Country:</td>
        <td id="theCountry" class="bnd-ctl"></td>
        @Html.C1().ComboBox("#theCountry").Bind(countries)
    </tr>
    <tr>
        <td>Product:</td>
        <td id="theProduct" class="bnd-ctl"></td>
        @Html.C1().ComboBox("#theProduct").Bind(products)
    </tr>
    <tr>
        <td>Date:</td>
        <td id="theDate" class="bnd-ctl"></td>
        @Html.C1().InputDate("#theDate")
    </tr>
    <tr>
        <td>Sales:</td>
        <td id="theSales" class="bnd-ctl"></td>
        @Html.C1().InputNumber("#theSales").Format("n2").Step(10)
    </tr>
    <tr>
        <td>Expenses:</td>
        <td id="theExpenses" class="bnd-ctl"></td>
        @Html.C1().InputNumber("#theExpenses").Format("n2").Step(10)
    </tr>
</table>
