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

WebForms DropDownList Overview

Select a product

Product name:
Available products:
Price:

In this demo, you may choose from a predefined list of products and obtain additional information about the product, when the "Get Details" button is clicked. With the possibility to load a large set of data, the RadDropDownList could fit perfectly in any heavy data scenarios.

About RadDropDownList for ASP.NET AJAX

The RadDropDownList control offers a simple and lightweight drop-down list of items for single selection. This simple control brings a very friendly experience to the end user, with enhanced mobile and keyboard support, server and client templates, rich client-side API with a comprehensive set ot events. The control also introduces a new load on demand mechanism, called Virtual Scrolling, which improves the performance and usability in scenarios with large amounts of data.

RadDropDownList and 120+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

Key Features

  • Simple drop-down list
  • Keyboard support
  • Mobile support
  • Great performance
  • Client templates
  • Server templates

More about RadDropDownList for ASP.NET AJAX
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page Language="VB" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="DropDownList.Examples.Overview.DefaultVB" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</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 no-bg size-wide">

        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
            <telerik:RadDropDownList RenderMode="Lightweight" ID="RadDropDownProducts" runat="server"  DropDownHeight="200px" Width="200px" Skin="Sunset"
                DefaultMessage="Select a product" OnItemDataBound="RadDropDownProducts_ItemDataBound"
                DataValueField="ProductID" DataTextField="ProductName" DataSourceID="SqlDataSource1">
            </telerik:RadDropDownList>
            <p class="buttons">
                <telerik:RadButton RenderMode="Lightweight" ID="GetDetails" runat="server"  Text="Get Details" Skin="Sunset"
                    OnClick="GetDetails_Click" />
                <p style="height: 140px"></p>
                <asp:CheckBox runat="server" ID="CheckBox1" Checked="false" SkinID="Sunset" Text="Enable Drop Down Auto Width" style="font-weight:bold;" OnCheckedChanged="CheckBox1_CheckedChanged" AutoPostBack="true" />
            </p>

            <asp:PlaceHolder runat="server" ID="ProductDetailsTable" Visible="true">
                <div class="order-summary">
                    <dl>
                        <dt>Product name:</dt>
                        <dd>
                            <asp:Literal ID="LabelProductName" runat="server" /></dd>
                        <dt>Available products:</dt>
                        <dd>
                            <asp:Literal ID="LabelUnitsInStock" runat="server" /></dd>
                        <dt class="price">Price:</dt>
                        <dd class="price">
                            <asp:Literal ID="LabelPriceValue" runat="server" /></dd>
                    </dl>
                </div>
            </asp:PlaceHolder>
        </telerik:RadAjaxPanel>
    </div>

    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        SelectCommand="SELECT [ProductID], [ProductName], [UnitPrice], [UnitsInStock] FROM [Products]"></asp:SqlDataSource>


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

Support & Learning Resources

Find Assistance