Kettic DropDownTree control provides flexible options to help you create different types of DropDownTree structures. Apart from the DropDownTree we have demonstrated in the DataTable data binding tutorial, which display as text-only nodes and entries, you can also add checkboxes to the DropDownTree so that users can opt for items for corresponding purposes.

In this tutorial, we will introduce you to this built-in property of DropDownTree control in order to enable checkbox usage. In the list below, we will show you four types of states which you can set to your DropDownTree nodes with simple codings.

None: This is the default state for a DropDownTree, which means no checkbox is provided or being displayed. You can select this state when you don't want to add any checkbox to your tree.

SingleCheck: If this state is selected, when you check a single node from a DropDownTree entry, its corresponding child nodes or parent nodes will not be selected all along as in the following two states.

CheckChildNodes: If you select this checkbox state, once you check a node, the control will automatically check all of its child nodes and even sub child nodes, on condition that it has any of those.

TriState: This is a special checkbox state which has a little bit of both SingleCheck and CheckChildNodes. You can call it an intermediate kind of state, as it allows for mixture of both checked and unchecked child nodes for your DropDownTree control.

Sometimes you might want to select all of the nodes in a DropDownTree, or none at all. What can you do? As a matter of fact, we have provided two additional functions which can exactly solve that problem with two simple button settings here.

CheckAll: This button appears as the very first item in a DropDown menu, right above the DropDownTree. It appears as a checkbox, which, when clicked, can allow clicking of all the checkboxes in the DropDown.

ClearAll: When enabled, a delete button will appear on the top right corner of the DropDownTree, after the default message. If you click this ClearAll button, all your previous entry selections will be cleared right away.

Aspx codes:

<kettic:PerDropDownTree ID="PerDropDownTree1" runat="server" Width="250px" 
            DefaultMessage="Please select" CheckBoxes="SingleCheck" >
            <ButtonSettings ShowCheckAll="true" ShowClear="true" />
            <Localization Clear="Clear All" />
        </kettic:PerDropDownTree>

Sample of a DropDownTree with checkbox: