How to add a Terelik TreeView to a ComboBox Control

[Ahmad Alkhiary]

Dear Terelik Support,

Please it's an urgent need.

I want to add a TreeView to the ComboBox and I want to populate the treeview from the code behind. I followed the instructions in the following link

http://www.telerik.com/help/aspnet-ajax/combo_templatesaddingtemplates.html

But when I run the page I treeview did not show up. This is my first time trying to accomplish this task and it's very important to my application. I'm using VS 2008 and VB.NET and most.

I tried to read the available posts about this subject but I couldn't do it.

Please is there is any one can help me to accomplish this task?

Thank you.

[Princy]

Hi Ahmad,

Here is a code library submission which demonstrates a similar scenario.
TreeView in ComboBox

Princy.

[Ahmad Alkhiary]

Dear Terelik Support,

First of all thank you for your response.

The demo you gave me is in VS 2005 and using C#. I'm using VS 2008 (VB.NET) and I'm using the latest version of your product ASP.NET AJAX controls.

I opened the web site in VS 2008 and convert it to work with VS 2008 but I could not run it because of some errors I could not resolve.

Please is there some other demos compatible with my situation?

Notes:
There is no "BeforeClientClick" in the TreeView for ASP.NET AJAX control.

Thank for you help.

[Ahmad Alkhiary]

Dear Terelik Support,

I drag a ComboBox in my web form and I edited the ComboBox template and I added the TreeView control to the template. I added some nodes to the TreeView at design time but when I view the page in the browser no TreeView appears.

I'm sure this is not the right way to do it but I'm trying my best to accomplish this task.

Please without your help it will be imposable to me to do it.

Thank you.

[Ahmad Alkhiary]

Dear Terelik Support,

I succeeded to bind and display the TreeView in the ComboBox. I'm now facing a problem which is when I click on any node of the TreeView the ComboBox Text Item shows me the text value of more than one node.

Please how can fix this problem and just let the ComboBox text item shows only the clicked node name or text?

This the steps I followed to do it:

1-    I dragged a ScriptManager to the surface of my web page.
2-    I dragged a ComboBox AJAX control to the surface of my UserControl.
3-    I clicked on the SmartTags of the ComboBox and I clicked on Edit Template.
4-     I dragged a TreeView AJAX Control to the Item Template surface.
5-    I set the width of the TreeView to 100%.
6-    I right clicked on the ComboBox Item template and I clicked on End Template Editing.
7-    I set the Height of the ComboBox to 150px.
8-    I wrote the following code in my UserControl code behind file:

Page_Load
        Dim oTreeView As RadTreeView = _
        DirectCast(RadComboBox1.Items(0).FindControl("RadTreeView1"), RadTreeView)

 

        Dim ConStr As String = "Data Source=(local);Initial Catalog=DBName;Integrated Security=SSPI"
        Dim strSelect As String = "Select MenuOptionId, MenuTitle, MenuParentId FROM MenuOptions Where ApplicationId = 123"

        Dim oCon As New SqlConnection()
        Dim daAdapter As New SqlDataAdapter(strSelect, ConStr)
        Dim ds As New DataSet

        Try
            daAdapter.Fill(ds)

            With oTreeView
                .DataFieldID = "MenuOptionId"
                .DataFieldParentID = "MenuParentId"
                .DataTextField = "MenuTitle"
                .DataValueField = "MenuOptionId"

                .DataSource = ds
                .DataMember = ds.Tables(0).TableName
                .DataBind()
            End With
        Catch ex As Exception
            Dim strMsg As String = ex.Message
        End Try

End SUB

Thank you.

 

 

 

[Veselin Vasilev]

Hi Ahmad Alkhiary,

You need to wrap the treeview in a div and cancel the bubbling of events when you click inside the div:

 <ItemTemplate>
                <div onclick="StopPropagation(event)">
                <telerik:RadTreeView ID="RadTreeView1" runat="server">
                </telerik:RadTreeView>
                </div>
</ItemTemplate>

function StopPropagation(e)
{
    e.cancelBubble = true;
    if (e.stopPropagation)
    {
        e.stopPropagation();
    }
}

This is also demonstrated in our online example.

I hope this helps.

Greetings,
Veselin Vasilev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Ahmad Alkhiary]

Dear Veselin Vasilev,

I'm a beginner in JavaScript and I did follow the online example by copying the script from the page and I added the DIV element.

