http://demos.telerik.com/aspnet-ajax/Dock/Examples/HighlightedCssClass/DefaultCS.aspx
Since this is very close to what I am doing.
When I set the radDock size to the image size I get a vertical scrollbar, as soon as I move it I get both.
If I make the radDock roughly 5 pixels bigger in both directions the scroll bars go away but I also get the whitespace at the edge and bottom of the image.
I only need the dragging/resizing capabilities of the radDock. Right now I am just trying to get the dragging to display correctly.
My users drag images onto a canvas and create a collage.
Below is my aspx code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
.CustomCssClass
{
background-color: #c9ecff !important;
}
.raddock .rdSideBorders, .raddock .rdTopBorder, .raddock .rdBottomBorder
{
border: 0 !important;
}
.rdPlaceHolder
{
border: 0 !important;
background: transparent !important;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="ScriptManager1" runat="server" EnableTheming="True">
</telerik:RadScriptManager>
<script type="text/javascript">
function SetHandleDock(dock, args) {
dock.set_handle(document.getElementById("Handle_" + dock.get_id()));
}
</script>
<div>
<telerik:RadDock ID="RadDock1" runat="server" Width="89px" Height="124px" DockHandle="None"
DockMode="Floating" OnClientInitialize="SetHandleDock">
<ContentTemplate>
<img id="Handle_RadDock1" Width="89px" Height="124px" src="/Images/images.jpeg" />
</ContentTemplate>
</telerik:RadDock>
</div>
</form>
</body>
</html>
1 Answer, 1 is accepted
Using the code: document.getElementById("Handle_" + dock.get_id()), will not find the image on the page and you cannot set a correct handle of the dock. Add the following code instead:
dock.set_handle(document.getElementById(dock.get_id()+ "_C_Handle_" + dock.get_id()));
... and set the property Resizable = "true", as well. This will make the RadDock resizable and capable of dragging only through the image. After that, for a better view of your RadDock (clearing the spaces), you can make RadDock 8 pixels larger in height and width of the dimensions of the image.
Hope this helps you.
All the best,
Petko
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.