Treeview in Combobox with AJAX Panel Strange behavior

5 posts, 1 answers
  1. HSLaw
    HSLaw avatar
    158 posts
    Member since:
    Jan 2006

    Posted 06 Mar 2009 Link to this post

    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 ?


  2.
  3. Yana
    Admin
    Yana avatar
    4789 posts

    Posted 06 Mar 2009 Link to this post

    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.
  5. HSLaw
    HSLaw avatar
    158 posts
    Member since:
    Jan 2006

    Posted 10 Mar 2009 Link to this post

    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" /> 
     
  7. Answer
    Yana
    Admin
    Yana avatar
    4789 posts

    Posted 12 Mar 2009 Link to this post

    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.
  8.
  9. HSLaw
    HSLaw avatar
    158 posts
    Member since:
    Jan 2006

    Posted 12 Mar 2009 Link to this post

    Thanks, Yana.
Back to Top