Sorting and Filtering Items

When you set the itemsSource property to an array of objects, the ComboBox automatically creates a CollectionView and exposes that through its collectionView property.

You can use the collection view to filter and sort the data, and you can use the view's currentItem instead of the combo's selectedItem:

Select an item:

Country: Australia

GDP (M$/yr): $1,225,286

Population (thousands): 23,940

GRP/Capita: $51,181

Rank: 10

// This file locates: "Scripts/Lesson/C1Input/ComboBoxSortingFiltering.js".
c1.documentReady(function () {
    var theCombo = wijmo.Control.getControl('#theCombo');
 
    // define a template for showing the current item's details
    var detailTemplate = '<div>' +
      '<div>Country: <b>{Country}</b></div>' +
      '<div>GDP (M$/yr): <b>{Gdpm:c0}</b></div>' +
      '<div>Population (thousands): <b>{Popk:n0}</b></div>' +
      '<div>GRP/Capita: <b>{Gdpcap:c0}</b></div>' +
      '<div>Rank: <b>{Id}</b></div>' +
      '</div>';
 
    // update detail when current item changes
    var view = theCombo.collectionView;
    view.currentChanged.addHandler(function (s, e) {
        var html = wijmo.format(detailTemplate, s.currentItem,
            function (data, name, fmt, val) {
                if (wijmo.isString(data[name])) {
                    val = wijmo.escapeHtml(data[name]);
                }
                return val;
            }
        );
        document.getElementById('detail').innerHTML = html;
    });
 
    // sort and filter the collectionView
    view.sortDescriptions.push(new wijmo.collections.SortDescription('Country', true));
    view.filter = function (item) {
        return item.Popk > 20000; // 20 million people or more
    }
    view.moveCurrentToFirst();
});

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

@model IEnumerable<Gdp>
 
<h1>
    @Html.Raw(Resources.C1Input.ComboBoxSortingFiltering_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Input.ComboBoxSortingFiltering_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Input.ComboBoxSortingFiltering_Text2)
</p>
 
<label for="theCombo">@Html.Raw(Resources.C1Input.ComboBoxSortingFiltering_Text3)</label>
@(Html.C1().ComboBox<Gdp>().Id("theCombo").Bind(Model).DisplayMemberPath("Country"))
<p id="detail"></p>