When selecting entries from a DropDownTree, you might need to add delimiters to separate entries in the entry area. Kettic DropDownTree control has already got that covered by providing a functionality to help you create and customize delimiters for entry separation.

Right now Kettic DropDownTree control provides two types of delimiters for you to select from. The first type of the DropDownTree delimiters can be used when a number of entries are selected to separate them from each other. On the other hand, the second type of the delimiters can only be applied when a single entry is selected to separate the node from its parent node, if it is a child node. This delimiter can be of great help as it can clearly indicate the hierarchy in the DropDownTree.

EntriesDelimiter: This entries delimiter property can be easily customized with the EntriesDelimiter property of Kettic DropDownTree component. As has been introduced above, this EntriesDelimter is used to when a bunch of entries are selected in order to separate them from each other. We have provided sample codes and demo screenshot below, and you can see a semicolon is added between item1.0 and item 1.1 which you have selected.

FullPathDelimiter: Users can also set the delimiter with this FullPathDelimiter property. In general, this is delimiter is used when a single entry is selected. But of course it is also okay if you want to add this when selecting a few entries. This full path delimiter serves the purpose to separate the composing path of a selected entry from the entry area. Sample codes are provided in the demo below, you can see from the screenshot that a slash is added to separate your selected entry from the parent entry.

One thing you should keep in mind is that, in order to display full path for your selected entries, you need to set TextMode to FullPath in advance.

Aspx codes:

<kettic:PerDropDownTree ID="PerDropDownTree1" runat="server" 
                  DefaultMessage="Please select" CheckBoxes="SingleCheck" Width="250px"
TextMode="FullPath" EntriesDelimiter=";" FullPathDelimiter="/" ExpandNodeOnSingleClick="True"
                DataTextField="Text" Skin="Forest">
                <DropDownSettings AutoWidth="Enabled" />
            </kettic:PerDropDownTree> 

This is how the delimiters look like: