Dropdown Treeview

[Albert Shenker]

In the recent past, I have implemented a treeview in a combobox template in numerous projects.Telerik's online example helped, but it certainly wan't easy, and a decent amount of custom javascript is necessary, just to get it to work..Also, there are quite a few hurdles that need to be crossed (usually through custom javascript) when working with the treeview and drop down, and getting their individual selection/clicking functionalities to play nice together, particularly in ajax scenarios.

I think it would be great if telerik could create a "hybrid" control called a "Dropdown Treeview", or something along those lines. I realize that one of the nice things about Telerik controls is their ability to integrate with eachother. However, in this case, while the treeview/combo integration seems obvious, the reality is that the resultant control really doesn't use most of the treeview's functionality, nor does it use most of the combo box's functionality. So, simply integrating the existing treeview and combobox controls creates a large amount of overkill, and as each of these separate controls becomes more and more functional over time, it will likely make the current treeview in combo box template integration more susceptible to bugs and javascript issues.

I would think the creation of this hybrid control, which only has the simplest features of the treeview and combo box (ie, the ability to display tree nodes in a combo box with dropdown), would not be as difficult and time-consuming as creating a brand new control from scratch, given that Telierk already has the code base for much of it in the two separate controls. Anyhow, I'd be intersted in getting others' opinions on this. I think the treeview in a combox is a really nice UI feature in many applications, and I feel the creation of a hybrid control would be a much better long-term solution over the current treeview in combo box template example.

IMO, this control would only have to have the following primary functionality...

1) The ability to populate tree "nodes" pretty much in the same fashion as the current treeview.
2) The ability to pesent the nodes in a drop down,
3) The ability to set, or get the selectedNode property, just like in a regular treeview. The SelectedNode would be displayed in the "Combo" portion of the control.

There are some more advanced features possible, such as auto-selection of nodes as you type in the combobox (similar to auto-complete in the current combo box), but these are certainly not necessary in most every-day implementations.

As you can see, there's no need for the node check, drag/drop, edit, etc. features of the existing treeview and there's no need for the templating, multi-column, etc. features of the existing combo box. I also think that most of the future development of either of these controls, except perhaps in the area of performance improvement, would also be outside the scope of functionlaity necessary in the hybrid implementation, so agan, my fear is that as time goes on, the current treeviewi in combo box template solution will become more and more fragile, requiring rework of existing applications where this is implemented.

[Simon]

Hi Albert Shenker,

The overall functionality of both controls that is actually in use in this setup is little and only complicates the otherwise simple control. Your approach is interesting, however the capabilities of such a control should not limit only to simple binding and selection. It is almost certain that drag-and-drop, Node editing, Node Load on Demand, etc. will become valid at some point because requirements can vary and change. Thus in the long run this control could become more or less similar, although incompletely, to the current RadComboBox/RadTreeView setup.

In this sense, it would be more viable to use some standard (and simpler) controls:

• ASP.NET TextBox
• ASP.NET TreeView
• AjaxControlToolkit DropDownExtender

With these three controls and a bit of JavaScript and CSS you can achieve the same result with the benefit that you will not use complex controls and the unused functionality will be almost none.

Below is a basic and simple example showing this approach:

<body>
    <form id="form1" runat="server">
    <ajax:ToolkitScriptManager ID="ScriptManager1" runat="server">
    </ajax:ToolkitScriptManager>
    <div>
        <ajax:DropDownExtender ID="DropDownExtender1" runat="server" TargetControlID="TextBox1"
            DropDownControlID="TreeView1">
        </ajax:DropDownExtender>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:Panel ID="Panel1" runat="server">
            <asp:TreeView ID="TreeView1" runat="server">
                <Nodes>
                    <asp:TreeNode Text="1">
                        <asp:TreeNode Text="2"></asp:TreeNode>
                    </asp:TreeNode>
                    <asp:TreeNode Text="3"></asp:TreeNode>
                </Nodes>
            </asp:TreeView>
        </asp:Panel>
    </div>
    </form>

    <script type="text/javascript">
        $get("Panel1").onclick = function (e) {
            if (!e) e = window.event;
            e.cancelBubble = true;
        };
    </script>
</body>

I hope this helps.

Regards,
Simon
the Telerik team

[Albert Shenker]

That's an interesting apporach. I will take a look at it, but to tell you the truth, I am pretty tied to Telerik controls and would probably find it a pain to start introducing things like the AjaxToolkitScriptManager, but we'll see. In the meantime, you may want to update your Treeview in Combobox example, as it will cause issues in certain Ajax scenarios. Have a look at my suport thread at the following to see some of these modifications.

http://www.telerik.com/account/support-tickets/view-ticket.aspx?threadid=333496

[Simon]

Hello Albert,

Indeed, this is a valid pitfall when using another RadControl inside the RadComboBox' template in an AJAX/Update Panel.

We immediately updated the demo description and code to note this. The modified demo will be live with the next official release.

Thank you for the suggestion.

Sincerely yours,
Simon
the Telerik team