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

Client-side Data Binding

Web service binding

Select Company

Page methods

Select Customer

OData binding

Select Food Category

The RadDropDownList can be bound on the client using web services, WCF services and page methods. It can also be bound to odata services through the RadODataDataSource control.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="DropDownList.Examples.PopulatingWithData.DefaultCS" %>

<!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:RadODataDataSource runat="server" ID="RadODataDataSource1">
        <Schema>
            <telerik:DataModel ModelID="Category" Set="Categories">
                <telerik:DataModelField FieldName="CategoryID" />
                <telerik:DataModelField FieldName="CategoryName" />
            </telerik:DataModel>
        </Schema>
    </telerik:RadODataDataSource>

    <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1">

        <div class="demo-container size-thin">
            <h2>Web service binding</h2>
            <telerik:RadDropDownList RenderMode="Lightweight" ID="RadDropDownList1" Width="220px" runat="server"  DefaultMessage="Select Company" DropDownHeight="200px">
                <WebServiceSettings Method="LoadProducts" Path="DropDownListProducts.asmx" />
            </telerik:RadDropDownList>
            <telerik:RadButton RenderMode="Lightweight" runat="server"  Text="Select" ID="Button2" OnClick="Button1_Click" />
            <p>
                <asp:Label runat="server" ID="Label1" />
            </p>
        </div>
        <div class="demo-container size-thin">
            <h2>Page methods</h2>
            <telerik:RadDropDownList RenderMode="Lightweight" ID="RadDropDownList2" Width="220px" runat="server"   DefaultMessage="Select Customer" DropDownHeight="200px">
                <WebServiceSettings Method="GetCustomerNames" Path="defaultcs.aspx" />
            </telerik:RadDropDownList>
            <telerik:RadButton RenderMode="Lightweight" runat="server"  Text="Select" ID="Button3" OnClick="Button2_Click" />
            <p>
                <asp:Label runat="server" ID="Label2" />
            </p>
        </div>
        <div class="demo-container size-thin">
            <h2>OData binding</h2>
            <telerik:RadDropDownList RenderMode="Lightweight" ID="RadDropDownList3" Width="220px" runat="server"  DefaultMessage="Select Food Category" DropDownHeight="200px"
                DataModelID="Category" DataTextField="CategoryName" ODataDataSourceID="RadODataDataSource1" DataValueField="CategoryID">
            </telerik:RadDropDownList>
            <telerik:RadButton RenderMode="Lightweight" runat="server"  Text="Select" ID="Button4" OnClick="Button3_Click" />
            <p>
                <asp:Label runat="server" ID="Label3" />
            </p>
        </div>

    </telerik:RadAjaxPanel>

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

Support & Learning Resources

Find Assistance