Select from Drop-Down with Hierarchical Data via Telerik’s RadDropDownTree for ASP.NET AJAX
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.
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
- HeaderTemplate
- FooterTemplate
- DropDownNodeTemplate
- 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.
Peter Filipov
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.