New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Filtering

The Telerik UI ComboBox for ASP.NET MVC allows the users to filter the available items by their text so they can find the one they need.

By default, the filtration is turned off. It can be performed over string values only (either the component's data has to be a collection of strings, or the filtering will be applied over the field, configured in the DataTextField option).

To enable the ComboBox filtering, set the desired filter operator through the Filter() method. The supported options are contains, startswith and endswith. When the filtering is enabled, the user can decide where the actual filtering happens:

Client Filtering

By design, the ComboBox uses client-side filtering and no specific option must be set. The actual operation is performed through JavaScript directly on the client. No requests are being made to the server.

    @(Html.Kendo().ComboBox()
        .Name("products")
        .Filter(FilterType.Contains)
        .DataTextField("ProductName")
        .DataValueField("ProductID") 
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("GetProducts", "ComboBox");
            })
        })
    )
public JsonResult GetProducts()
{
    var northwind = new DemoDBContext();
    var products = northwind.Products.Select(product => new ProductViewModel
    {
        ProductID = product.ProductID,
        ProductName = product.ProductName
    });

    return Json(products, JsonRequestBehavior.AllowGet);
}

For a runnable example, visit to the Client Filtering Demo of the ComboBox.

Server Filtering

To enable server filtering, set the ServerFiltering option of the DataSource to true. As a result, the data filtering will be performed server-side. The ComboBox triggers a Read request and sends the entered filter value along with the respective filter operator to the server. The data is filtered on the server, and the ready-to-use subset is returned back to the component.

By default, when the ComboBox is configured for server filtering, the filter value is automatically appended to the request query string through the text parameter. By accessing the text parameter within the Read Action method in the Controller, you can filter the data on the server and return the filtered data collection to the component.

    @(Html.Kendo().ComboBox()
        .Name("products")
        .Filter(FilterType.Contains)
        .DataTextField("ProductName")
        .DataValueField("ProductID") 
        .DataSource(source =>
        {
            source.Read(read => read.Action("ServerFiltering_GetProducts", "ComboBox"))
                .ServerFiltering(true);
        })
    )
public JsonResult ServerFiltering_GetProducts(string text)
{
    var northwind = new DemoDBContext();
    var products = northwind.Products.Select(product => new ProductViewModel
    {
        ProductID = product.ProductID,
        ProductName = product.ProductName
    });

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

    return Json(products, JsonRequestBehavior.AllowGet);
}

For a runnable example, visit to the Server Filtering Demo of the ComboBox.

Also, to define a minimum number of characters the user must type before triggering the Read request, specify the MinLength() option. For example, if you set the MinLength() to 3, the ComboBox will not start filtering the dataset until the user enters at least three characters.

    @(Html.Kendo().ComboBox()
        .Name("products")
        .Filter(FilterType.Contains)
        .MinLength(3)
        .AutoBind(false) // Disable the initial Read request during the ComboBox initialization.
        // Additional configuration.
    )

See Also

In this article