Does anyone have a working example of rounded corners on rad docks?

12 posts, 0 answers
  1. Sam
    Sam avatar
    103 posts
    Member since:
    Feb 2009

    Posted 24 Apr 2009 Link to this post

    I'm not clear on how to do this and I assume someone out there has done it.
  2. Martin
    Admin
    Martin avatar
    585 posts

    Posted 27 Apr 2009 Link to this post

    Hi Sam,

    Unfortunately, the current rendering of RadDock does not provide out-of-the-box support for rounded corners. What I mean is that in the default mode of the control there are not enough elements that can be used to set rounded corners.

    However, with a tiny little trick, and a bit of CSS this can e achieved relatively easy.

    To do so, first set the resizable="true" to the server declaration of RadDock. You may refer to the following example of our online demos: http://demos.telerik.com/aspnet-ajax/dock/examples/dockresize/defaultcs.aspx, in which RadDock 2 is resizable. Second, use FireBug or Microsoft Internet Explorer Developer Toolbar to examine the new elements in which the dock object is wrapped in. You will notice, that there is a table, which td's can be used to add the side elements of the rounded corners design. Here are the CSS classes that can be used:

    .rdTopLeft, .rdTopCenter, .rdTopRight, .rdLeftMiddle, .rdRightMiddle, .rdBottomLeft, .rdBottomCenter, .rdBottomRight

    To better illustrate the idea, please, take a look at the screenshot I have provided with this email. Make sure you force the new properties values for these classes with the !important flag, otherwise they will be overridden by our skin, as it is loaded after any custom styles, i.e:

    .rdTopLeft
    {
        background: url('Path/To/TopLeftCorner.gif') no-repeat !important;
    }

    Sincerely yours,
    Martin Ivanov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Sam
    Sam avatar
    103 posts
    Member since:
    Feb 2009

    Posted 27 Apr 2009 Link to this post

    Thanks Martin,

    I have a question, when you set the Raddock to resizeable it applies a thick border around the entire web part, can I get it back to the way it looked before with a thin border?
  5. Martin
    Admin
    Martin avatar
    585 posts

    Posted 28 Apr 2009 Link to this post

    Hi Sam,

    Certainly, you can. What you have to do is to force new settings to the classes I gave you in my previous email - for example width / height - 1px !important, etc. However, please, have in mind that if you do so, the dock will become hard to resize, because users will have a very little space to grab the resize bars. Probably, a better idea is to set these classes a visibility: hidden !important. This will hide the resize bars, but they will still be present in the DOM, and users will still have enough space to grab them easily.

    Greetings,
    Martin Ivanov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  6. Sam
    Sam avatar
    103 posts
    Member since:
    Feb 2009

    Posted 28 Apr 2009 Link to this post

    Thnks for your help Martin. Do you know if there is a plan to incorporate the rounded corners in the actual title bar skin in the near future? This solution just puts a colored border around the web part, I actually want the skinned title bar to have round corners, much like iGoogle's web parts.

    Thanks,
    Sam
  7. Sam
    Sam avatar
    103 posts
    Member since:
    Feb 2009

    Posted 28 Apr 2009 Link to this post

    here is exactly what I need to do on your raddock controls.

    http://blogs.neudesic.com/blogs/david_barkol/archive/2006/11/25/780.aspx






  8. Petio Petkov
    Admin
    Petio Petkov avatar
    825 posts

    Posted 01 May 2009 Link to this post

    Hi Sam,

    Please find attached a simple example where the RadDock is rendered with rounded corners.


    All the best,
    Petio Petkov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  9. Sam
    Sam avatar
    103 posts
    Member since:
    Feb 2009

    Posted 01 May 2009 Link to this post

    Thanks Petio,

    The only issue we have is we are using all of your custom skins so we would need images that match the color and gradient of EVERY skin you guys have. Do you know if this will be built into the raddocks in the near future?
  10. Vasil Yordanov
    Admin
    Vasil Yordanov avatar
    43 posts

    Posted 08 May 2009 Link to this post

    Hi Sam,

    Unfortunately, we are unable to provide you with images for all of our skins for the moment.

    However, if you tell us the names of the skins you need urgent and give us some details such as corner radius, we will create the images for you.

    Greetings,
    Vasil Yordanov, UX Team
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  11. Telerikuser
    Telerikuser avatar
    35 posts
    Member since:
    May 2009

    Posted 11 Jul 2009 Link to this post

    I need rounded image for web20 and hay skin. Could you provide me with that?

    Thanks
  12. Ashok kumar R
    Ashok kumar R avatar
    4 posts
    Member since:
    Jul 2009

    Posted 14 Jun 2012 Link to this post

    Hi,

    As you guys mentioned in this forum, i just followed the example given in 128438_roundedcorners.zip file and it worked ok in the telerik version 2009.2.616.35 but after we migrated to latest telerik version that is 2012.1.215.35, the rounded corners are not working also the raddock title is distorted. Need your help to resolve this issue.

    Though there is an roundedcorner property option available in this latest telerik, i would like to go with this one to avoid code change.

    http://www.telerik.com/community/forums/aspnet-ajax/docking/does-anyone-have-a-working-example-of-rounded-corners-on-rad-docks.aspx

    http://www.telerik.com/ClientsFiles/128438_roundedcorners.zip


    For this Latest Telerik version, i have added the following in web.config file

      <dependentAssembly>
            <assemblyIdentity name="Telerik.Web.UI" publicKeyToken="121fae78165ba3d4" />
            <bindingRedirect oldVersion="2008.1.619.20" newVersion="2012.1.215.35" />
            <bindingRedirect oldVersion="2009.2.616.35" newVersion="2012.1.215.35" />
          </dependentAssembly>

     
    regards,
    Ashok

     

  13. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 18 Jun 2012 Link to this post

    Hi Ashok,

    The custom skin that you are using is designed for an older rendering of RadDock that is no longer supported. The distorted appearance that you encountered is expected.

    Nevertheless, I have prepared a new custom skin according to the current structure of the dock control, which is similar to the old one. You can use it to achieve the desired look with the latest version of RadDock. Note that this is a customization of the default RadDock appearance and it is up to you to resolve any issues that may occur as a result of its use.

    Also, you can safely set the property EnableRoundedCorners to true in order to enable the rounded corners. Using this property will not affect the logic of your current implementation, it only changes the loaded CSS styles.

    All the best,
    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