# ASP.NET MVC ComboBox Overview

The Telerik UI ComboBox HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI ComboBox widget.

The ComboBox displays a list of values and allows for a single selection from the list.

* [Demo page for the ComboBox HtmlHelper](https://demos.telerik.com/aspnet-mvc/combobox/index)

## Initializing the ComboBox

The following example demonstrates how to define the ComboBox.

```Razor HtmlHelper
    @(Html.Kendo().ComboBox()
        .Name("combobox")
        .DataTextField("ProductName")
        .DataValueField("ProductID")
        .DataSource(source => {
            source.Read(read =>
            {
                read.Action("Products_Read", "ComboBox");
            });
        })
    )
```

```C# Controller

    public class ComboBoxController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public JsonResult Products_Read()
        {
            var result = Enumerable.Range(0, 50).Select(i => new ProductViewModel
            {
                ProductID = "" + i,
                ProductName = "Product " + i
            });

            return Json(result, JsonRequestBehavior.AllowGet);
        }
    }
```

## Basic Configuration

The following example demonstrates the basic configuration of the ComboBox.

```Razor HtmlHelper
    @(Html.Kendo().ComboBox()
        .Name("combobox")
        .DataTextField("ProductName")
        .DataValueField("ProductID")
        .HtmlAttributes(new { style = "width:100%" })
        .Filter("contains")
        .MinLength(3)
        .Height(290)
        .HeaderTemplate(
            "<div class=\"dropdown-header k-widget k-header\">" +
                "<span>Products</span>" +
            "</div>")
        .FooterTemplate("Total <strong>#: instance.dataSource.total() #</strong> items found")
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("Products_Read2", "DropDownList");
            })
            .ServerFiltering(false);
        })
        .Events(e => e
            .Change("onChange")
            .Select("onSelect")
            .Open("onOpen")
            .Close("onClose")
            .DataBound("onDataBound")
            .Filtering("onFiltering")
        )
    )

    <script type="text/javascript">
        $(function () {
            // The Name() of the ComboBox is used to get its client-side instance.
            var combobox = $("#combobox").data("kendoComboBox");
            console.log(combobox);
        });
    </script>
```

## Functionality and Features

| Feature                                                                                                                | Description                                                                                                                         |
| ---------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| [Binding](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/editors/combobox/binding/binding-overview)     | You can bind the ComboBox to local arrays of data and to remote data services.                                                      |
| [Appearance](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/editors/combobox/appearance)                | You can customize the appearance of the ComboBox by configuring its size, fill mode, and border radius.                             |
| [Grouping](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/editors/combobox/grouping)                    | In the ComboBox, you can display data items that are grouped by a specific model field.                                             |
| [Virtualization](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/editors/combobox/virtualization)        | The built-in virtualization of the ComboBox allows you to display large datasets.                                                   |
| [Filtering](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/editors/combobox/filtering)                  | You can display only a subset of the available data by using the server-side filtering of the ComboBox.                             |
| [Templates](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/editors/combobox/templates)                  | To take full control over the rendering of the ComboBox items, popup header, and popup footer, you can use the available templates. |
| [Cascading](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/editors/combobox/cascading)                  | You can use a series of two or more cascaded ComboBoxes.                                                                            |
| [Accessibility](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/editors/combobox/accessibility/overview) | The ComboBox is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support.                    |

> tip To learn more about the appearance, anatomy, and accessibility of the ComboBox, visit the [Progress Design System documentation](https://www.telerik.com/design-system/docs/components/combobox/)—an information portal offering rich component usage guidelines, descriptions of the available style variables, and globalization support details.

## Next Steps

* [Getting Started with the ComboBox](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/editors/combobox/getting-started)
* [Basic Usage of the ComboBox HtmlHelper for ASP.NET MVC (Demo)](https://demos.telerik.com/aspnet-mvc/combobox/index)

## See Also

* [Using the API of the ComboBox for ASP.NET MVC (Demo)](https://demos.telerik.com/aspnet-mvc/combobox/api)
* [Knowledge Base Section](https://www.telerik.com/aspnet-mvc/documentation/knowledge-base)