DropDownList - Client-side Data Binding

Web service binding

Select Company

Page methods

Select Customer

OData binding

Select Food Category

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

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 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: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

Help Us Improve

Was this example helpful?