@model IEnumerable<Gdp>

<h1>
    Multi-Column Combos
</h1>

<p>
    By default, the ComboBox displays one item per line in
    its drop-down list:
</p>
<label for="theCombo">Default:</label>
@(Html.C1().ComboBox<Gdp>().Id("theCombo").Bind(Model).DisplayMemberPath("Country"))
<p>
    If you have many short items, it may be interesting to
    use multiple columns in the drop-down.
    You can accomplish this with a little CSS and the
    <b>dropDownCssClass</b> property:
</p>
<label for="theComboCSS">Three Columns:</label>
@(Html.C1().ComboBox<Gdp>().Id("theComboCSS").Bind(Model).DisplayMemberPath("Country").DropDownCssClass("cb-flex"))

<p>
    If the items are complex objects, you may want to render
    a single item per line, but with additional detail,
    as in a table or grid.
    You can accomplish this with the <b>formatItem</b>
    event and <b>headerPath</b> property::
</p>
<label for="theComboTable">Table-Style:</label>
@(Html.C1().ComboBox<Gdp>().Id("theComboTable").Bind(Model).HeaderPath("Country").DisplayMemberPath("Country"))