The following is my UserControl Page Code:
<body bottommargin="0" topmargin="0" leftmargin="0" rightmargin="0">
 <script type="text/javascript">       
    function comboLoad(sender, eventArgs)
    {
        sender.set_text(sender.get_items().getItem(0).get_value());
    }

 

    function nodeClicking(sender, args)
    {
        var comboBox = $find("<%= RadComboBox1.ClientID %>");

        var node = args.get_node()

        comboBox.set_text(node.get_text());

        comboBox.trackChanges();
        comboBox.get_items().getItem(0).set_value(node.get_text());
        comboBox.commitChanges();

        comboBox.hideDropDown();
    }

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

        e.cancelBubble = true;
    }
   
    function OnClientDropDownOpenedHandler(sender, eventArgs)
    {
        var tree = sender.get_items().getItem(0).findControl("RadTreeView1");
        var selectedNode = tree.get_selectedNode();
        if (selectedNode)
        {
            selectedNode.scrollIntoView();
        }
    }
</script>
<telerik:RadComboBox ID="RadComboBox1" Runat="server" Height="100px"
    Skin="Sunset" Width="348px">
    <ItemTemplate>
      <div ID="TreeDiv" onclick="StopPropagation(event)">
        <telerik:RadTreeView ID="RadTreeView1" Runat="server" Height="350px" Width="100%">
            <CollapseAnimation Duration="100" Type="OutQuint" />
            <ExpandAnimation Duration="100" />
        </telerik:RadTreeView>
        </div>
    </ItemTemplate>
    <Items>
      <telerik:RadComboBoxItem Text="" />
    </Items>
<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
</telerik:RadComboBox>

<script type="text/javascript">
    var div1 = document.getElementById("TreeDiv");
    div1.onclick = StopPropagation;
</script>
</body>

 

Now when I browse the page which contains the UserControl everything looks ok except when I click on one of the TreeView Nodes no node name show up in the ComboBox text.

How can I display the selected node text in the ComboBox text?

How can pass back the select TreeView Node value to the Code-Behind?

 

Thank you.

 

 

[Veselin Vasilev]

Hi Ahmad Alkhiary,

You just need to subscribe to the OnClientNodeClicking event of the treeview:

<telerik:RadTreeView ID="RadTreeView1" Runat="server"
  OnClientNodeClicking="nodeClicking"
  Height="350px" Width="100%">
</telerik:RadTreeView>

Kind regards,
Veselin Vasilev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Ahmad Alkhiary]

Dear Veselin Vasilev,

Please still one more thing how can I pass the clicked Node value from and to the Code-Behind file?

I have add a hidden field and a JavaScript line to assign the value the hidden field but in the code behind file the hidden value (NodeValue.Value) is allows equal to nothing.

The following is My UserControl ASPX Page:

<body bottommargin="0" topmargin="0" leftmargin="0" rightmargin="0" dir=rtl>
 <script type="text/javascript">         
    function comboLoad(sender, eventArgs)
    {
        sender.set_text(sender.get_items().getItem(0).get_value());
    }

    function nodeClicking(sender, args)
    {
        var comboBox = $find("<%= RadComboBox1.ClientID %>");
        var node = args.get_node()

       ***** I Added This Line To Store the Selected Node Value in the Input Field *******
        document.getElementById('<%=NodeValue.ClientID%>').value = node.get_value();
       **********************************************************************

 

        comboBox.set_text(node.get_text());

        comboBox.trackChanges();
        comboBox.get_items().getItem(0).set_value(node.get_text());
        comboBox.commitChanges();

        comboBox.hideDropDown();
    }

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

        e.cancelBubble = true;
    }
   
    function OnClientDropDownOpenedHandler(sender, eventArgs)
    {
        var tree = sender.get_items().getItem(0).findControl("RadTreeView1");
        var selectedNode = tree.get_selectedNode();
        if (selectedNode)
        {
            selectedNode.scrollIntoView();
        }
    }
</script>
<telerik:RadComboBox ID="RadComboBox1" Runat="server" Height="200px"
    Skin="Sunset" Width="348px">
    <ItemTemplate>
      <div ID="TreeDiv" onclick="StopPropagation(event)" dir=rtl>
        <telerik:RadTreeView
         ID="RadTreeView1"
         Runat="server"
         Height="350px"
         Width="100%"
         OnClientNodeClicking="nodeClicking" Skin="Sunset">
            <CollapseAnimation Duration="100" Type="OutQuint" />
            <ExpandAnimation Duration="100" />
        </telerik:RadTreeView>
        </div>
    </ItemTemplate>
    <Items>
      <telerik:RadComboBoxItem Text="" />
    </Items>
