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

WebForms DropDownTree Overview

  • World Continents
  • World Oceans

Open the drop-down and choose a location. As a result of your selection the appropriate area of the map will be marked.

About RadDropDownTree for ASP.NET AJAX

The RadDropDownTree control is a combination of a lightweight dropdown and a tree control. In the RadDropDownTree we use the approach with entries. Basically, a new entry is created as a result of node's selection from the tree.

RadDropDownTree can be bound to various data sources such as DataTable, DataSet, Declarative DataSource types like SqlDataSource, ObjectDataSource, XmlDataSource, Linq DataSource and Entity DataSource.

RadDropDownTree 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

  • Server-side binding
  • Rich appearance styles
  • Templates - Header, Footer and Node template
  • DefaultMessage
  • DropDownSettings

More about RadDropDownTree for ASP.NET AJAX
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page Language="VB" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="DropDownTree.Examples.Overview.DefaultVB" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link type="text/css" href="styles.css" rel="stylesheet" />
</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:RadDropDownTree RenderMode="Lightweight" ID="RadDropDownTree1" runat="server" Width="250px" 
            DefaultMessage="Select location" ExpandNodeOnSingleClick="true"
            EnableFiltering="true" OnClientEntryAdding="OnClientEntryAdding">
            <DropDownSettings OpenDropDownOnLoad="true"  />
            <FilterSettings Highlight="Matches" EmptyMessage="Type here to filter" />
        </telerik:RadDropDownTree>
        <script type="text/javascript">
            function OnClientEntryAdding(sender, eventArgs) {
                $telerik.$("#WorldMap").css('background-image', 'url(images/' + eventArgs.get_entry().get_value() + '.png)');
            }
        </script>
        <div class="background" id="WorldMap"></div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance