Silk skin

MultiColumnComboBox - Server Filtering

Hint: type at least three characters. For example "che".
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

You can use server filtering to display a subset of data, a reduced portion of the whole dataset. Basically, the widget displays just the data returned from the server depending on the search criterion of the user.

This is quite useful when the dataset is large and contains thousands or more records. In such situations, you can define a minimum filter length by using the MinLength property. For instance, if you set this option to 3, the widget will not start filtering the dataset until at least 3 characters are entered.

When server filtering is enabled, the web service request will not be performed until the user has typed in a sufficient amount of symbols.

  • DefaultCS.aspx
<%@ Page Language="c#" AutoEventWireup="true"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-thin" runat="server">
        <telerik:RadMultiColumnComboBox runat="server" ID="RadMultiColumnComboBox1" Filter="Contains"
            DropDownWidth="600px" Height="400" EnableServerFiltering="true"
            DataTextField="ProductName" MinLength="3" Skin="Default" Width="100%"
            EnforceMinLength="false" DataValueField="ProductID"
            Placeholder="select from the dropdown or type">
            <WebServiceSettings ServiceType="OData" Select-ContentType="JSON"
                Select-Url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"></WebServiceSettings>
            <ColumnsCollection>
                <telerik:MultiColumnComboBoxColumn Field="ProductName" Title="ProductName" />
                <telerik:MultiColumnComboBoxColumn Field="QuantityPerUnit" Title="QuantityPerUnit" />
                <telerik:MultiColumnComboBoxColumn Field="UnitPrice" Title="UnitPrice" />
                <telerik:MultiColumnComboBoxColumn Field="UnitsInStock" Title="UnitsInStock" />
            </ColumnsCollection>
            <NoDataTemplate>Write a search string above to get filtered results. For example, "che"</NoDataTemplate>
        </telerik:RadMultiColumnComboBox>
        <em style="font-size:12px; display:block; padding-top: 10px">Hint: type at least three characters. For example "che".</em>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?