New to Telerik UI for ASP.NET AJAXStart a free 30-day trial

Getting Started with the Telerik WebForms DropDownTree

This article will helo you get started using the RadDropDownTree control. It contains the following sections:

Creating a Simple RadDropDownTree

  1. In a new AJAX Enabled Web Application, drop a RadDropDownTree onto the default form.

  2. Open the Smart Tag and set the Skin to Metro from the drop-down list. Then select the Open Configuration Wizard link. This step will display the RadDropDownTree Configuration Wizard window.

    RadDropDownTree Getting Started Chose Skin

Configure the RadDropDownTree Using the Configuration Wizard

  1. On the Configuration Wizard General tab, check the ExpandOnSingleClick checkbox. From the CheckBoxes drop-down list, choose SingleCheck:

    RadDropDownTree Getting Started Wizard General

  2. On the DropDownSettings tab, check the OpenDropDownOnLoad checkbox:

    RadDropDownTree Getting Started Wizard DropDown

  3. On the Filtering Settings tab, check the EnableFiltering checkbox. Type in the EmptyMessage TextBox Search for a tree node...:

    RadDropDownTree Getting Started Wizard Filtering

  4. On the Button Settings tab, check the ShowCheckAll checkbox:

    RadDropDownTree Getting Started Wizard Button

  5. Click Apply and then OK.

Switch from Designer to Source view. The generated markup for the RadDropDownTree should look like the following:

ASP.NET

<telerik:RadDropDownTree ID="RadDropDownTree1" 
    runat="server" 
    CheckBoxes="SingleCheck" 
    EnableFiltering="True" 
    ExpandNodeOnSingleClick="True" 
    Skin="Metro">
    <DropDownSettings AutoWidth="Enabled" 
        OpenDropDownOnLoad="True" />
    <ButtonSettings ShowCheckAll="True" />
    <FilterSettings Highlight="None" 
        EmptyMessage="Search for a tree node..."></FilterSettings>
</telerik:RadDropDownTree>

Populate RadDropDownTree with Simple Data in the Code-behind

In the code-behind you could populate the newly created RadDropDownTree with data in the Page_Load() method:

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        RadDropDownTree1.DataFieldID = "ID";
        RadDropDownTree1.DataFieldParentID = "ParentID";
        RadDropDownTree1.DataValueField = "Value";
        RadDropDownTree1.DataTextField = "Text";
        RadDropDownTree1.DataSource = GetData();
        RadDropDownTree1.DataBind();
    }
}

public DataTable GetData()
{
    DataTable table = new DataTable();
    table.Columns.Add("ID");
    table.Columns.Add("ParentID");
    table.Columns.Add("Value");
    table.Columns.Add("Text");

    table.Rows.Add(new String[] { "1", null, "World_Continents", "World Continents" });
    table.Rows.Add(new String[] { "2", null, "World_Oceans", "World Oceans" });

    table.Rows.Add(new String[] { "3", "1", "Asia", "Asia" });
    table.Rows.Add(new String[] { "4", "1", "Africa", "Africa" });
    table.Rows.Add(new String[] { "5", "1", "Australia", "Australia" });
    table.Rows.Add(new String[] { "6", "1", "Europe", "Europe" });
    table.Rows.Add(new String[] { "7", "1", "North_America", "North America" });
    table.Rows.Add(new String[] { "8", "1", "South_America", "South America" });

    table.Rows.Add(new String[] { "9", "2", "Arctic_Ocean", "Arctic Ocean" });
    table.Rows.Add(new String[] { "10", "2", "Atlantic_Ocean", "Atlantic Ocean" });
    table.Rows.Add(new String[] { "11", "2", "Indian_Ocean", "Indian Ocean" });
    table.Rows.Add(new String[] { "12", "2", "Pacific_Ocean", "Pacific Ocean" });
    table.Rows.Add(new String[] { "13", "2", "South_Ocean", "SouthOcean" });

    return table;
}     
	

On the initial load of the page you will see the RadDropDownTree:

RadDropDownTree Getting Started Initial load

After expanding all collapsed nodes, your RadDropDownTree should look like:

RadDropDownTree Getting Started Expanded

See Also