<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
</telerik:RadComboBox>
***** New Added  Input Field *******
<input id="NodeValue" value="0" runat="server" enableviewstate="true" type="hidden" /> 
*****************************************************************************
</body>

 

 

Thank you for the help.

 

 

 

 

 

[Veselin Vasilev]

Hello Ahmad Alkhiary,

In which server event do you try to get the value of the hidden field?
The code seems ok on the first look.

Greetings,
Veselin Vasilev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Ahmad Alkhiary]

Dear Veselin Vasilev,

How can I set the SelectedNode.Value in the TreeView control which is inside the ComboBox Item Template from code behind file so it will show the node text in the ComboBox.

In code behind I'm retrieving the data from the database and move it to the corresponding controls on the page and everything fine except the ComboBox. It may need passing a value to JavaScript function from code behind which will do the rest of the job.

 

Please I need your help to resolve this last issue. This issue is stopping my progress in this application and my time is running out.

 

Thank you.

[Ahmad Alkhiary]

Please I have been monitoring this thread every hour some times less than that waiting for some one from telerik team to help me to resolve it.

I added the following JavaScript function trying to accomplish the behavior I described in my previous post. 
But I still does not know how to call the JavaScript from code behind file and addition to that I'm not sure if this is the way I can do it.

 

function selectNode(SelectedValue)
{
    if (SelectedValue != null)
    {
       var treevw = $find("<%= RadTreeView1.ClientID %>");
       var node = tree.findNodeByValue(SelectedValue);
       node.select();

       var comboBox = $find("<%= RadComboBox1.ClientID %>");
       comboBox.set_text(node.get_text());
   }
}

 

But it produce the following error

 

Compiler Error Message: BC30451: Name 'RadTreeView1' is not declared.

Source Error:

Line 31: if (SelectedValue != null) Line 32: { Line 33: var treevw = $find("<%= RadTreeView1.ClientID %>");Line 34: var node = tree.findNodeByValue(SelectedValue); Line 35: node.select();

The following the ASPX page Code:

<body bottommargin="0" topmargin="0" leftmargin="0" rightmargin="0" dir=rtl>
    <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
    </asp:ScriptManagerProxy>
 <script type="text/javascript">         
    function comboLoad(sender, eventArgs)
    {
        sender.set_text(sender.get_items().getItem(0).get_value());
    }

    function nodeClicking(sender, args)
    {
        var comboBox = $find("<%= RadComboBox1.ClientID %>");
        var node = args.get_node()
      
        document.getElementById('<%=NodeValue.ClientID%>').value = node.get_value();

        comboBox.set_text(node.get_text());
      

        comboBox.trackChanges();
        comboBox.get_items().getItem(0).set_value(node.get_text());
        comboBox.commitChanges();

        comboBox.hideDropDown();
    }

    function selectNode(SelectedValue)
    {
       if (SelectedValue != null)
       {
        var treevw = $find("<%= RadTreeView1.ClientID %>");
        var node = tree.findNodeByValue(SelectedValue);
        node.select();
       
        var comboBox = $find("<%= RadComboBox1.ClientID %>");       
        comboBox.set_text(node.get_text());
       }       
    }

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

        e.cancelBubble = true;
    }
   
    function OnClientDropDownOpenedHandler(sender, eventArgs)
    {
        var tree = sender.get_items().getItem(0).findControl("RadTreeView1");
        var selectedNode = tree.get_selectedNode();
        if (selectedNode)
        {
            selectedNode.scrollIntoView();
        }
    }
  
</script>
<telerik:RadComboBox ID="RadComboBox1" Runat="server" Height="200px"
    Skin="Sunset" Width="348px">
    <ItemTemplate>
      <div ID="TreeDiv" onclick="StopPropagation(event)" dir=rtl>
        <telerik:RadTreeView
         ID="RadTreeView1"
         Runat="server"
         Height="350px"
         Width="100%"
         OnClientNodeClicking="nodeClicking" Skin="Sunset">
            <CollapseAnimation Duration="100" Type="OutQuint" />
            <ExpandAnimation Duration="100" />
        </telerik:RadTreeView>
        </div>
    </ItemTemplate>
    <Items>
      <telerik:RadComboBoxItem Text="" />
    </Items>
<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
</telerik:RadComboBox>
<input id="NodeValue" value="0" runat="server" enableviewstate="true" type="hidden" />
<input id="SelectedValue" value="0" runat="server" enableviewstate="true" type="hidden" /> 
</body>

 

I think the JavaScript function unable to find (TreeView ID) because it's hidden inside the CompoBox Item Template.

Thank you

 

 

 

 

[Ahmad Alkhiary]

