No Drop zone dotted border

[Fernando Mayorga]

I have a set of RadDocks with the handle set to none and using a custom handle.  When one of these docks is dropped into an empty RadDockZone there is no dotted line shown for the Drop Zone.

I noticed this behavior on your online examples as well:

http://demos.telerik.com/aspnet-ajax/dock/examples/setdraghandleclientside/defaultcs.aspx

to reproduce, empty a dock zone and then drag a RadDock into the emptied zone, you will notice that no indication of the drop zone is visible.

Is there a way to force the dotted border for the drop zone to show while dragging on top of the zone?

Thank you.

Fernando Mayorga

[Pero]

Hi Fernando,

You can make the drop zone have dotted border (or in fact have any other custom style) by using the RadDockZone's HighlightedCssClass property. Create a custom CSS class and apply it to the desired DockZone. We have an example that demonstrates this functionality. Please take a look at it: http://demos.telerik.com/aspnet-ajax/dock/examples/highlightedcssclass/defaultcs.aspx.

CustomCssClass is applied to HighlightedCssClass property.

Kind regards,
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.

[Gido Geek]

Hi Fernando,

I had the same issue. It can be solved with some JavaScript magic ;)

Telerik.Web.UI.RadDockZone.prototype._showPlaceholder = function(dock, location) {
    this._repositionPlaceholder(dock.get_element(), location);

    if (!dockBounds) {
        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.backgroundColor = "transparent";

    placeholderStyle.display = "block";

    return;
}

I assumed you wanted to achieve the same behavior as on a non-empty zone. This did wonders for me!

If this was helpful please mark my answer as the answer to your question.

[Fernando Mayorga]

Gido, works great, thanks for sharing this!  I guess I should have inspected the object before posting, you save me tons of time.

Fernando

[Gido Geek]

Hey Fernando,

I'm glad I could be of assistance.

Thx for marking the answer.

Regards,

Gido

[Quinten]

Gido,

I'm interested in applying your Javascript solution, but I'm getting errors with the script as-is.  IE is not recognizing "Telerik.Web.UI.RadDockZone.prototype". 

What could I be doing wrong?

Thank you!

[EDIT] I fixed this by putting the script after the ScriptManager block.

Thanks for the fix, Gido!!

[AJtheCoder]

This solution helped me. I had to change one line, though:

if (!dockBounds) {

became

if (typeof dockBounds == "undefined" || !dockBounds) {

Thanks!

[LeBear]

Gido Geek and ADH, you guys rock!

[LeBear]

Also...

Hey, Telerik.  You wouldn't want to add this as default behavior, would you?

[Pero]

Hi,

We will consider this scenario and decide how to handle it. We will either incorporate this functionality in the RadDock control, or add an article in our Code Library, that describes how to achieve this behavior.

Kind regards,
Pero
the Telerik team