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

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

11 Answers 169 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Sam
Top achievements
Rank 1
Sam asked on 24 Apr 2009, 04:24 PM
I'm not clear on how to do this and I assume someone out there has done it.

11 Answers, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 27 Apr 2009, 01:54 PM
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.
0
Sam
Top achievements
Rank 1
answered on 27 Apr 2009, 06:39 PM
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?
0
Martin
Telerik team
answered on 28 Apr 2009, 05:48 AM
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.
0
Sam
Top achievements
Rank 1
answered on 28 Apr 2009, 07:22 PM
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
0
Sam
Top achievements
Rank 1
answered on 28 Apr 2009, 07:53 PM
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






0
Petio Petkov
Telerik team
answered on 01 May 2009, 02:52 PM
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.
0
Sam
Top achievements
Rank 1
answered on 01 May 2009, 03:09 PM
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?
0
Vasil Yordanov
Telerik team
answered on 08 May 2009, 02:07 PM
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.
0
Telerikuser
Top achievements
Rank 1
answered on 12 Jul 2009, 01:13 AM
I need rounded image for web20 and hay skin. Could you provide me with that?

Thanks
0
Ashok kumar R
Top achievements
Rank 1
answered on 14 Jun 2012, 01:22 PM

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

 

0
Slav
Telerik team
answered on 18 Jun 2012, 02:39 PM
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.
Tags
Dock
Asked by
Sam
Top achievements
Rank 1
Answers by
Martin
Telerik team
Sam
Top achievements
Rank 1
Petio Petkov
Telerik team
Vasil Yordanov
Telerik team
Telerikuser
Top achievements
Rank 1
Ashok kumar R
Top achievements
Rank 1
Slav
Telerik team
Share this question
or