How do i implement the treeview in dropdownlist

[Hari krishna]

 I would like to implement the Tree view nodes in drop down as shown in attached file
the same can be achieved using telerik and i would like to know how in kendo ui MVC

ASP.NET web forms:
  <telerik:RadComboBox ID="ddlUsers" runat="server" Width="200px" Height="300px"     ShowToggleImage="True" Style="vertical-align: middle;" ExpandAnimation-Type="None"                            CollapseAnimation-Type="None"
                EmptyMessage="Select a User or User Group" AllowCustomText="true" 
                OnClientLoad="OnComboBoxLoad"
                OnClientDropDownOpened="OnComboBoxDropDownOpened"             
                 OnInit="OnInit_ddlUsers" >
                <itemtemplate>
                    <div id="divTreeView" runat="server" onclick="StopPropagation(event);">
                        <telerik:RadTreeView runat="server" ID="tvUsers" Width="100%" Height="100%"
                            OnClientNodeClicking="OnTreeNodeClicking" 
                            OnNodeClick="OnUserInfoSelected"  >
                            <DataBindings >
                                <telerik:RadTreeNodeBinding Depth="0" Expanded="true" />
                                <telerik:RadTreeNodeBinding Depth="1" Expanded="true" /> 
                            </DataBindings> 
                        </telerik:RadTreeView>
                    </div>
                </itemtemplate>
                <items>  
                    <telerik:RadComboBoxItem Text="" />  
                </items>
            </telerik:RadComboBox>  


<telerik:RadScriptBlock runat="server" ID="scriptBlock">
<script type="text/javascript">

    function OnComboBoxLoad(sender, args) {
        var combo = sender;
        var input = combo.get_inputDomElement();
        input.onkeydown = onKeyDownHandler;
    }

    function onKeyDownHandler(e) {
        if (!e)
            e = window.event;
        e.returnValue = false;
        if (e.preventDefault) {
            e.preventDefault();
        }
    }   
    function OnTreeNodeClicking(sender, args) {
        var node = args.get_node();
        var comboBoxId = sender.get_attributes().getAttribute("<%= ComboBoxId %>");       
        var comboBox = $find(comboBoxId);
        comboBox.set_text(node.get_text());
        comboBox.trackChanges();
        comboBox.get_items().getItem(0).set_text(node.get_text());
        comboBox.commitChanges();
        comboBox.hideDropDown();

        // Call comboBox.attachDropDown if:
        // 1) The RadComboBox is inside an AJAX panel.
        // 2) The RadTreeView has a server-side event handler for the NodeClick event, i.e. it initiates a postback when clicking on a Node.
        // Otherwise the AJAX postback becomes a normal postback regardless of the outer AJAX panel.

        comboBox.attachDropDown();
    }

    function StopPropagation(e) {
        if (!e) {
            e = window.event;
        }

        e.cancelBubble = true;
    }

    function OnComboBoxDropDownOpened(sender, eventArgs) {
        var tree = sender.get_items().getItem(0).findControl("tvUsers");
        var selectedNode = tree.get_selectedNode();
        if (selectedNode) {
            selectedNode.scrollIntoView();
        }

    }
</script>
</telerik:RadScriptBlock>

<script type="text/javascript">
    var divItem = document.getElementById("divTreeView");
    if (divItem != null)
        divItem.onclick = StopPropagation;
</script>

[Alexander Valchev]

Hi Hari krishna,

I am afraid that what you would like to achieve is not supported at present. It is not possible to nest a TreeView inside DropDownList as shown in the screen shot.

If you would like to see such widget in one of our future releases, I suggest you to vote for this idea at Kendo UserVoice forum. If more people vote for it and it gains popularity we will consider adding it to the suite.

Regards,
Alexander Valchev
the Telerik team