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

[Solved] Treeview in combo loses checked appearance after Ajax call.

4 Answers 125 Views

ComboBox

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

4 Answers, 1 is accepted

answered on 20 May 2008, 12:35 AM

Hi Simon,

Please find below an example of the code starting with the code behind as shown below.

    
               public partial class _Default : System.Web.UI.Page  
        
                {  
        
                    protected void Page_Load(object sender, EventArgs e)  
        
                    {  
        
                        if (!Page.IsPostBack)  
        
                        {  
        
                            LoadTree();  
        
                        }  
        
                    }  
        
                    private void LoadTree()  
        
                    {  
        
                        RadTreeView tvw = (RadTreeView)this.cboTree.Items[0].FindControl("tvwTree");  
        
                        for (int i = 0; i < 10; i++)  
        
                        {  
        
                            RadTreeNode node = new RadTreeNode();  
        
                            node.Text = i.ToString();  
        
                            node.Value = i.ToString();  
        
                            node.Checked = false;  
        
                            tvw.Nodes.Add(node);  
        
                        }  
        
                    }  
        
                    protected void RadAjaxManager_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)  
        
                    {             
        
                        // -- Save..  
        
                    }  
        
                }

ASPX Code is as follows.

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Testing._Default" %> 
        
            <%@ Register Assembly="Telerik.Web.UI, Version=2008.1.415.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" 
        
                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>Untitled Page</title> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                <div> 
        
                    <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        
                </div> 
        
                <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">  
        
                    <script language="javascript" type="text/javascript">  
        
                        function StopPropagation(e)    
        
                        {    
        
                            if(!e)    
        
                            {    
        
                                e = window.event;    
        
                            }    
        
                            e.cancelBubble = true;                                   
        
                        }    
        
                        function Save()  
        
                        {  
        
                           var ajaxPanel = $find("<%= RadAjaxManager.ClientID %>");  
        
                           ajaxPanel.ajaxRequest("Save");  
        
                           return false;  
        
                        }             
        
                    </script> 
        
                </telerik:RadCodeBlock> 
        
                <telerik:RadAjaxManager ID="RadAjaxManager" runat="server" OnAjaxRequest="RadAjaxManager_AjaxRequest">  
        
                    <%-- If uncommented the treeview retains its checked appearance after postback..   
        
                    <AjaxSettings> 
        
                        <telerik:AjaxSetting AjaxControlID="RadAjaxManager">  
        
                            <UpdatedControls> 
        
                                <telerik:AjaxUpdatedControl ControlID="cboTree" />   
        
                            </UpdatedControls>              
        
                        </telerik:AjaxSetting>   
        
                    </AjaxSettings>           
        
                    --%> 
        
                </telerik:RadAjaxManager> 
        
                <table style="width:100%; height:100%">  
        
                    <tr> 
        
                        <td style="width:80%">  
        
                            <telerik:RadComboBox ID="cboTree" runat="server" 
        
                                RadComboBoxImagePosition="Right" Skin="Office2007" Width="100%"   
        
                                ExpandAnimation-Duration="100" CollapseAnimation-Duration="100">  
        
                                <Items>                                    
        
                                    <telerik:RadComboBoxItem runat="server" Text=""/>    
        
                                </Items>    
        
                                <CollapseAnimation Duration="100" Type="OutQuint" /> 
        
                                <ExpandAnimation Type="OutQuart" /> 
        
                                <ItemTemplate>                                       
        
                                    <div id="div1" onclick="StopPropagation()">   
        
                                        <telerik:RadTreeView ID="tvwTree" runat="server" Skin="Office2007"

                                            EnableViewState="true" 
        
                                            Width="100%" style="white-space:normal" MultipleSelect="true" ShowLineImages="False" CheckBoxes="True">  
        
                                        </telerik:RadTreeView> 
        
                                    </div>   
        
                                </ItemTemplate>   
        
                            </telerik:RadComboBox> 
        
                        </td> 
        
                    </tr> 
        
                    <tr> 
        
                        <td>                              
        
                            <hr /> 
        
                            <input id="btnSave" type="button" value="Save"  onclick="return Save();"/>                      
        
                        </td> 
        
                    </tr> 
        
                </table>   
        
                </form> 
        
            </body> 
        
            </html>

If you run the code and check a number of the checkboxes and then press the save button you will see that after the Ajax request - the checked appearance of the combo has gone - if however you uncomment the code within the RAD Ajax manager and run the code again you will notice that after the save, the checked checkboxes retain their checked appearance.

The Ajax request is used to save the state of the form to the database, it does not update any controls.

Regards, Michael.

answered on 22 May 2008, 04:22 PM

Hello Michael,

Thank you for getting back to me and providing additional information.

I managed to reproduce the issue.

This is a known problem with RadComboBox and CheckBoxes in its drop down, in IE6 only.

We do not have an ultimate solution to it, yet, but I can offer you the workaround until we finally fix it. Add the following JavaScript code after the declaration of the RadComboBox (after the </table> closing tag might be most convenient):

    
                        function disableDetaching()  
        
                        {  
        
                            var comboBox = $find("cboTree"); 
        
                            if (comboBox)  
        
                            {  
        
                                if (comboBox._isDetached)  
        
                                {  
        
                                    comboBox._attachDropDown();  
        
                                }  
        
                                //set the _detachDropDown and _attachDropDown internal functions to empty ones:  
        
                                comboBox._detachDropDown = function(){}  
        
                                comboBox._attachDropDown = function(){}  
        
                            }  
        
                        }  
        
                        Sys.Application.add_load(disableDetaching);

Everything should work fine now.

I hope this is acceptable for you.

Best wishes,
Simon
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center