Combobox with treeview

5 posts, 0 answers
  1. Quim
    Quim avatar
    29 posts
    Member since:
    Nov 2006

    Posted 14 Dec 2008 Link to this post

    Hi

    I'm testing RadToolbar on client side with a Combobox that has a treeview inside.

    Before this test, I test just a combobox with a treeview inside and it worked ok.

    My problem with Radtoolbar is that on first time I select a node, Combox caption shows all my treeview text nodes in a single line. When I select a node for the second time, it works ok.

    Ok, here is the code:

    <telerik:RadToolBar ID="RadToolBar1" runat="server" Skin="Gray" Width="550px" OnClientButtonClicked="toolbar_execute">
                <CollapseAnimation Duration="200" Type="OutQuint"  />
                <Items>
                     <telerik:RadToolBarButton runat="server" Text="Button_tree" Value="10" >  
                        <ItemTemplate>     
                            <telerik:RadComboBox ID="RadComboBox2" runat="server" Height="140px" Width="215px"
                            ShowToggleImage="True" Skin="Gray" Style="vertical-align: middle;"  OnClientLoad="comboLoad"
                            OnClientDropDownOpened="OnClientDropDownOpenedHandler">
                                <ItemTemplate>
                                        <telerik:RadTreeView runat="server" ID="RadTreeView1" OnClientNodeClicking="nodeClicking"
                                         Skin="WebBlue" Height="140px">
                                            
                                        </telerik:RadTreeView>
                                </ItemTemplate>
                                <Items>
                                    <telerik:RadComboBoxItem runat="server" />
                                </Items>
                              <CollapseAnimation Type="None" Duration="200" /><ExpandAnimation Type="None" />
                            </telerik:RadComboBox>
                            
                        </ItemTemplate>
                    </telerik:RadToolBarButton>                         
                    
                </Items>
            </telerik:RadToolBar>



                <script type="text/javascript">
                 
                 // I lode Nodes manually
                 function addnodes() {
                   
                   var toolBar = $find("RadToolBar1")
                   var comboBox1 = $find('<%=RadToolBar1.FindItemByText("Button_tree").FindControl("RadComboBox2").ClientID %>');
                   var tree1 = comboBox1.get_items().getItem(0).findControl("RadTreeView1");
                   
                   toolBar.trackChanges();
                   comboBox1.trackChanges();
                   tree1.trackChanges();
                   var lbk =-1;
                    var local = 0;
                   tree1.get_nodes().clear();
                   var mnode=new Telerik.Web.UI.RadTreeNode();
                   mnode.set_text('(seleccionar)');
                   for(var i=0; i<50; i++) {
                       if (lbk != local) {
                            tree1.get_nodes().add(mnode);
                            mnode = new Telerik.Web.UI.RadTreeNode();
                            mnode.set_text('Parent ' + local);
                            lbk = local;
                       }
                             
                       var node = new Telerik.Web.UI.RadTreeNode();
                       node.set_text('item ' + i);
                       mnode.get_nodes().add(node);
                       if ((i==10) || (i==20) || (i==30) || (i==40)) local++;
                   }
                   if (lbk>=0) {
                       tree1.get_nodes().add(mnode);
                    }
                   tree1.commitChanges();
                   comboBox1.commitChanges();
                   toolBar.commitChanges();
                }
                
                 
                  function comboLoad(sender, eventArgs)
                {
                    sender.set_text(sender.get_items().getItem(0).get_value());
                }

                function nodeClicking(sender, args)
                {
                    
                    var comboBox = $find('<%=RadToolBar1.FindItemByText("Button_tree").FindControl("RadComboBox2").ClientID %>');
                    var node = args.get_node()
                    if(node.get_level() != "0")  
                    {    
                        alert(node.get_text());
                        comboBox.trackChanges();
                        comboBox.get_items().getItem(0).set_value(node.get_text());
                        comboBox.set_text(node.get_text());
                        comboBox.commitChanges();
                    }
                }

     
                
                function OnClientDropDownOpenedHandler(sender, eventArgs)
                {
                    var tree = sender.get_items().getItem(0).findControl("RadTreeView1");
                    var selectedNode = tree.get_selectedNode();
                    if (selectedNode)
                    {
                        selectedNode.scrollIntoView();
                    }
                }
                 
                 </script>

    I'm using version 2008.3.1105.20.

    Regards
  2. Quim
    Quim avatar
    29 posts
    Member since:
    Nov 2006

    Posted 15 Dec 2008 Link to this post

    I move my code to my final project and it's working now.
    I don't know what was the problem.

    I just notice that loading a treeview using Javascript is very slow, I'm just loading 40 nodes and it takes about 2 seconds. Is there a fast way to do it, but using Javascript?


    Best regards
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 17 Dec 2008 Link to this post

    Hi Quim,

    I'm glad that the problem was gone. This is the only way to add nodes to RadTreeView client-side.

    Regards,
    Yana
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  5. Alex
    Alex avatar
    5 posts
    Member since:
    May 2008

    Posted 24 Apr 2009 Link to this post

    I am also experiencing a problem with the Combobox caption showing all treeview nodes the first time I make a selection. Subsequent selections work correctly. Is there any resolution for this issue?
  6. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 27 Apr 2009 Link to this post

    Hello Alex,

    Please check our online example demonstrating RadTreeView in RadComboBox, note this javascript code:

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

    "div1" is the div in the item template which contains the treeview. Exactly this script prevents the combobox from showing the text of all the nodes.

    Regards,
    Yana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017