Disable scrollbars in RadDock Programatically

10 posts, 1 answers
  1. localman
    localman avatar
    29 posts
    Member since:
    Sep 2012

    Posted 08 Dec 2008 Link to this post

    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!

  2. Answer
    Nikolay Raykov
    Admin
    Nikolay Raykov avatar
    102 posts

    Posted 12 Dec 2008 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. localman
    localman avatar
    29 posts
    Member since:
    Sep 2012

    Posted 12 Dec 2008 Link to this post

    great - thanks!

    I"ll give it a try.
  5. localman
    localman avatar
    29 posts
    Member since:
    Sep 2012

    Posted 04 Jan 2009 Link to this post

    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.

     

  6. Nikolay Raykov
    Admin
    Nikolay Raykov avatar
    102 posts

    Posted 05 Jan 2009 Link to this post

    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  
        {     
            overflowhidden !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.
  7. localman
    localman avatar
    29 posts
    Member since:
    Sep 2012

    Posted 05 Jan 2009 Link to this post

    exactly what I was after. thx!
  8. Ram
    Ram avatar
    97 posts
    Member since:
    Jun 2011

    Posted 13 Sep 2011 Link to this post

    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.
  9. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 15 Sep 2011 Link to this post

    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
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal
  10. Howard
    Howard avatar
    4 posts
    Member since:
    May 2009

    Posted 25 Sep 2011 Link to this post

    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
  11. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 28 Sep 2011 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017