RoundedCornersExtender - how the ... ?

Hi all!

I'm having a bit of a problem with the RoundedCornersExtender.

I need to set a radius for TopLeft and BottomRight on a Panel, but unfortunately this is not available in the BoxCorner-enumeration.

However, check this: http://www.asp.net/AJAX/AjaxControlToolkit/Samples/RoundedCorners/RoundedCorners.aspx

Uncheck the BottomLeft and TopRight and you got exactly what I'm looking for. How the ... did they do that?

Thanks in advance,

/Rex

The following onclick events are what do the work from the sample site.

Can this process not be adopted/modified to suite in you page? I think I'm missing something.

<divstyle="padding-top: 3px;">Corners:</div>

<divstyle="padding: 10px;">

<inputtype="checkbox"id="corner1"name="cornerValues"value="1"

onclick="$find('RoundedCornersBehavior1').setCorner(this.value, this.checked);"checked="checked"/>

<labelfor="corner1">Top Left</label>

<inputtype="checkbox"id="corner2"name="cornerValues"value="2"

onclick="$find('RoundedCornersBehavior1').setCorner(this.value, this.checked);"checked="checked"/>

<labelfor="corner2">Top Right</label><br/>

<inputtype="checkbox"id="corner8"name="cornerValues"value="8"

onclick="$find('RoundedCornersBehavior1').setCorner(this.value, this.checked);"checked="checked"/>

<labelfor="corner8">Bottom Left</label>

<inputtype="checkbox"id="corner4"name="cornerValues"value="4"

onclick="$find('RoundedCornersBehavior1').setCorner(this.value, this.checked);"checked="checked"/>

<labelfor="corner4">Bottom Right</label>

</div>

Gyzmo,

Thank you very much! I did have a look at this in the SampleWebSite before I posted here.

It works, but unfortunately I can't find any way to "trigger" the $find() function without an active event, such as the Onclick-event of a checkbox.

This, for example, doesn't work:

Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "wec", "$find('RoundedCornersBehavior1').setCorner('4', true);", true);

There's got to be some way to do this!!

/Rex.

Hi Rex,

You have to use some event to trigger the function.

RegisterClientScriptBlock method will write the script on the page, but doesn't guarantee that it will be fired at a proper place.

You can register "function pageLoad(){$find('RoundedCornersBehavior1').setCorner('4', true);} ", because a function with the name pageLoad will be fired after the page has been loaded and extenders have been initialized.

Raymond,

Thank you very much for your help. Unfortunately I can't make it work. :(

I know that the function "pageLoad()" is fired, because placing an alert('Lala'); inside it, will display the alert-box. Unfortunately nothing happens when the $find-function fires.

Could it be, that this code won't work because it's in a user control that is repeated over and over again? It seems to me that the BehaviourID "RoundedCornersBehavior1" is a very static identifier that keeps the same name, no matter how many times it repeats on a page?

Code snippet:

From user control ProfileBlock.ascx:

 <asp:Panel CssClass="ProfileBlock" Width="99%" ID="pnInner" BackColor="#e2dfcc" runat="server">
 <table width="100%" height="139" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td>Inner panel</td>
 </tr>
 </table>
</asp:Panel
<cc1:RoundedCornersExtender BehaviorID="RoundedCornersBehavior1" TargetControlID="pnInner" Radius="10" Corners="TopLeft" ID="RoundedCornersExtender2" runat="server">
</cc1:RoundedCornersExtender>

From ProfileBlock.ascx.cs:

protected void Page_Load(object sender, EventArgs e)
{
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "wec", "function pageLoad(){$find('RoundedCornersBehavior1').setCorner('2', true);}", true);
}

Nothing happens when the code above is run! :(

I don't understand what's wrong!

/Rex.

Rex,

To set radius, please use set_Radius() method. Here is it:

protected void Page_Load(object sender, EventArgs e)
{
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "wec", "function pageLoad(){var rcb=$find('RoundedCornersBehavior1');rcb.setCorner(1, true);rcb.setCorner(4, true);rcb.set_Radius(50);}", true);
}

RexRex:

It seems to me that the BehaviourID "RoundedCornersBehavior1" is a very static identifier that keeps the same name, no matter how many times it repeats on a page?

Yes, you can't assign a static BehaviorID to it if it will be generated multiple times on the page.

Hi Raymond,

Thank you very much for your help and sorry for not replying sooner.

Unfortunately I had to drop the idea of having rounded corners on my panels because of speed issues.

As I probably mentioned somewhere I had two nested panels with rounded corners in a user control that was repeated approx. 10 times per page.

I noticed that every time the page loaded (be it in FireFox or IE), the page froze for around 1-2 seconds before adding the rounded corners.

So I did some tests on my local machine and noticed some quite extraordinary speed problems. When the rounded corners were turned on, the page was completely loaded in approx. 6 seconds. When the rounded corners were off, it loaded in less than 2 seconds.

Since this is an enterprise sized solution, scaled for 50.000+ visitors a day, speed (and happy visitors) is of absolute essence, so I was forced to remove the rounded corners which is too bad, cause it really looked smashing! :-)

I do, however, believe that the speed issues with the RoundedCornersExtender are on the client side and not on the server.

Again, thanks for your help,

/Rex.