ClientDataSource - Integration with RadDropDownList

Select Product
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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

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

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

The RadDropDownList property VirtualScrolling works in exactly the same manner as with any other data source control.

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

<!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" />
    <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:RadDropDownList RenderMode="Lightweight" ID="RadDropDownList1" runat="server"  Width="300px"
            DefaultMessage="Select Product" DataTextField="ProductName"
            DataValueField="ProductID" ClientDataSourceID="RadClientDataSource1"
            EnableVirtualScrolling="true" DropDownHeight="200px">
        </telerik:RadDropDownList>
    </div>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?