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

[Sam]

I'm not clear on how to do this and I assume someone out there has done it.

[Martin]

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.

[Sam]

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?

[Martin]

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.

[Sam]

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

[Sam]

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

[Petio Petkov]

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.

[Sam]

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?

[Vasil Yordanov]

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.

[Telerikuser]

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

Thanks

[Ashok kumar R]

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

 

[Slav]

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