This is a migrated thread and some comments may be shown as answers.

TreeView in ComboBox strange behaviour

8 Answers 165 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Panos Klaoudatos
Top achievements
Rank 2
Panos Klaoudatos asked on 23 Apr 2008, 12:49 PM
I have a TreeView inside a ComboBox that loads its nodes from SQL Server on demand.

 

<

telerik:RadComboBox ID="cbRange" runat="server" >
    <ItemTemplate>
        
<div id="div1">
            <telerik:RadTreeView runat="server" ID="rd" NodeExpand="rd_NodeExpand" OnClientNodeClicking="cbNodeClicking">
            
</telerik:RadTreeView>
        
</div>
</ItemTemplate>
    <Items>
        <telerik:RadComboBoxItem Text="" />
    </Items>
</telerik:RadComboBox>

 function cbNodeClicking(sender, args)
        {
            var comboBox = $find("<%= cbRange.ClientID %>");
          
            var node = args.get_node();
           
            if(node.get_level()<2)
            {
                SomeHtmlInputControl.value = "";
                comboBox.set_text("");
            }
            else
            {
                SomeHtmlInputControl.value = node.get_value();
                comboBox.set_text(node.get_text());
            }
            comboBox.hideDropDown();
        }

After installing the latest 2008.Q1 release of the contros, I get this strange behaviour: The very first time I select a node, regardless of its level, I get all first level nodes text combined, as the text set in the combobox! After that, each time I select a node, either the empty string (for level less than 2) or the node text is set as the ComboBox text, which is the correct behaviour.

Why is that?
 

8 Answers, 1 is accepted

Sort by
0
Nikolay
Telerik team
answered on 23 Apr 2008, 01:48 PM
Hello Panos Klaoudatos,

Did you refer to the online example about treeview in combobox? If you have not, I suggest that you give it a go as it should get you started. The example resides at:

http://www.telerik.com/demos/aspnet/prometheus/TreeView/Examples/Functionality/TreeViewComboBox/DefaultCS.aspx

Hope this helps.

Kind regards,
Nick
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Panos Klaoudatos
Top achievements
Rank 2
answered on 24 Apr 2008, 08:21 AM

Nick, I did refer to the online example, with the only difference that I am using the ‘load on demand’ feature for loading data to the TreeView. The scenario is exactly the same:

Continents are loaded to the TreeView from a DataSet in Session. On node expand, Countries are loaded under the Continent and in the same manner, Cities are loaded under the Country.  Continent -> Country -> City.

The idea is that only a city is selectable (hence I use and compare the node level). When a user selects a City, the City Name and Id are set in two html input controls, while another field (used in node category) is set as the ComboBox Text. When a user selects a country or a continents, the ComboBox Text is set to nothing as well as the value in the two other html input controls.

The problem now is that the very first time I select a City, while the City Name and City ID are set as values respectively to the input controls, a string combined from all the Continents is set as the ComboBox Text (e.g. Continent1 Continent1 Continent2 Continent3 Continent4…) .  In the ‘Prometheus’ version,  an empty string was set as the ComboBox Text (similar  behavior).  After the first time selection, each time I select a city, the control works as it should do .

Below I include the code from the UserControl, as is. I am not using countries or cities but rather areas and precincts but the idea is the same as above. Please have in mind that the UserControl is placed on anther UserControl, on an aspx page (inside a radAjaxPanel).

Any Ideas?

 

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ctrlOTARangeSelect.ascx.cs"

    Inherits="ctrl_ctrlOTARangeSelect" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<telerik:RadCodeBlock ID="OTARangeCodeBlock" runat="server">
 

    <script type="text/javascript">
       

         function cbAreaNodeClicking(sender, args)
        {
            var comboBox = $find("<%= cbOTARange.ClientID %>");
            var hOTARangeIDvalue = document.getElementById("<%= OTARangeIDvalue.ClientID %>");
            var hOTARangeNomosDescrValue = document.getElementById("<%= OTARangeNomosDescrValue.ClientID %>");
            var node = args.get_node();           

            if(node.get_level()<2)
            {
                hOTARangeIDvalue.value = "";
                hOTARangeNomosDescrValue.value = "";
                comboBox.set_text("");
            }
            else
            {
                hOTARangeIDvalue.value = node.get_value();
                hOTARangeNomosDescrValue.value = node.get_category();
                comboBox.set_text(node.get_text());
            }

            comboBox.hideDropDown();
        }
    </script>

</telerik:RadCodeBlock>

<table width="300px" cellpadding="0" cellspacing="0" style="margin: 0 0 0 0" align="left" border="0">
    <tr>
        <td align="left" colspan="3">
            <telerik:RadComboBox ID="cbOTARange" runat="server" Height="300px" Width="300" Style="vertical-align: middle;"             RadComboBoxImagePosition="Right">
                <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
                <ItemTemplate>
                    <div id="div1" style="height: 300px;">
                        <telerik:RadTreeView runat="server" ID="rdota" Width="294" OnNodeExpand="rdArea_NodeExpand"

                            OnClientNodeClicking="cbAreaNodeClicking" Height="100%">
                        </telerik:RadTreeView>
                    </div>
                </ItemTemplate>
                <Items>
                    <telerik:RadComboBoxItem Text="" />
                </Items>
                <ExpandAnimation Type="OutQuart"></ExpandAnimation>
            </telerik:RadComboBox>
        </td>
    </tr>
</table>

<div style="visibility: hidden;">
    <input id="OTARangeIDvalue" runat="server" />
    <input id="OTARangeNomosDescrValue" runat="server" />
</div>

 

 

- - - - - - - - - - - -

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Telerik.Web.UI;
using System.Text;

 

public partial class ctrl_ctrlOTARangeSelect : UserControl
{

    public string OTARangeDescr
    {

        get
        {
            return cbOTARange.Text;
        }

        set
        {
            cbOTARange.Text = value;
        }
    }

 

    public int OTARangeID
    {
        get
        {
           return Conv.IsNullInt(OTARangeIDvalue.Value, 0);
        }

        set
        {
            OTARangeIDvalue.Value = value.ToString();
        }

    }

 

 

    public string ProgrNomosDescr
    {

        get
        {
            return OTARangeNomosDescrValue.Value;
        }

        set
        {
            OTARangeNomosDescrValue.Value = value;
        }
    }

 

    RadTreeView rdota;

   void SetRadTreeVariable()
    {
        rdota = cbOTARange.Items[0].FindControl("rdota") as RadTreeView;
    }

 

 

    protected override void OnInit(EventArgs e)
    {
        base.OnInit(e);

        cbOTARange.Items[0].Attributes.Add("OTARangeIDvalue", "");
    }

 

    protected void Page_Load(object sender, EventArgs e)
    {

        if (!IsPostBack)
        {
            SetRadTreeVariable();
            AddRootArea();
        }

    }

 

 

    private void AddRootArea()
    {

        DataTable dt = Core.AppGlobals.ProgrPerif;

        foreach (DataRow dr in dt.Rows)
        {

            RadTreeNode n = new RadTreeNode();
            n.Text = dr["ProgrPerifDescr"].ToString();
            n.Value = dr["ProgrPerifID"].ToString();
            n.ExpandMode = TreeNodeExpandMode.ServerSideCallBack;
            rdota.Nodes.Add(n);

        }

      

 

        if (OTARangeID > 0)
        {

            //exit value
            DataRow dtO = Core.AppGlobals.ProgrOTARange.Rows.Find( (object)OTARangeID);
            DataRow dtN = Core.AppGlobals.ProgrNomos.Rows.Find(dtO["ProgrNomosID"]);
 

            RadTreeNode n = rdota.FindNodeByValue(dtN["ProgrPerifID"].ToString());
            NodeExpand(n);
            n.ExpandMode = TreeNodeExpandMode.ClientSide;
            n.Expanded = true;
            n = n.Nodes.FindNodeByValue(dtN["ProgrNomosID"].ToString());
            NodeExpand(n);
            n.ExpandMode = TreeNodeExpandMode.ClientSide;
            n.Expanded = true;

            n = n.Nodes.FindNodeByValue(dtO["OTARangeID"].ToString());
            n.Selected = true;
        }

    }

 

    

