# MultiSelectListBox

Develop powerful and lightweight web applications using ASP.NET MVC controls. Learn more about the ComponentOne MVC controls in ASP.NET MVC documentation.

## Content



The MultiSelectListBox control is an advanced ListBox control that supports check boxes for each item, ability to select all items and a feature to filter the list. The control is represented by the **MultiSelectListBox** class which allows it to displays a list of items which may contain plain text or HTML, and allows users to select multiple items. The **MultiSelectListBox** class allows you to select all items in the list using the **ShowSelectAllCheckbox** property and filter the items using the **ShowFilterInput** property. It also allows you to programmatically retrieve the checked items using the CheckedItems property.

![MultiSelectListBox control showing a list of products.](https://cdn.mescius.io/document-site-files/images/2b3ac322-100e-4637-958d-fb40dcda3f44/images/multiselect-listbox.png)

The following example uses the Products table from NWind to show the list of products in the MultiSelectListBox control.

### Controller

```csharp
private C1NWindEntitiesOData db = new C1NWindEntitiesOData();
public ActionResult Index()
{
    return View(db.Products);
}
```

### View for the Controller

```razor
@using MultiSelectListBox_MVC.Models
@model IEnumerable<Product>
<div style="overflow: auto">
    <div class="col-md-5">
        <div id="multiSelectList" style="width:100%;max-width:400px;height:530px"></div>
    </div>
    <div class="col-md-7">
        <p>
            <b>Checked Items:</b>
        </p>
        <div style="height:500px; overflow-y:auto; border-top: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee;">
            <ul id="checkedItems" class="col-md-5"></ul>
            <ul id="checkedItems1" class="col-md-5"></ul>
        </div>
    </div>
</div>
@section Scripts{
    <script>
        c1.documentReady(function () {
            let multiSelectList = wijmo.Control.getControl("#multiSelectList");
            checkedItemsChanged(multiSelectList);
        })
        // CheckedItemsChanged event handler
        function checkedItemsChanged(sender) {
            let html = '',
                html1 = '',
                items = sender.checkedItems,
                n = items.length;
            if (n > 40) n = n / 2;
            else if (n > 20) n = 20;
            items.forEach(function (item) {
                n--;
                if (n >= 0) {
                    html += "<li>" + item.ProductName + "</li>";
                } else {
                    html1 += "<li>" + item.ProductName + "</li>";
                }
            });
            document.querySelector('#checkedItems').innerHTML = html;
            document.querySelector('#checkedItems1').innerHTML = html1;
        }
    </script>
}
@(Html.C1().MultiSelectListBox("#multiSelectList")
        .Bind("Model")
        .DisplayMemberPath("ProductName")
        .CheckedMemberPath("Discontinued")
        .ShowSelectAllCheckbox(true)
        .ShowFilterInput(true)
        .OnClientCheckedItemsChanged("checkedItemsChanged"))
```

In addition, it lets you set the minimum number of rows and/or columns required to enable virtualization in the ListBox control using the [VirtualizationThreshold](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.MultiSelectListBox-1.VirtualizationThreshold.html) property. For more information, see [Virtualization](/componentone/docs/mvc/online-mvc/workwithcontrols/Input/InputCommonFeatures/input-virtualization).