Select from Drop-Down with Hierarchical Data via Telerik’s RadDropDownTree for ASP.NET AJAX

February 25, 2013 .NET, Mobile 0 Comments
If you want to satisfy your curiosity which control expanded the Telerik’s ASP.NET Ajax suite in Q1.2013, you should continue reading. I will give you some feed, but first you need to answer me one question. Have you ever tried to put together Telerik’s ASP.NET ComboBox and TreeView to allow your users to select from hierarchical list? If you have, you must have stumbled upon at least a few issues. The good news is that with the Q1 2013 release, you now have a better option – the new DropDownTree control (the mystery is solved).

The main reasons why you’d like to use RadDropDownTree instead of any other alternative are:
        - intuitive configuration
        - support for various data sources
        - multiple selection via checkboxes
        - showing full path when a node is selected/checked

The main units of the control are DropDownNodes and Entries. As result of the users interaction for each of the selected/checked DropDownNodes new entries are created. You have access to the entries collection at client and server side. The DropDownNodes are accessible during the data bound events.

Here is a quick view of the control put in our overview demo scenario.
overview demo screenshot

First steps with RadDropDownTree

After all, the most important thing is what capabilities this control has and whether they are useful for you. Check the main features of the RadDropDownTree in the following list.
- Binding to various data sources.

- Single Selection.
- Default message
- Multiple-Selection via checkboxes. Three modes of checking.

  • SingleCheck
  • CheckChildNodes
  • TriState

- Templates

  • HeaderTemplate
  • FooterTemplate
  • DropDownNodeTemplate
template screenshot

- TextMode determines how the entries’ text will be visualized in the entry area.

  • Default
  • FullPath


- A full set of events will help you to handle every user interaction.

See It in Action

Let’s stop with the review and go straight to the development. I want to show you the control in action and how easy is to work with it compared to the following example. Instead of having all the markup and javascript, this is all we need:

private DataTable GetDataHierarchicalData()
{
    DataTable table = new DataTable();
    table.Columns.Add("ID");
    table.Columns.Add("ParentID");
    table.Columns.Add("Text");
 
    table.Rows.Add(new String[] { "1", null, "Africa" });
    table.Rows.Add(new String[] { "2", "1", "Egypt" });
    table.Rows.Add(new String[] { "3", "1", "Kenya" });
    table.Rows.Add(new String[] { "4", null, "Australia" });
    table.Rows.Add(new String[] { "5", "4", "South East Australia" });
    table.Rows.Add(new String[] { "6", null, "Asia" });
    table.Rows.Add(new String[] { "7", "6", "China" });
    table.Rows.Add(new String[] { "8", "6", "India" });
    table.Rows.Add(new String[] { "9", "6", "Indonesia" });
 
    return table;
}
 
protected void Page_Load(object sender, System.EventArgs e)
{
    if (!IsPostBack)
    {
        RadDropDownTree1.DataSource = GetDataHierarchicalData();
        RadDropDownTree1.DataBind();
    }
}


<telerik:RadDropDownTree runat="server" ID="RadDropDownTree1" DataFieldID="ID" DataFieldParentID="ParentID" DataTextField="Text"/>


What will come next?

A valid question is what we are going to do to improve our control. We are prepared for that inquiry and have a TODO list. Here are the main features that will be added:
       - Keyboard support
       - “Clear” and “Check all” buttons
       - Filtering
       - Drop down auto width

Keep in mind that your feedback is always considered and valuable for the further development of our products. I will be glad to answer every question.



RadControls for ASP.NET Ajax, AJAX, RadDropDownTree, ASP.NET, Web Forms
About the Author

Peter Filipov

is a software developer at one of Telerik's ASP.NET AJAX teams, where he is mainly responsible for RadAsyncUpload, RadProgressArea, RadOrgChart, RadPersistenceFramework and RadDropDownTree. He improves his creativity by trying to keep the above components one step ahead of the competition. Peter is passionate at demo presentations and every single detail of his work. In his spare time he is trying not only to improve his mental abilities but also his physical with yoga and volleyball.

Related Posts

.NET

What's New in Telerik UI for ASP.NET AJAX in R1 2019

Web .NET

R1 2019 Sneak Peek: Telerik Tools for ASP.NET AJAX, MVC and Core

.NET Mobile Kendo UI

From Responsive to Progressive: Making TripXpert a Progressive Web App

Comments

Comments are disabled in preview mode.
Technologies
Topics
Latest Stories
in Your Inbox

Subscribe to be the first to get our expert-written articles and tutorials for developers!

Follow us