Quick Start: Create a Simple DropDownTree |KT.UI for ASP.NET AJAX

Create a Simple DropDownTree in ASP.NET AJAX

Home > How to > DropDownTree Getting Started

A DropDownTree is, as a matter of fact, a more advanced and versatile version of a DropDownList. It perfectly combines a dropdown control and a tree component. Currently it is being widely used in many web pages as well as software and application interface.

In the following sections, we will show you the detailed steps to help you get started with Kettic DropDownTree control. You will see how you can easily create an ASP.NET Web Application in the first place, add a DropDownTree control to your created web page, and then customize corresponding DropDownTree properties to meet your requirements.

Create an ASP.NET Web Application

Open your Visual Studio 2010, and create a new website by selecting New| Web Site in your Visual Studio 2010 File menu.
Now you can select "ASP.NET Web Site". After that, enter a name and location path as you prefer.

Now it is done. A new ASP.NET Web Site is created, and you can proceed with the next step to add a DropDownTree control to your web page.

Add DropDownTree Control to Page

Go to the Toolbox in your Visual Studio, and then drag an AjaxPanel component to the default web page from the web site you have created in the previous step.
Now you can drag a dropdowntree component from your Toolbox and drop to your AjaxPanel you have just added.
The DropDownTree control is added to your web page successfully!

Custom DropDownTree Properties

Select Design View for the default web page in your web site, and click the SmartTag from the PerDropDownTree.

Now click "Open Configuration Wizard" and a Configuration Wizard Window pops up. Then please tick "ExpandOnSingleClick" from General Tab, and then select "SingleCheck" from the CheckBoxes.

Under DropDownSettings tab, please select "Enabled" for AutoWidth so that we will be creating a DropDownTree with AutoWidth.

Now please click "OK" to all the settings and changes you have just made.
Now the final step! Please select a skin that you like from the available Skin templates.