TreeView in ComboBox bind with XML

4 posts, 0 answers
  1. bo
    bo avatar
    7 posts
    Member since:
    Jul 2008

    Posted 28 Sep 2008 Link to this post

    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> 
  2. Rosi
    Admin
    Rosi avatar
    2529 posts

    Posted 29 Sep 2008 Link to this post

    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.
  3. bo
    bo avatar
    7 posts
    Member since:
    Jul 2008

    Posted 29 Sep 2008 Link to this post

    Dear Rosi :

    Thanks for you quick response. YOu suggestion is works.
    But i have another problem.
    I need retrive text field and value field form treeview control.

    at moment, only comboBox.set_text works. i can get from code behind using comboBox.Text.

    If i want to save value as well, how can i get the value from code behind? like comboBox.set_value
  4. Rosi
    Admin
    Rosi avatar
    2529 posts

    Posted 30 Sep 2008 Link to this post

    Hi Bo,

    To set the value client side I suggest you use the following javascript code:

    comboBox.findItemByText("sometext").select();


    Then you can get the SelectedValue of RadComboBox at code-behind like this:
     
    RadComboBox1.SelectedValue;

    Kind regards,
    Rosi
    the Telerik team

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