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

TreeView in ComboBox bind with XML

3 Answers 139 Views

TreeView

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

bo asked on 29 Sep 2008, 03:38 AM

I have a problem when i following sample TreeView in ComboBox, I do a bit modify. I load node from XML file(same thing happen binf with datatable).

when select a node from treeview, the combobox item showing all Text values in the treeview at first time. But it's fine if i select again.

For example:
Page init: blank
select node "Books": shows "booksArtsBiographies..." (suppose showing "Books")
select node "Music": shows "Music"

please try following sample:
Aspx page:

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default9.aspx.cs" Inherits="Default9" %> 
        
            <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml">  
        
            <head runat="server">  
        
                <title></title>  
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                <script type="text/javascript">          
        
                    function nodeClicking(sender, args)  
        
                    {  
        
                        var comboBox = $find("<%=RadComboBox1.ClientID%>");  
        
                        var node = args.get_node()  
        
                        comboBox.set_text(node.get_text());  
        
                        comboBox.set_value(node.get_value());  
        
                        comboBox.hideDropDown();  
        
                    }          
        
            </script> 
        
                <div> 
        
                    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">  
        
                    </telerik:RadAjaxManager> 
        
                    <telerik:RadScriptManager ID="RadScriptManager1" Runat="server">  
        
                    </telerik:RadScriptManager> 
        
                    <telerik:RadComboBox ID="RadComboBox1" ShowToggleImage="True" OnItemsRequested="ItemsRequested" Runat="server">  
        
            <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation> 
        
                        <ItemTemplate> 
        
                            <telerik:RadTreeView ID="RadTreeView1"   
        
                                            OnClientNodeClicking="nodeClicking" Runat="server">  
        
                            </telerik:RadTreeView> 
        
                        </ItemTemplate> 
        
                        <Items> 
        
                            <telerik:RadComboBoxItem Selected="True"></telerik:RadComboBoxItem> 
        
                        </Items> 
        
                    </telerik:RadComboBox> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

Code:

    
            using System;  
        
            using System.Collections.Generic;  
        
            using System.Linq;  
        
            using System.Web;  
        
            using System.Web.UI;  
        
            using System.Web.UI.WebControls;  
        
            using Telerik.Web.UI;  
        
            using System.Xml.Linq;  
        
            public partial class Default9 : System.Web.UI.Page  
        
            {  
        
                protected void Page_Load(object sender, EventArgs e)  
        
                {  
        
                    if (!IsPostBack && !RadAjaxManager1.IsAjaxRequest)  
        
                    {  
        
                        Populate();  
        
                    }  
        
                }  
        
                private void Populate()  
        
                {  
        
                    if (RadComboBox1.Items.Count == 0)  
        
                    {  
        
                        RadComboBox1.Items.Add(new RadComboBoxItem());  
        
                    }  
        
                    RadTreeView ParenTreeView = (RadTreeView)RadComboBox1.Items[0].FindControl("RadTreeView1");  
        
                    ParenTreeView.LoadContentFile("TreeView.xml");  
        
                }  
        
                protected void ItemsRequested(object o, RadComboBoxItemsRequestedEventArgs e)  
        
                {  
        
                    Populate();  
        
                }  
        
            }

XML:

    
            <?xml version="1.0" encoding="utf-8" ?> 
        
            <Tree> 
        
              <Node Text="Books" Expanded="True">  
        
                <Node Text="Arts" /> 
        
                <Node Text="Biographies" /> 
        
                <Node Text="Children's Books" /> 
        
                <Node Text="Computers &amp;amp; Internet" /> 
        
                <Node Text="Cooking" /> 
        
                <Node Text="History" /> 
        
                <Node Text="Fiction" /> 
        
                <Node Text="Mystery" /> 
        
                <Node Text="Nonfiction" /> 
        
                <Node Text="Romance" /> 
        
                <Node Text="Science Fiction " /> 
        
                <Node Text="Travel" /> 
        
              </Node> 
        
              <Node Text="Music">  
        
                <Node Text="Alternative" /> 
        
                <Node Text="Blues" /> 
        
                <Node Text="Children's Music" /> 
        
                <Node Text="Classical" /> 
        
                <Node Text="Country" /> 
        
                <Node Text="Dance" /> 
        
                <Node Text="Folk " /> 
        
                <Node Text="Hard Rock" /> 
        
                <Node Text="Jazz" /> 
        
                <Node Text="R&amp;amp;B" /> 
        
                <Node Text="Soundtracks" /> 
        
              </Node> 
        
              <Node Text="Movies">  
        
                <Node Text="Action" /> 
        
                <Node Text="Animation" /> 
        
                <Node Text="Classics" /> 
        
                <Node Text="Comedy" /> 
        
                <Node Text="Documentary" /> 
        
                <Node Text="Drama" /> 
        
                <Node Text="Horror" /> 
        
                <Node Text="Musicals" /> 
        
                <Node Text="Mystery" /> 
        
                <Node Text="Westerns" /> 
        
              </Node> 
        
              <Node Text="Software">  
        
                <Node Text="Business &amp;amp; Office" /> 
        
                <Node Text="Database" /> 
        
                <Node Text="Networking" /> 
        
                <Node Text="Presentation" /> 
        
                <Node Text="Project Management" /> 
        
                <Node Text="Reports" /> 
        
                <Node Text="Spreadsheet" /> 
        
                <Node Text="Word Processing" /> 
        
              </Node> 
        
            </Tree>

3 Answers, 1 is accepted

answered on 29 Sep 2008, 12:58 PM

Hello bo,

I suggest you wrap the treeview with a div and execute the following javascript when the div is clicked.

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

You can see our online example for more details

Regards,
Rosi
the Telerik team

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