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.
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
- TextMode determines how the entries’ text will be visualized in the entry area.
- 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.