Multi-Column Combos

By default, the ComboBox displays one item per line in its drop-down list:

Default:

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 dropDownCssClass property:

Three Columns:

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 formatItem event and headerPath property::

Table-Style:

// This file locates: "Scripts/Lesson/C1Input/ComboBoxMultiColumn.js".
c1.documentReady(function () {
    var theCombo = wijmo.Control.getControl('#theCombo');
    var theComboCSS = wijmo.Control.getControl('#theComboCSS');
    var theComboTable = wijmo.Control.getControl('#theComboTable');
 
    // multi-column table-style
    var template = '<table><tr>' +
      '<td>{Country}</td>' +
      '<td class="number" title="GDP (million US$/year)">{Gdpm:c0}</td>' +
      '<td class="number" title="Population (thousands)">{Popk:n0}</td>' +
      '<td class="number" title="GDP/cap (US$/person/year)">{Gdpcap:c0}</td>' +
      '</tr></table>';
    theComboTable.formatItem.addHandler(function (s, e) {
        var html = wijmo.format(template, e.data);
        e.item.innerHTML = html;
    });
});

// This file locates: "Content/css/Lesson/C1Input/ComboBoxMultiColumn.css".
.wj-combobox {
  margin-bottom: 18px;
}
 
.cb-flex {
  display: flex;
  flex-wrap: wrap;
  width: 380px;
}
  .cb-flex .wj-listbox-item {
    width: 120px;
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
  }
 
.wj-listbox-item table {
  table-layout: fixed;
}
.wj-listbox-item td {
  width: 120px;
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wj-listbox-item td.number {
  width: 80px;
  text-align: right;
}

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1InputController : Controller
    {
        // GET: ComboBoxMultiColumn
        public ActionResult ComboBoxMultiColumn()
        {
            return View(Models.Gdp.GetData());
        }
    }
}

@model IEnumerable<Gdp>
 
<h1>
    @Html.Raw(Resources.C1Input.ComboBoxMultiColumn_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1Input.ComboBoxMultiColumn_Text1)
</p>
<label for="theCombo">@Html.Raw(Resources.C1Input.ComboBoxMultiColumn_Text2)</label>
@(Html.C1().ComboBox<Gdp>().Id("theCombo").Bind(Model).DisplayMemberPath("Country"))
<p>
    @Html.Raw(Resources.C1Input.ComboBoxMultiColumn_Text3)
</p>
<label for="theComboCSS">@Html.Raw(Resources.C1Input.ComboBoxMultiColumn_Text4)</label>
@(Html.C1().ComboBox<Gdp>().Id("theComboCSS").Bind(Model).DisplayMemberPath("Country").DropDownCssClass("cb-flex"))
 
<p>
    @Html.Raw(Resources.C1Input.ComboBoxMultiColumn_Text5)
</p>
<label for="theComboTable">@Html.Raw(Resources.C1Input.ComboBoxMultiColumn_Text6)</label>
@(Html.C1().ComboBox<Gdp>().Id("theComboTable").Bind(Model).HeaderPath("Country").DisplayMemberPath("Country"))