RadDock not collapsing in IE

[Gene]

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

[Gene]

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

[Pero]

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.

[Gene]

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

[Pero]

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.

[Gene]

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