Empty zone higlighting flaw

3 posts, 1 answers
  1. Yeroon
    Yeroon avatar
    87 posts
    Member since:
    Oct 2012

    Posted 10 Mar 2010 Link to this post

    Hi,

    I followed your example from the code library here: http://www.telerik.com/community/code-library/aspnet-ajax/docking/save-dockstate-in-database-using-radajaxmanager.aspx

    Everything works as expected. Great example. I just wanted you to know that there is an unexpected behaviour (no bug severity, just layout).

    To reproduce:

    • Add some docks to both zones
    • Drag and drop some docks. You will see the dotted line as indicator of where the dock will be docked. This is as expected
    • Drag all docks you added to the left zone.
    • Drag 1 to the right zone. Dont drop yet. You will see there is no dotted indicator. Background highlighting of the zone works as expected though.

    So not a major bug. Just an inconsistency in layout when a zone is completely empty.

    /Yeroon

  2. Answer
    Pero
    Admin
    Pero avatar
    1156 posts

    Posted 12 Mar 2010 Link to this post

    Hi Yeroon,

    This is not a problem with our control, but expected behavior. When the DockZone is empty and the user is about to place a dock inside the zone is "highlighted" instead of showing the dock's placeholder. The placeholder is shown when there is more than one dock in the zone.

    If you want to show the placeholder in the case when the zone is empty use the following workaround:

    <%@ 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">
    <head id="Head1" runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
     
        <script type="text/javascript">
            ///Show the placeholder even if the DockZone is empty
            Telerik.Web.UI.RadDockZone.prototype._showPlaceholder = function(dock, location)
            {
                this._repositionPlaceholder(dock.get_element(), location);
     
                var dockBounds = dock._getBounds();
                var placeholderMargin = dock._getMarginBox(this._placeholder);
                var placeholderBorder = dock._getBorderBox(this._placeholder);
     
                var horizontal = this.get_isHorizontal();
                var placeholderStyle = this._placeholder.style;
     
                placeholderStyle.height = dockBounds.height - (placeholderMargin.vertical + placeholderBorder.vertical) + "px";
                placeholderStyle.width = this.get_fitDocks() && !horizontal ? "100%" : dockBounds.width - (placeholderMargin.horizontal + placeholderBorder.horizontal) + "px";
     
                placeholderStyle.display = "block";
                return;
            }
        </script>
     
        <div>
            <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
                <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="300px" Width="300px"
                    Style="float: left; margin-right: 15px;">
                    <telerik:RadDock ID="RadDock1" runat="server" Width="300px" Title="RadDock-Title">
                        <ContentTemplate>
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            CONTENT
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                        </ContentTemplate>
                    </telerik:RadDock>
                </telerik:RadDockZone>
                <telerik:RadDockZone ID="RadDockZone2" runat="server" MinHeight="300px" Width="300px"
                    Style="float: left;">
                    <telerik:RadDock ID="RadDock2" runat="server" Width="300px" Title="RadDock-Title">
                        <ContentTemplate>
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            CONTENT
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                        </ContentTemplate>
                    </telerik:RadDock>
                    <telerik:RadDock ID="RadDock3" runat="server" Width="300px" Title="RadDock-Title">
                        <ContentTemplate>
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            CONTENT
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                        </ContentTemplate>
                    </telerik:RadDock>
                    <telerik:RadDock ID="RadDock4" runat="server" Width="300px" Title="RadDock-Title">
                        <ContentTemplate>
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            CONTENT
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                        </ContentTemplate>
                    </telerik:RadDock>
                </telerik:RadDockZone>
            </telerik:RadDockLayout>
        </div>
        </form>
    </body>
    </html>



    All the best,
    Pero
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Yeroon
    Yeroon avatar
    87 posts
    Member since:
    Oct 2012

    Posted 12 Mar 2010 Link to this post

    Thanks! I got it working.
Back to Top