Dock dragging issue

[eyal]

Hi,

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">
        </telerik:RadDockZone>
    </telerik:RadDockLayout>

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

radDock.ContentContainer.Controls.Add(lbl)

radDockZone1.Controls.Add(radDock)

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

Any ideas on this issue are welcome.

Thanks!
eyal

[Pero]

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">
    .rdPlaceHolder
    {
        padding: 2px !important;
    }
</style>

Best wishes,
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.

[eyal]

Great!
Thank you Pero.

br,
eyal