Overview

  • World Continents
  • World Oceans
telerik ninja image
New to Telerik UI for ASP.NET AJAX?

Telerik UI for ASP.NET AJAX is professional grade UI library with 120+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

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