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

Filtering Overview

The ASP.NET Core AutoComplete provides options for filtering its data and displaying only a subset of the data.

Server Filtering

When using Server Filtering a reduced portion of the whole dataset is returned from the server. Displaying a subset of the whole data is useful when working with large datasets that contain thousands of records. In such cases, you can improve performance and loading times by defining a minimum filter length by using the MinLength option. For example, if you set MinLength to 3, the UI for ASP.NET Core AutoComplete will not send a request to the remote endpoint and start filtering the dataset until the user enters at least three characters.

When you apply server filtering, only the source of the AutoComplete is filtered. To page and filter the dataset, use the virtualization feature.

To configure the UI for ASP.NET Core AutoComplete for Server Filtering:

  1. Set the ServerFiltering option of the DataSource component to true.
  2. Set the Filter property of the AutoComplete.

The following example demonstrates how to configure AutoComplete for Server Filtering.

    @(Html.Kendo().AutoComplete()
          .Name("products")
          .DataTextField("ProductName")
          .Filter(FilterType.Contains)
          .DataSource(source =>
          {
              source.Read(read =>
              {
                  read.Action("ServerFiltering_GetProducts", "AutoComplete")
                    .Data("onAdditionalData");
              })
              .ServerFiltering(true);
          })
    )
<kendo-autocomplete name="products"
                    datatextfield="ProductName"
                    filter="FilterType.Contains">
    <datasource server-filtering="true">
        <transport>
            <read url="@Url.Action("ServerFiltering_GetProducts", "AutoComplete")" data="onAdditionalData"/>
        </transport>
    </datasource>

</kendo-autocomplete>
    <script>
        function onAdditionalData() {
            return {
                text: $("#products").val()
            };
        }
    </script>
    public JsonResult ServerFiltering_GetProducts(string text)
    {
        using (var northwind = GetContext())
        {
            var products = northwind.Products.Select(product => new ProductViewModel
            {
                ProductID = product.ProductID,
                ProductName = product.ProductName,
                UnitPrice = product.UnitPrice.Value,
                UnitsInStock = product.UnitsInStock.Value,
                UnitsOnOrder = product.UnitsOnOrder.Value,
                Discontinued = product.Discontinued
            });

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

            return Json(products.ToList());
        }
    }

Client Filtering

For smaller sets of data, the UI for ASP.NET Core AutoComplete also supports Client Filtering. To configure it, set the ServerFiltering property to false. This way the AutoComplete dataset will be filtered on the client without sending additional requests to a remote endpoint.

    @(Html.Kendo().AutoComplete()
          .Name("products")
          .DataTextField("ProductName")
          .Filter(FilterType.Contains)
          .DataSource(source =>
          {
              source.Read(read =>
              {
                  read.Action("ServerFiltering_GetProducts", "AutoComplete");
              })
              .ServerFiltering(false);
          })
    )
<kendo-autocomplete name="products"
                    datatextfield="ProductName"
                    filter="FilterType.Contains">
    <datasource server-filtering="false">
        <transport>
            <read url="@Url.Action("ServerFiltering_GetProducts", "AutoComplete")" />
        </transport>
    </datasource>

</kendo-autocomplete>
    public JsonResult ServerFiltering_GetProducts()
    {
        using (var northwind = GetContext())
        {
            var products = northwind.Products.Select(product => new ProductViewModel
            {
                ProductID = product.ProductID,
                ProductName = product.ProductName,
                UnitPrice = product.UnitPrice.Value,
                UnitsInStock = product.UnitsInStock.Value,
                UnitsOnOrder = product.UnitsOnOrder.Value,
                Discontinued = product.Discontinued
            });

            return Json(products.ToList());
        }
    }

See Also

In this article