Combobox with treeview

[Quim]

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

[Quim]

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

[Yana]

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.

[Alex]

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?

[Yana]

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.