Zone size when dragging

[Ryan]

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.

[Pero]

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 = 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";

        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";
                    return;
                }
            }
        }

        if (this.get_highlightedCssClass() == null)
        {
            placeholderStyle.display = "block";
        }
    }
</script>

Kind regards,
Pero
the Telerik team