Dock dragging issue

3 posts, 1 answers
  1. eyal
    eyal avatar
    54 posts
    Member since:
    Sep 2009

    Posted 08 Mar 2010 Link to this post


    I have an image gallery admin window, where images can be drag-and-dropped to rearrange their order (see attached screen-shot). It works fine until I drag the last image (right side) on each row. As you can see in image no. 1 the behavior is as expected, while on image no. 2 the images on the following rows are messed-up once I click to drag the last image on the row. The images are rearranged correctly once I drop the selected image. Nevertheless, this mess-up prevents a smooth utilization of the image gallery tool. This behavior is consistent on FF, IE, Safari, and Chrome.

    The aspx docking part looks like this:
     <telerik:RadDockLayout ID="radDockLayout1" runat="server"
            <asp:HiddenField ID="hidImages" runat="server" /> 
            <telerik:RadDockZone ID="radDockZone1" runat="server" Orientation="Horizontal" Width="740px" Height="400px">            

    RadDocks are dynamically created on server-side:
    Dim radDock As New RadDock 
    radDock.ID = "radDock$" & intImageID
    radDock.UniqueName = "radDock$" & intImageID
    radDock.DockMode = DockMode.Docked 
    radDock.DockHandle = DockHandle.None                   
    radDock.Width = Unit.Pixel(140) 
    radDock.Height = Unit.Pixel(170) 
    radDock.OnClientInitialize = "SetHandleDock" 
    radDock.OnClientDragEnd = "onDockDragEnd" 
    radDock.Style.Value = "margin:2px; text-align:center;" 
    Dim lbl As New Label 
    lbl.Text = "<div>" 
    ' Here comes Dock content => image and admin bar 
    lbl.Text &= "</div>" 

    Note that 'onClientDragStart' is not used in this case.

    Any ideas on this issue are welcome.


  2. Answer
    Pero avatar
    1156 posts

    Posted 11 Mar 2010 Link to this post

    Hello Eyal,

    When the zone is with Orientation="Horizontal" the docks are with float: left. If the placeholder's height is smaller than the one of the dock, the dock will not appear on the next line but to the right of the previous dock just below the placeholder. To avoid the issue you need to increase the size of the placeholder. The following CSS will do the trick:
    <style type="text/css">
            padding: 2px !important;

    Best wishes,
    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. eyal
    eyal avatar
    54 posts
    Member since:
    Sep 2009

    Posted 15 Mar 2010 Link to this post

    Thank you Pero.

Back to Top