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

Property Explorer

  • Item 1
    • Item 1.0
      • Item 1.0.0
        • Item 1.0.0.0
        • Item 1.0.0.1
          • Item 1.0.0.1.0
            • Item 1.0.0.1.0.0
              • Item 1.0.0.1.0.0.0
    • Item 1.1
    • Item 1.2
  • Demo Configurator
  • ;
  • /

This demo shows the most commonly used properties of RadDropDownTree and their effects on the control. When the entries fill up the entries area you could hover the control and a tool tip will appear. Keep in mind that all of the entries are removed when the delimiters are changed.

Here is a brief explanation of what these properties do.
  • The dropdown auto-width functionality of the RadDropDownTree is enabled through the AutoWidth property from the DropDownSettings section.
  • By setting the ExpandNodeOnSingleClick property to true the nodes of the embedded tree are expanded on single click on their text, otherwise double click is needed.
  • CheckNodeOnClick property allows checking and unchecking a node by clicking on it.
  • Closing the dropdown after a new selection is made can be controlled with the CloseDropDownOnSelection property from the DropDownSettings section.
  • EntriesDelimiter property is the delimiter between the entries (default value ';').
  • FullPathDelimiter property is the delimiter in the full path of an entry (default value '/').
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page AutoEventWireup="false" CodeFile="DefaultCS.aspx.cs" Inherits="DropDownTree.Examples.PropertyExplorer.DefaultCS"Language="c#"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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" />
    <div class="demo-container size-thin">
        <telerik:RadDropDownTree RenderMode="Lightweight" ID="RadDropDownTree1" runat="server" DefaultMessage="Please select" CheckBoxes="SingleCheck" Width="300px"
            DataFieldID="ID" DataFieldParentID="ParentID" TextMode="FullPath" ExpandNodeOnSingleClick="true" CheckNodeOnClick="true"
            DataTextField="Text" OnNodeDataBound="RadDropDownTree1_NodeDataBound">
            <DropDownSettings AutoWidth="Enabled" CloseDropDownOnSelection="false" />
        </telerik:RadDropDownTree>
    </div>
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1"></telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadDropDownTree1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Demo Configurator">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <asp:CheckBox runat="server" ID="CheckBoxAutoWidth" Text="Enable DropDown AutoWidth" 
                                ToolTip="DropDownSettings-AutoWidth" Checked="true" AutoPostBack="true" OnCheckedChanged="CheckBoxAutoWidth_CheckedChanged" />
                        </li>
                        <li>
                            <asp:CheckBox runat="server" ID="CheckBoxExpandOnSingleClick" Text="Expand Node On Single Click" 
                                ToolTip="ExpandOnSingleClick" Checked="true" AutoPostBack="true" OnCheckedChanged="CheckBoxExpandOnSingleClick_CheckedChanged" />
                        </li>
                        <li>
                            <asp:CheckBox runat="server" ID="CheckBoxCheckNodeOnClick" Text="Check Node On Click" 
                                ToolTip="CheckNodeOnClick" Checked="true" AutoPostBack="true" OnCheckedChanged="CheckBoxCheckNodeOnClick_CheckedChanged" />
                        </li>
                        <li>
                            <asp:CheckBox runat="server" ID="CloseDropDownOnSelection" Text="Close DropDown On Selection" 
                                ToolTip="DropDownSettings-CloseDropDownOnSelection" Checked="false" AutoPostBack="true" 
                                OnCheckedChanged="CloseDropDownOnSelection_CheckedChanged" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                             <label>Entries Delimiter:</label>
                            <qsf:DropDownList runat="server" ID="RadDropDownList1" OnSelectedIndexChanged="RadDropDownList1_SelectedIndexChanged" 
                                AutoPostBack="true">
                                <Items>
                                    <telerik:DropDownListItem Text="; " />
                                    <telerik:DropDownListItem Text=", " />
                                    <telerik:DropDownListItem Text=". " />
                                    <telerik:DropDownListItem Text=": " />
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                             <label>FullPath Delimiter:</label>
                            <qsf:DropDownList runat="server" ID="RadDropDownList2" OnSelectedIndexChanged="RadDropDownList2_SelectedIndexChanged"
                                 AutoPostBack="true">
                                <Items>
                                    <telerik:DropDownListItem Text="/" />
                                    <telerik:DropDownListItem Text="->" />
                                    <telerik:DropDownListItem Text="//" />
                                    <telerik:DropDownListItem Text="\\" />
                                </Items>
                            </qsf:DropDownList>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>


    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance