TreeView in ComboBox strange behaviour

9 posts, 1 answers
  1. Panos Klaoudatos
    Panos Klaoudatos avatar
    4 posts
    Member since:
    Aug 2012

    Posted 23 Apr 2008 Link to this post

    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?
     

  2. Nikolay
    Admin
    Nikolay avatar
    3997 posts

    Posted 23 Apr 2008 Link to this post

    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
  3. Panos Klaoudatos
    Panos Klaoudatos avatar
    4 posts
    Member since:
    Aug 2012

    Posted 24 Apr 2008 Link to this post

    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;
            }
        }
    }

  4. Answer
    Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 28 Apr 2008 Link to this post

    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
  5. Panos Klaoudatos
    Panos Klaoudatos avatar
    4 posts
    Member since:
    Aug 2012

    Posted 29 Apr 2008 Link to this post

    Yes! That did the trick, thanks.
  6. aquillin
    aquillin avatar
    7 posts
    Member since:
    Nov 2006

    Posted 07 May 2008 Link to this post

    I had the same issue, and this worked for me as well, but can you explain why??
  7. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 08 May 2008 Link to this post

    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
  8. Scott Eoff
    Scott Eoff avatar
    14 posts
    Member since:
    Jun 2005

    Posted 19 Nov 2008 Link to this post

    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.

  9. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 24 Nov 2008 Link to this post

    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.
Back to Top