Zone size when dragging

2 posts, 0 answers
  1. Ryan
    Ryan avatar
    26 posts
    Member since:
    Sep 2010

    Posted 24 Mar 2011 Link to this post

    I've come across an odd thing happening on my dock's background when dragging an item that exists in a zone on it's own, vs what happens when you drag a widget that has other items in the same dock with it. Screenshots attached will explain further, but basically, it looks like it uses the zone's height when the item's on its own (smallzone.png).
    If there's another item/widget under or above the item you're dragging, its background uses the desired output (desiredzone.png).

    I've set the MinHeight on the zones to make sure it's more than just a thin band of grey that the user will barely be able to see (in case I can't get around it) but is there a way to make it use the item's height instead of the zone's when there's only one item present? Thanks.
  2. Pero
    Pero avatar
    1156 posts

    Posted 29 Mar 2011 Link to this post

    Hi Ryan,

    This functionality cannot be achieved out-of-the-box, but with a bit of custom JS code we can show the placeholder when the zone is empty. Basically we need to override the method that shows the placeholder, and show it at all times. This is the code (place it under the ScriptManager on your page):
    <script type="text/javascript">
        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 =;
            placeholderStyle.height = dockBounds.height - (placeholderMargin.vertical + placeholderBorder.vertical) + "px";
            placeholderStyle.width = this.get_fitDocks() && !horizontal ? "100%" : dockBounds.width - (placeholderMargin.horizontal + placeholderBorder.horizontal) + "px";
            var innerDocks = this.get_docks();
            if (innerDocks.length > 0)
                //If all inner docks are closed the zone will not display the placeholder
                for (var i = 0; i < innerDocks.length; i++)
                    if (innerDocks[i].get_closed() == false)
                        placeholderStyle.display = "block";
            if (this.get_highlightedCssClass() == null)
                placeholderStyle.display = "block";

    Kind regards,
    the Telerik team
Back to Top