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

Treeview in Combobox with AJAX Panel Strange behavior

4 Answers 89 Views

TreeView

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

HSLaw asked on 06 Mar 2009, 09:19 AM

Hi,

Im using treeview in combobox.

URL with AJAXPanel: http://www.ximnet.com.my/aspnet35/telerik/treeview/

URL without AJAXPanel: http://www.ximnet.com.my/aspnet35/telerik/treeview/noajax/Default.aspx

Basically when user select language, the treeview will load the correct sections for selected language.

In the ajax version, when we select English, and select Sub Section B, we will get Section ASection BSub Section BSection C in the combobox, compared to the correct value in the non-ajax version.

My ASPX code:

    
            <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="telerik_treeview_Default" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <script type="text/javascript">  
        
                function comboLoad(sender, eventArgs) {  
        
                    sender.set_text(sender.get_items().getItem(0).get_value());  
        
                }  
        
                function nodeClicking(sender, args) {  
        
                    var comboBox = $find("<%= cbSection.ClientID %>");  
        
                    var node = args.get_node()  
        
                    comboBox.set_text(node.get_text());  
        
                    comboBox.trackChanges();  
        
                    comboBox.get_items().getItem(0).set_value(node.get_text());  
        
                    comboBox.commitChanges();  
        
                    comboBox.hideDropDown();  
        
                }  
        
                function StopPropagation(e) {  
        
                    if (!e) {  
        
                        e = window.event;  
        
                    }  
        
                    e.cancelBubble = true;  
        
                }  
        
                function OnClientDropDownOpenedHandler(sender, eventArgs) {  
        
                    var tree = sender.get_items().getItem(0).findControl("TVSection");  
        
                    var selectedNode = tree.get_selectedNode();  
        
                    if (selectedNode) {  
        
                        selectedNode.scrollIntoView();  
        
                    }  
        
                }  
        
            </script> 
        
            <html xmlns="http://www.w3.org/1999/xhtml">  
        
            <head runat="server">  
        
                <title></title>  
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                <asp:ScriptManager ID="ScriptManager1" runat="server">  
        
                </asp:ScriptManager> 
        
                <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Height="200px" Width="300px">  
        
                    <div> 
        
                        <telerik:RadComboBox ID="cbLanguage" runat="server" ShowToggleImage="True" Skin="Default" 
        
                            Width="300px" AutoPostBack="True" CausesValidation="False">  
        
                            <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation> 
        
                        </telerik:RadComboBox> 
        
                    </div> 
        
                    <div> 
        
                        <telerik:RadComboBox ID="cbSection" Text="Please select section" AllowCustomText="true" 
        
                            runat="server" Height="140px" Width="300px" ShowToggleImage="True" Skin="Default" 
        
                            OnClientLoad="comboLoad" OnClientDropDownOpened="OnClientDropDownOpenedHandler">  
        
                            <ItemTemplate> 
        
                                <div id="div1">  
        
                                    <telerik:RadTreeView runat="server" ID="TVSection" OnClientNodeClicking="nodeClicking" 
        
                                        Skin="Web20" /> 
        
                                </div> 
        
                            </ItemTemplate> 
        
                            <Items> 
        
                                <telerik:RadComboBoxItem Text="" /> 
        
                            </Items> 
        
                            <CollapseAnimation Type="None" /> 
        
                            <ExpandAnimation Type="None" /> 
        
                        </telerik:RadComboBox> 
        
                        <script type="text/javascript">  
        
                            var div1 = document.getElementById("div1");  
        
                            div1.onclick = StopPropagation;  
        
                        </script> 
        
                    </div> 
        
                </telerik:RadAjaxPanel> 
        
                </form> 
        
            </body> 
        
            </html>

Is there something I did wrong ?

4 Answers, 1 is accepted

answered on 06 Mar 2009, 04:17 PM

Hi Paladin,

Please remove the following lines from your code:

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

and subscribe to this onClick event like this:

    
             <div id="div1" onclick="StopPropagation(event);">

this will fix the problem.

Kind 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.

answered on 11 Mar 2009, 01:53 AM

Hi,

I have updated the code : http://www.ximnet.com.my/aspnet35/telerik/treeview/
I have 2 more questions:

1. How do I clear the section's combobox when user reselect the language? Currently the combobox displaying the previous selection when user reselect the language.I tried below but not working:

cbSection.SelectedValue = -1
cbSection.Text = ""
cbSection.ClearSelection()

2. I added a validator for section's combobox. But the error message come out on page load before user do anything. Is there something I did wrong?
My validator:

    
            <asp:RequiredFieldValidator ID="RddlSections" Display="Dynamic" CssClass="error" 
        
            runat="server" ControlToValidate="cbSection" ErrorMessage="Please Select Section" />

Accepted

answered on 12 Mar 2009, 12:47 PM

comboinajaxpanel.zip

Hi Paladin,

I've modified your page, so these issues are fixed now. Please download the attached file and give it a try.

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.