    protected void rdArea_NodeExpand(object sender, RadTreeNodeEventArgs e)
    {
        NodeExpand(e.Node);
    }

 

    private void NodeExpand(RadTreeNode node)
    {

        DataRow[] dt = null; 

        switch (node.Level)
        {
            case 0:
                dt = Core.AppGlobals.ProgrNomos.Select("ProgrPerifID=" + node.Value);

                foreach (DataRow dr in dt)
                {
                    RadTreeNode n = new RadTreeNode();
                    n.Text = dr["ProgrNomosDescr"].ToString();
                    n.Value = dr["ProgrNomosID"].ToString();
                    n.ExpandMode = TreeNodeExpandMode.ServerSideCallBack;
                    node.Nodes.Add(n);
                }
                break;
            case 1: dt = Core.AppGlobals.ProgrOTARange.Select("ProgrNomosID=" + node.Value);

                foreach (DataRow dr in dt)
                {
                    RadTreeNode n = new RadTreeNode();
                    n.Text = dr["OTARangeDescr"].ToString();
                    n.Value = dr["OTARangeID"].ToString();
                    DataRow[] rnomosdescr = Core.AppGlobals.ProgrNomos.Select("ProgrNomosID=" + node.Value);
                    n.Category = rnomosdescr[0]["ProgrNomosDescr"].ToString();
                    node.Nodes.Add(n);
                }
                break;
        }
    }
}

0
Accepted
Veselin Vasilev
Telerik team
answered on 28 Apr 2008, 12:15 PM
Hello Panos Klaoudatos,

You should subscribe to the onclick event of "div1" and define its event handler as follows:

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

<itemtemplate> 
            <div id="div1" onclick="StopPropagation()"
                <telerik:RadTreeView runat="server" ... 


I hope this helps.

Kind regards,
Veskoni
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Panos Klaoudatos
Top achievements
Rank 2
answered on 29 Apr 2008, 06:38 AM
Yes! That did the trick, thanks.
0
aquillin
Top achievements
Rank 1
answered on 07 May 2008, 08:35 PM
I had the same issue, and this worked for me as well, but can you explain why??
0
Veselin Vasilev
Telerik team
answered on 08 May 2008, 08:12 AM
Hi aquillin,

in this example "e" is the event parameter.
cancelBubble property sets or retrieves whether the current event should bubble up the hierarchy of event handlers.
We set it to True so bubbling is disabled for this event, preventing the next event handler in the hierarchy from receiving the event.

Sincerely yours,
Veskoni
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Scott Eoff
Top achievements
Rank 2
answered on 19 Nov 2008, 04:15 PM

I'm trying to do this within the code behind with VB syntax. I too want to populate a treeview within a combo box, but I'm getting allot of weird results. I have looked at the example, but do I have to use client side JavaScript to make this work correctly? The tuff part is I have the tree working like I want, but when I add the control to the combo box I start getting the weird results. I have 3 layers of the tree and when I click the parent it works, but have that it doesn't. Another reason this is more complicating is this is within a usercontrol and that usercontrol is used with the insert/update of a rad data grid. So when I use the usercontrol there is no check if its not a post back to build the results on the first load. Is there an example or could someone make an example of how to do this within code behind using vb syntax. It would also be great if it was in a usercontrol and used within the edit/insert of a data grid so I could see how you are handling the not post back issue.

Any help would be greatly appreciated.

0
Veselin Vasilev
Telerik team
answered on 24 Nov 2008, 08:59 AM
Hello Scott Eoff,

Can you please describe in more detail what exactly is the postback issue that you have?

Kind regards,
Veselin Vasilev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Tags
TreeView
Asked by
Panos Klaoudatos
Top achievements
Rank 2
Answers by
Nikolay
Telerik team
Panos Klaoudatos
Top achievements
Rank 2
Veselin Vasilev
Telerik team
aquillin
Top achievements
Rank 1
Scott Eoff
Top achievements
Rank 2
Share this question
or