Please can anyone help us here?

[Veselin Vasilev]

Hi Ahmad Alkhiary,

You are not getting the reference to the treeview appropriately (in the selectNode method).

Here is how to get it:

var combo = $find("<%= RadComboBox1.ClientID %>");
var tree = combo.get_items().getItem(0).findControl("RadTreeView1");

I hope this helps.

Best wishes,
Veselin Vasilev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Ahmad Alkhiary]

Dear Veselin Vasilev,

First of all believe me I was so happy to see your post because I waiting for this moment. Yes, you are right about this problem but I did manage to resolve it but I did not update my post.

Please my problem now is how I can set the (SelectedNode.Value) from Client side so it will show the node text in the ComboBox text.

In code behind I'm retrieving the data from the database and move it to the corresponding controls on the page and everything fine except the ComboBox. It may need passing a value to JavaScript function from code behind which will do the rest of the job. I added a JavaScript function to accomplish that (FindNode) but it's not working with me or May I did not write it the correct way.

I hope I get your response soon.

Thank you

My User Control ASPX File Code:

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="MenuOptionsTree.ascx.vb" Inherits="TerelikCompoTree.MenuOptionsTree" %>
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
<body bottommargin="0" topmargin="0" leftmargin="0" rightmargin="0" dir=rtl>   
 <script type="text/javascript">         
    function comboLoad(sender, eventArgs)
    {
        sender.set_text(sender.get_items().getItem(0).get_value());
    }

    function nodeClicking(sender, args)
    {
        var comboBox = $find("<%= RadComboBox1.ClientID %>");
        var node = args.get_node()
      
        document.getElementById('<%=NodeValue.ClientID%>').value = node.get_value();

        comboBox.set_text(node.get_text());      

        comboBox.trackChanges();
        comboBox.get_items().getItem(0).set_value(node.get_text());
        comboBox.commitChanges();

        comboBox.hideDropDown();
    }

    function FindNode()
    {      
        var comboBox = $find("<%= RadComboBox1.ClientID %>");
        var treevw = comboBox.get_items().getItem(0).findControl("RadTreeView1");          
        var node = treevw.findNodeByValue(SelectedValue.value);
        node.select()
       
        comboBox.set_text(node.get_text());

        comboBox.trackChanges();
        comboBox.get_items().getItem(0).set_value(node.get_text());
        comboBox.commitChanges();
    }
   
    function StopPropagation(e) {        
        if(!e)
        {
            e = window.event;
        }

        e.cancelBubble = true;
    }
    function OnClientDropDownOpenedHandler(sender, eventArgs)
    {
        var tree = sender.get_items().getItem(0).findControl("RadTreeView1");
        var selectedNode = tree.get_selectedNode();
        if (selectedNode)
        {
            selectedNode.scrollIntoView();
        }
    }
  
</script>
<telerik:RadComboBox ID="RadComboBox1"
    Runat="server"
    Height="200px"
    Skin="Sunset"
    Width="348px">
    <ItemTemplate>
      <div ID="TreeDiv" onclick="StopPropagation(event)" dir=rtl>
        <telerik:RadTreeView
         ID="RadTreeView1"
         Runat="server"
         Height="350px"
         Width="100%"
         OnClientNodeClicking="nodeClicking"
         Skin="Sunset">
            <CollapseAnimation Duration="100" Type="OutQuint" />
            <ExpandAnimation Duration="100" />
        </telerik:RadTreeView>
        </div>
    </ItemTemplate>
    <Items>
      <telerik:RadComboBoxItem Text="" />
    </Items>
<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
</telerik:RadComboBox>
<input id="NodeValue" value="0" runat="server" enableviewstate="true" type="hidden" />
<input id="SelectedValue" value="124" runat="server" enableviewstate="true" type="hidden" />
</body>

 

[Veselin Vasilev]

Hello Ahmad Alkhiary,

The FindNode function that you have written seems correct.

You can call it on client load of the combobox:

<telerik:RadComboBox ID="RadComboBox1"
    Runat="server"
    Height="200px"
    Skin="Sunset"
    OnClientLoad="FindNode"
    Width="348px">...

function FindNode(comboBox, args)
{
    var treevw = comboBox.get_items().getItem(0).findControl("RadTreeView1");
    var node = treevw.findNodeByValue(SelectedValue.value);
    if (node)
    {
        node.select()

        comboBox.set_text(node.get_text());

        comboBox.trackChanges();
        comboBox.get_items().getItem(0).set_value(node.get_text());
        comboBox.commitChanges();
    }
}

All the best,
Veselin Vasilev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.