This is a migrated thread and some comments may be shown as answers.

Scrollbars always show up with Image content in RadDock

1 Answer 38 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 02 Dec 2008, 11:16 PM
I tried using the code from :
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

Sort by
0
Petko
Telerik team
answered on 04 Dec 2008, 12:47 PM
Hello Michael,

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.
Tags
Dock
Asked by
Michael
Top achievements
Rank 1
Answers by
Petko
Telerik team
Share this question
or