RadDock not collapsing in IE

6 posts, 1 answers
  1. Gene
    Gene avatar
    16 posts
    Member since:
    Jun 2012

    Posted 21 Aug 2009 Link to this post

    Hello,

    I am having an issue with a RadDock not collapsing in IE.  We have the following code:

    <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
            <ContentTemplate> 
                <telerik:RadDockLayout ID="RadDockLayout1" runat="server" Skin="WebBlue" OnSaveDockLayout="RadDockLayout1_SaveDockLayout" 
                    OnLoadDockLayout="RadDockLayout1_LoadDockLayout"> 
                    <div class="span-15 append-1"> 
                        <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="200"> 
                            <telerik:RadDock ID="RadDock1" AutoPostBack="true" CommandsAutoPostBack="true" DockMode="Docked" runat="server" 
                                Title="Welcome" DefaultCommands="ExpandCollapse" > 
                                <ContentTemplate> 
                                    <div class="dockWrap"> 
                                        <asp:Literal ID="Literal1" runat="server" meta:resourcekey="homeWelcome"></asp:Literal> 
                                    </div> 
                                </ContentTemplate> 
                            </telerik:RadDock> 
                        </telerik:RadDockZone> 
                    </div> 
                    <div class="span-8"> 
                        <telerik:RadDockZone ID="RadDockZone2" runat="server" MinHeight="200"> 
                            <telerik:RadDock ID="RadDock2" AutoPostBack="true" CommandsAutoPostBack="true" DockMode="Docked" runat="server" 
                                meta:resourcekey="RadDockSpendYourPoints" DefaultCommands="ExpandCollapse"> 
                                <ContentTemplate> 
                                    <uc2:SpendYourPoints ID="SpendYourPointsCtl" runat="server" /> 
                                </ContentTemplate> 
                            </telerik:RadDock> 
                        </telerik:RadDockZone> 
                    </div> 
                </telerik:RadDockLayout> 
            </ContentTemplate> 
        </asp:UpdatePanel> 


    It's a very simple dock layout right now, and we have seen this issue since we have first placed docks in our pages.  We have another page on our site that has an even simpler dock on it, and it does not work either.  The behavior is, in IE clicking on the collapse button does nothing, but if you drag the dock around, then click on the collapse button it works.  In Firefox the collapse button works perfectly the first time you click it.

    We are using the 2009.2.701.35 version of the controls.

    Thanks,
    Gene
  3. Gene
    Gene avatar
    16 posts
    Member since:
    Jun 2012

    Posted 21 Aug 2009 Link to this post

    Ok, apparently this is more complicated than I thought.  So here's the update:

    On the page for which I posted the code above, we have added code-behind to automatically save the dock layout each time the dock is moved.  Here is that code:

    Protected Sub RadDockLayout1_SaveDockLayout(ByVal sender As Object, ByVal e As Telerik.Web.UI.DockLayoutEventArgs) 
            ' capture the collapse state of the control 
            Dim collapsedState As New Dictionary(Of String, Boolean) 
            Dim myDockLayout As RadDockLayout = DirectCast(sender, RadDockLayout) 
            For Each myControl As Control In myDockLayout.Controls 
                If TypeOf myControl Is RadDockZone Then 
                    For Each myDockedControl As Control In myControl.Controls 
                        If TypeOf myDockedControl Is RadDock Then 
                            collapsedState.Add(myDockedControl.ID, DirectCast(myDockedControl, RadDock).Collapsed) 
                        End If 
                    Next 
                End If 
            Next 
     
            Dim serializer As New JavaScriptSerializer() 
            Dim positionsCookie As New HttpCookie("DockLayout_Home", serializer.Serialize(New String() {serializer.Serialize(e.Positions), serializer.Serialize(e.Indices), serializer.Serialize(collapsedState)})) 
            positionsCookie.Expires = DateTime.Now.AddYears(1) 
            Response.Cookies.Add(positionsCookie) 
        End Sub 
     
        Protected Sub RadDockLayout1_LoadDockLayout(ByVal sender As Object, ByVal e As Telerik.Web.UI.DockLayoutEventArgs) 
            Dim positionsCookie As HttpCookie = Request.Cookies("DockLayout_Home") 
            If Not positionsCookie Is Nothing Then 
                Dim serializedPositionsAndIndices As String = positionsCookie.Value 
                If Not String.IsNullOrEmpty(serializedPositionsAndIndices) Then 
                    Dim serializer As New JavaScriptSerializer() 
                    Dim stateInfo As String() = serializer.Deserialize(Of String())(serializedPositionsAndIndices) 
                    e.Positions = serializer.Deserialize(Of Dictionary(Of String, String))(stateInfo(0)) 
                    e.Indices = serializer.Deserialize(Of Dictionary(Of String, Integer))(stateInfo(1)) 
     
                    ' and now set the expanded/collapsed state 
                    For Each kvp As KeyValuePair(Of String, Boolean) In serializer.Deserialize(Of Dictionary(Of String, Boolean))(stateInfo(2)) 
                        DirectCast(DirectCast(sender, RadDockLayout).FindControl(kvp.Key), RadDock).Collapsed = kvp.Value 
                    Next 
                End If 
            End If 
        End Sub 


    On this page is where we see the behavior of not being able to collapse a dock until after we have dragged it (and presumably the savedocklayout has fired).

    However, on the other page I mentioned, there is NO code to save the dock layout, because in fact there is just one dock at this time.  On that page, the dock will not collapse no matter what we do (in IE; once again, works fine in Firefox).  I drag it around, and it still won't collapse.

    Here is the code for that dock:

    <asp:Panel ID="pnlRedeemNow" runat="server" Visible="true" CssClass="right"> 
                <telerik:RadDockLayout ID="RadDockLayout1" runat="server" Skin="WebBlue"> 
                    <div class="span-7"> 
                    <telerik:RadDockZone ID="RadDockZone1" runat="server"> 
                        <telerik:RadDock ID="RadDock1" runat="server" DefaultCommands="ExpandCollapse" DockMode="Docked" 
                            Title="Redeem Now!"> 
                            <ContentTemplate> 
                            <uc1:RedeemNow ID="ucRedeemNow" runat="server" /> 
                            </ContentTemplate> 
                        </telerik:RadDock> 
                    </telerik:RadDockZone> 
                    </div> 
                </telerik:RadDockLayout> 
        </asp:Panel> 



    Any help on this is greatly appreciated.

    Thanks,
    Gene







  5. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 26 Aug 2009 Link to this post

    Hi Gene,

    The dock with ID="RadDock1" is expanding/collapsing correctly. Because the <div> inside does not have a fixed height and also the Literal control does not have its Text property set, the ContentContainer of the RadDock has a height of 0px (the ContentContainer  resizes according to the content placed inside), which makes the dock seem like it is not expanding/collapsing. So practically in order for the user to notice that the dock is expanding/collapsing, the height of the content has to be non zero. This can be easily achieved by setting the Height property of the dock to a fixed size (i.e. Height="100px").

    However if you need the dock to resize its height to its content you need to: either place the controls directly into the <ContentTemplate>, or set a style attribute to the <div> inside the <ContentTemplate> like <div style="overflow:auto">.

    Here is the source code of a sample project based on the source code that you sent us:

    .aspx
    <%@ Register Assembly="Telerik.Web.UI" 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></title> 
     
        <script type="text/javascript"> 
            function ExpandCollapse(dock, args) 
            { 
                var command = args.command; 
                if (command.get_name() == "ExpandCollapse") 
                { 
                    if (command.get_state() == "1") 
                    { 
                        alert("Dock expanded"); 
                    } 
                    else if (command.get_state() == "2") 
                    { 
                        alert("Dock Collapsed"); 
                    } 
                } 
            } 
        </script> 
     
    </head> 
    <body> 
        <form id="form1" runat="server"> 
        <asp:ScriptManager ID="ScriptManager1" runat="server"> 
        </asp:ScriptManager> 
        <div> 
            <h1> 
                <asp:Localize runat="server" ID="WelcomeMessage" Text="Welcome!" meta:resourcekey="ddffdfdf" /> 
            </h1> 
            <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
                <ContentTemplate> 
                    <telerik:RadDockLayout ID="RadDockLayout1" runat="server" Skin="WebBlue" OnSaveDockLayout="RadDockLayout1_SaveDockLayout" 
                        OnLoadDockLayout="RadDockLayout1_LoadDockLayout"> 
                        <div class="span-15 append-1"> 
                            <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="200"> 
                                <telerik:RadDock ID="RadDock1" AutoPostBack="true" CommandsAutoPostBack="true" DockMode="Docked" 
                                    runat="server" Title="Welcome" DefaultCommands="ExpandCollapse" OnClientCommand="ExpandCollapse"> 
                                    <ContentTemplate> 
                                        <div class="dockWrap" style="overflow: auto;"> 
                                            <asp:Literal ID="Literal1" runat="server" meta:resourcekey="homeWelcome"></asp:Literal> 
                                        </div> 
                                    </ContentTemplate> 
                                </telerik:RadDock> 
                            </telerik:RadDockZone> 
                        </div> 
                        <div class="span-8"> 
                            <telerik:RadDockZone ID="RadDockZone2" runat="server" MinHeight="200"> 
                                <telerik:RadDock ID="RadDock2" AutoPostBack="true" CommandsAutoPostBack="true" DockMode="Docked" 
                                    runat="server" meta:resourcekey="RadDockSpendYourPoints" DefaultCommands="ExpandCollapse" 
                                    Height="100px"> 
                                    <ContentTemplate> 
                                        <div> 
                                        </div> 
                                        <%--<uc2:spendyourpoints id="SpendYourPointsCtl" runat="server" />--%> 
                                    </ContentTemplate> 
                                </telerik:RadDock> 
                            </telerik:RadDockZone> 
                        </div> 
                    </telerik:RadDockLayout> 
                </ContentTemplate> 
            </asp:UpdatePanel> 
            <asp:Panel ID="pnlRedeemNow" runat="server" Visible="true" CssClass="right"> 
                <telerik:RadDockLayout ID="RadDockLayout2" runat="server" Skin="WebBlue"> 
                    <div class="span-7"> 
                        <telerik:RadDockZone ID="RadDockZone3" runat="server"> 
                            <telerik:RadDock ID="RadDock3" runat="server" DefaultCommands="ExpandCollapse" DockMode="Docked" 
                                Title="Redeem Now!"> 
                                <ContentTemplate> 
                                </ContentTemplate> 
                            </telerik:RadDock> 
                        </telerik:RadDockZone> 
                    </div> 
                </telerik:RadDockLayout> 
            </asp:Panel> 
        </div> 
        </form> 
    </body> 
    </html> 
        

    .vb
    Imports System 
    Imports Telerik.Web.UI 
    Imports System.Web 
    Imports System.Web.Script.Serialization 
     
     
     
    Partial Class _Default 
        Inherits System.Web.UI.Page 
     
        Protected Sub RadDockLayout1_SaveDockLayout(ByVal sender As Object, ByVal e As DockLayoutEventArgs) 
            ' capture the collapse state of the control  
            Dim collapsedState As New Dictionary(Of String, Boolean) 
            Dim myDockLayout As RadDockLayout = DirectCast(sender, RadDockLayout) 
            For Each myControl As Control In myDockLayout.Controls 
                If TypeOf myControl Is RadDockZone Then 
                    For Each myDockedControl As Control In myControl.Controls 
                        If TypeOf myDockedControl Is RadDock Then 
                            collapsedState.Add(myDockedControl.ID, DirectCast(myDockedControl, RadDock).Collapsed) 
                        End If 
                    Next 
                End If 
            Next 
     
            Dim serializer As New JavaScriptSerializer() 
            Dim positionsCookie As New HttpCookie("DockLayout_Home", serializer.Serialize(New String() {serializer.Serialize(e.Positions), serializer.Serialize(e.Indices), serializer.Serialize(collapsedState)})) 
            positionsCookie.Expires = DateTime.Now.AddYears(1) 
            Response.Cookies.Add(positionsCookie) 
        End Sub 
     
        Protected Sub RadDockLayout1_LoadDockLayout(ByVal sender As Object, ByVal e As DockLayoutEventArgs) 
            Dim positionsCookie As HttpCookie = Request.Cookies("DockLayout_Home") 
            If Not positionsCookie Is Nothing Then 
                Dim serializedPositionsAndIndices As String = positionsCookie.Value 
                If Not String.IsNullOrEmpty(serializedPositionsAndIndices) Then 
                    Dim serializer As New JavaScriptSerializer() 
                    Dim stateInfo As String() = serializer.Deserialize(Of String())(serializedPositionsAndIndices) 
                    e.Positions = serializer.Deserialize(Of Dictionary(Of String, String))(stateInfo(0)) 
                    e.Indices = serializer.Deserialize(Of Dictionary(Of String, Integer))(stateInfo(1)) 
     
                    ' and now set the expanded/collapsed state  
                    For Each kvp As KeyValuePair(Of String, Boolean) In serializer.Deserialize(Of Dictionary(Of String, Boolean))(stateInfo(2)) 
                        DirectCast(DirectCast(sender, RadDockLayout).FindControl(kvp.Key), RadDock).Collapsed = kvp.Value 
                    Next 
                End If 
            End If 
        End Sub 
     
    End Class 


    Please note that, I could not test whether or not the two docks with the <uc1:RedeemNow> user control placed inside, are expanding/collapsing as expected, because I do not have the source code of the <uc1:RedeemNow> control.   


    All the best,
    Pero
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  7. Gene
    Gene avatar
    16 posts
    Member since:
    Jun 2012

    Posted 26 Aug 2009 Link to this post

    Pero,

    Thank you for your reply.  I have done some further investigation into this issue, and it appears that the problem is with a javascript we are including on our page.  I didn't include this code with the original, because it didn't occur to me that there might be an issue with it.  But I have set up a simple project, and have reproduced the issue there:

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="WebApplication1.WebForm1" %> 
    <%@ Register assembly="Telerik.Web.UI" 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></title> 
         
        <script type="text/javascript"> 
        function ExpandCollapse(dock, args) { 
            var command = args.command; 
            if (command.get_name() == "ExpandCollapse") { 
                if (command.get_state() == "1") { 
                    alert("Dock expanded"); 
                } 
                else if (command.get_state() == "2") { 
                    alert("Dock Collapsed"); 
                } 
            } 
        }   
        </script>  
    </head> 
    <body> 
        <form id="form1" runat="server"> 
         
         <telerik:RadScriptManager id="RadScriptManager1" runat="server"> 
         <Scripts> 
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> 
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /> 
                <asp:ScriptReference Path="~/scripts/offspring-1.0.min.js" /> 
            </Scripts> 
        </telerik:RadScriptManager> 
         
          <telerik:RadDockLayout ID="RadDockLayout1" runat="server" Skin="WebBlue"> 
                        <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="200"> 
                            <telerik:RadDock ID="RadDock1"  runat="server" 
                                Title="Welcome" OnClientCommand="ExpandCollapse" > 
                                <ContentTemplate> 
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lobortis pellentesque dui, et malesuada ligula placerat auctor. Mauris at tellus at orci dapibus mollis condimentum et nisl. In a libero diam, at tincidunt erat. Proin lacinia dignissim ligula, quis sollicitudin mauris faucibus quis. Integer hendrerit, turpis non auctor ullamcorper, massa urna dictum justo, sit amet bibendum purus libero sed libero. Donec non turpis sed est mollis feugiat. Phasellus ut consectetur mi. Nullam vitae urna diam, ut molestie eros. Donec faucibus, metus non tristique adipiscing, leo ante placerat metus, eu porta sapien sem eget leo. Duis a massa enim. </p>                               
                                </ContentTemplate> 
                            </telerik:RadDock> 
                        </telerik:RadDockZone>                
                </telerik:RadDockLayout> 
         
        </form> 
    </body> 
    </html> 
     


    The offending script is the offspring-1.0.min.js.  This is a script that goes through the DOM, and adds classes to all items based on their position within their parent (first-child, last-child, nth-child).  This is for easy, cross-browser styling of elements.  Here is where I found it:  http://www.alistapart.com/articles/keepelementskidsinlinewithoffspring/

    I realize that Telerik is not responsible for third-party scripts, and I will probably be disabling this script and finding a different way to achieve the style effect I was using this for, but I am mostly curious as to how this could interfere with Telerik's scripts.  I have confirmed this by simply removing the script reference to offspring, and I see the behavior work fine without it.

    Any information is appreciated.

    Thanks,
    Gene




  8.
  9. Answer
    Pero
    Admin
    Pero avatar
    1156 posts

    Posted 01 Sep 2009 Link to this post

    Hello Gene,

    I am glad that you found out the reason which was causing the problems with the RadDock.

    The last couple of days I tested the project that you sent us, and tried to discover how exactly this third party client-script is interfering with the dock's client script, but with no success. I have also noticed that none of the DockCommands (Close, ExpandCollapse and PinUnpn) works correctly when this script is used, and the corresponding client-side events of the dock commands are not fired correctly.

    We will continue researching how this third-party script interferes with our scripts, but as you said, we (Telerik) are not responsible for this problem, and I cannot promise that a solution will be found quickly.

    Please, do not hesitate to contact us if you have any further questions. We will be glad to answer them.


    Greetings,
    Pero
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  11. Gene
    Gene avatar
    16 posts
    Member since:
    Jun 2012

    Posted 01 Sep 2009 Link to this post

    Pero,

    Thank you very much for investigating this issue, even though you didn't need to.  I have removed this script from our project, and everything is working great.  I found out before I did this though, that it apparently plays havoc with the RadTreeView as well, at least when it has checkboxes enabled.  Since Telerik uses a span with Javascript events attached for the checkboxes, apparently those events don't get attached either. 

    I have a feeling that the reason for this conflict is because (and this is a guess) the Telerik scripts are looking for a span with just the class that Telerik added, but since offspring adds other classes (like first-child, last-child, etc), the script isn't finding the span to attach the events.  Just a guess.  No idea if I'm even close.

    Anyway, thank you once again for your help.

    ~Gene
Back to Top