Disable scrollbars in RadDock Programatically

[localman]

Hoping someone's got the answer to this.  It should be a one liner,but havent figured out how to do it or anywhere where it explains.

I'm creating raddock's programatically, having stored their states in the database.  When i load them, the ContentTemplate is also set in code and is a User Control (ascx).

I've set 

EnableEmbeddedSkins

="false"

I thought that might help me ovverride, but still missing the mark.

all I want is the horz and vert scrollbars to go away.  Doesnt seem to matter if my zone is wider or smaller.  with the same ascx it still always shows the scrollbars.

thanks!

[Nikolay Raykov]

Hello Shane,

You should set "overflow: hidden;" on the Content Template. As you are adding RadDocks programmatically you could do this with this code:

dock.ContentContainer.Style.Add(HtmlTextWriterStyle.Overflow, "hidden");

This way your RadDock won't have neither horizontal nor vertical scrollbars.

All the best,
Nikolay Raykov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[localman]

great - thanks!

I"ll give it a try.

[localman]

Apologies if this is straight forward, but couldnt make this part work.  The docks load fine and display without the scrollbars, but when i click one of them and move it, they reappear.

It should be something in the CreateSaveStateTrigger method, but couldnt find something that works.

thanks again.

 

[Nikolay Raykov]

Hi Shane,

This happens because the CSS of RadDock has a higher priority and gets applied when you move the dock. You could override the CSS style definition for the content area of the dock not to show scroll bars by using the code below:

<style type="text/css">
    .rdContent
    {
        overflow: hidden !important;
    }
</style>

Now even if you move the dock around the scroll bars will not appear.

Sincerely yours,
Nikolay Raykov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[localman]

exactly what I was after. thx!

[Ram]

Hi I too have same problem.
But I'm loading the docks at serverside i mean from codebehind.
So I'm not able to apply css.
I did as you suggested in this thread but I'm getting this if I click on titlebar or move the dock to some other zone.
Moreover I want verticallbar and need to disable only the horizental scroll
How cloud I achive this please help me out asap.

[Slav]

Hello Ram,

In case you want to remove only the horizontal scroll bar from the RadDock, please add the following code sample into your page:

<style type="text/css">
    .rdContent
    {
        overflow-x: hidden !important;
    }
</style>

 
Note that the presented CSS code should be placed in the HTML head section of your page and it will be applied to the RadDock controls, regardless of the approach, used for creating them.

If you are still unable to resolve your issue, given the information above, please prepare and send us a sample, runnable project that isolates the issue at hand so that we can inspect it locally and provide more to the point answer.

Regards,
Slav
the Telerik team

[Howard]

How might one apply this to some RadDock's and not others?  Some RadDock's I will resize the content to fit the viewable area and for others I want to have scrollbars present.

Also, if you wouldn't mind telling me how to calculate the dimensions of the inside portion of the RadDock it would be very helpful. I can get the outside rectangle using width and height of the RadDock itself, but I have a RadChart inside and have manually subtracted the containers dimensions so it will fit. There must be a better way to calculate the 'drawing/content' area.

Thanks

[Slav]

Hi Howard,

You can apply the rule overflow-x: hidden to a particular RadDocks by creating a specific CSS class that contains the rule and setting this class in the CssClass property of the dock control. The code snippets below demonstrates the suggested approach:

<style type="text/css">
    .RadDock.HiddenOverflow .rdContent
    {
        overflow-x: hidden !important;
    }
</style>

<telerik:RadDock runat="server" CssClass="HiddenOverflow" ID="RadDock1" Width="300px"
    Height="100px" Title="RadDock1">
    </ContentTemplate>
</telerik:RadDock>

You can calculate the size of the usable inside portion of the RadDock by utilizing the client method of the telerik static client library getSize to get the width and the height of the dock's HTML element. Then you should subtract the 7 pixels for every edge of the RadDock and 27 pixels for the title bar. These sizes are static and their values are always the same. The script, implementing the described calculations, is shown below:

function GetDockInnerSize() {
    var dock = $find("<%=RadDock1.ClientID %>");
    var dockSize = $telerik.getSize(dock.get_element());
    var dockWidth = dockSize.width;
    var dockUsableWidth = dockWidth - 2 * dockEdge;

    var dockHeight = dockSize.height;
    var dockUsableHeight = dockHeight - (dockEdge + dockTitleHeight);

    alert("Inner area has width " + dockUsableWidth + "px and height " + dockUsableHeight + "px.");
}

 
In case your RadDock is resizable and you want to change the size of the RadChart control along with the dock, you can achieve this only through the pageLoad client method, without the need to calculate the usable area of the RadDock every time. For more information on the matter, please check this Code Library article, containing updated example of the described scenario.

Best wishes,
Slav
the Telerik team

[n/a]

In 2020, none of the above appears to work with latest version. This is my instantiation

  <telerik:RadRotator CssClass="HiddenOverflow" RenderMode="Lightweight" ID="RadRotator1" runat="server" ScrollDirection="Up" FrameDuration="4000" SlideShowAnimation-Duration="1000"
    RotatorType="AutomaticAdvance" ScrollDuration="1000" Width="100%" Height="600" PauseOnMouseOver="false">