Edit this page

ComboBox HtmlHelper Overview

The ComboBox HtmlHelper extension is a server-side wrapper for the Kendo UI ComboBox widget.

It enables you to configure the Kendo UI ComboBox widget from server-side code. The ComboBox enables the user to enter custom values through the keyboard. It represents a richer version of the <select> element and provides support for local and remote data binding, item templates, and configurable options for controlling the list behavior.

For more information on the HtmlHelper, refer to the article on the ComboBox HtmlHelper for ASP.NET MVC.

Basic Usage

The following example demonstrates how to define the ComboBox by using the ComboBox HtmlHelper.

Example
    @(Html.Kendo().ComboBox()
        .Name("combobox")
        .Placeholder("Select product")
        .DataTextField("ProductName")
        .DataValueField("ProductID")
        .Filter(FilterType.StartsWith)
        .DataSource(source => {
            source.Read(read =>
            {
                read.Action("Products_Read", "ComboBox");
            })
            .ServerFiltering(true);
        })
    )


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

        public JsonResult Products_Read(string text)
        {
            var result = GetProducts();

            if (!string.IsNullOrEmpty(text))
            {
                result = result.Where(p => p.ProductName.Contains(text)).ToList();
            }

            return Json(result);
        }

        private static IEnumerable<ProductViewModel> GetProducts()
        {
            var result = Enumerable.Range(0, 50).Select(i => new ProductViewModel
            {
                ProductID = "" + i,
                ProductName = "Product " + i
            });

            return result;
        }
    }

Configuration

The following example demonstrates the basic configuration of the ComboBox HtmlHelper and how to get the ComboBox instance.

    @(Html.Kendo().ComboBox()
        .Name("combobox")
        .Placeholder("Select product")
        .DataTextField("ProductName")
        .DataValueField("ProductID")
        .HtmlAttributes(new { style = "width:100%;" })
        .Filter("contains")
        .AutoBind(true)
        .MinLength(3)
        .Height(400)
        .DataSource(source => source
            .Read(read => read.Action("Products_Read", "ComboBox"))
            .ServerFiltering(true)
        )
        .Events(events => events
            .Change("onChange")
            .Select("onSelect")
            .Open("onOpen")
            .Close("onClose")
            .DataBound("onDataBound")
            .Filtering("onFiltering")
        )
    )

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

See Also