No Drop zone dotted border

10 posts, 1 answers
  1. Fernando Mayorga
    Fernando Mayorga avatar
    4 posts
    Member since:
    Jul 2009

    Posted 12 Jan 2010 Link to this post

    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:
    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
  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 13 Jan 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Gido Geek
    Gido Geek avatar
    28 posts
    Member since:
    Nov 2009

    Posted 13 Jan 2010 Link to this post

    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.
  5. Fernando Mayorga
    Fernando Mayorga avatar
    4 posts
    Member since:
    Jul 2009

    Posted 13 Jan 2010 Link to this post

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

    Fernando
  6. Gido Geek
    Gido Geek avatar
    28 posts
    Member since:
    Nov 2009

    Posted 13 Jan 2010 Link to this post

    Hey Fernando,

    I'm glad I could be of assistance.
    Thx for marking the answer.

    Regards,
    Gido
  7. Chris May IT Team Lead
    Chris May IT Team Lead avatar
    31 posts
    Member since:
    Nov 2009

    Posted 30 Jun 2010 Link to this post

    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!!
  8. ADH
    ADH avatar
    45 posts
    Member since:
    Nov 2006

    Posted 18 Aug 2010 Link to this post

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

    if (!dockBounds) {

    became

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

    Thanks!
  9. LeBear
    LeBear avatar
    233 posts
    Member since:
    May 2006

    Posted 30 Sep 2010 Link to this post

    Gido Geek and ADH, you guys rock!
  10. LeBear
    LeBear avatar
    233 posts
    Member since:
    May 2006

    Posted 30 Sep 2010 Link to this post

    Also...

    Hey, Telerik.  You wouldn't want to add this as default behavior, would you?
  11. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 05 Oct 2010 Link to this post

    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
    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017