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

Binding to Telerik ClientDataSource

Since Q2 2014 the RadComboBox can be bound to RadClientDataSource control. This functionality is provided out of the box through the server-side ClientDataSourceID property.

RadComboBox needs the following properties in order to load its items properly:

  • DataText—defines the data source field name which will be shown as a text of the item.
  • DataValue—defines the data source field name which will be considered as a value of the item.

Some specifics about the load on demand scenarios are listed and explained in the next paragraphs:

  • When EnabledLoadOnDemand is set to true— the items are loaded on portions. This will enable the filtering and by default the value is set to "StartsWith". Setting Filter="Contains" will change this behavior. Please find more information in RadComboBox LoadOnDemand Overview help article.
  • When EnableLoadOnDemand is set to false—it is necessary initially to request the items using the RadComboBox client-side API method requestItems("") and passing empty string as parameter. For reference please follow Methods of the RadComboBox Object article.

The RadComboBox properties ShowMoreResultBox, ItemsPerRequest and VirtualScrolling work in exactly the same manner as with any other data source control.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page Title="" Language="VB"  AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="ComboBox_Examples_PopulatingWithData_Client_Side_Data_Binding_DefaultVB" %>

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

<!DOCTYPE html>
<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" />
    <telerik:RadClientDataSource runat="server" ID="RadClientDataSource1">
        <DataSource>
            <WebServiceDataSourceSettings ServiceType="OData">
                <Select Url="Products" DataType="JSON" />
            </WebServiceDataSourceSettings>
        </DataSource>
        <Schema DataName="d.results">
        </Schema>
    </telerik:RadClientDataSource>

    <div class="demo-container size-thin">
        <telerik:RadComboBox RenderMode="Lightweight" ID="RadComboBox1" runat="server" ClientDataSourceID="RadClientDataSource1"
            EnableLoadOnDemand="true" DataTextField="ProductName" DataValueField="ProducasdtID" 
            ShowMoreResultsBox="true" ItemsPerRequest="10" EnableVirtualScrolling="true" Width="300px">
        </telerik:RadComboBox>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance