RoundCornersExtender both right corners are outside the bounds of the div

On IE, my panel appears with the corner border missing chunks. Actually, the border runs outside the width of the div because
ASP.NET renders the corner DIVs with a margin-right of 6px through -2px (for a radius of 8). This causes the last two pixels
to not show up.

This renders perfectly under FireFox.

Created a panel with a rounded corner extender on it like this:

 <asp:Panel ID="pnlAddMeToYourBlackBook" runat="server" Width="147px" BackColor="#ebf5ff" Style="margin-top: 2px"> <div style="padding-left: 10px"> <table cellspacing="0" cellpadding="0" width="124px" border="0"> <tr valign="top" align="left"> <td width="26px"> <asp:ImageButton ID="btnImgBlackBook" runat="server" ImageUrl="~/images/SearchResults/graphics/prof_icon_blackbook2.gif" BorderStyle="None" Width="18px" Height="18px" ToolTip="Add this user to your Black Book" ImageAlign="absmiddle"></asp:ImageButton></td> <td> <asp:LinkButton ID="btnBlackBook" runat="server" CssClass="lc_prof_comm_link">Add me to your<br>Black Book</asp:LinkButton></td> </tr> </table> </div> </asp:Panel>

<
cc1:RoundedCornersExtenderID="rcAddMeToYourBlackBook"runat="server"BorderColor="#7eb1e6"Corners="Bottom"Radius="8"TargetControlID="pnlAddMeToYourBlackBook">
</
cc1:RoundedCornersExtender>

Does anyone have a suggestion for why this is rendered this way?

Thanks
Larry

Anyone have a clue on this?

SomthingI failed to mention was that the corners worked perfectly on IE when I was building in a separate project. Then when I incorporated the page into the main website (very large, lots of legacy stuff, css, prototype libs, ajaxpro libs, etc.), the corners started messing up. Does anyone know what could be conflicting with ASP.NET AJAX in a chaotic environment like this?

Thanks,
Larry

Rounded Corner Control

I was trying to use the rounded corner extender with panels. I have applied border to the panels. Whenever i use the extender with the panels the effect is there however it is not clearly visible as the border does not have the rounded corners. When i remove the border then the effect is clearly visible. Please help me using the rounded corner extender with the panels so that the border will have rounded corners.

Thanks and Regards,

Geevika

Hi Geevika

To troubleshoot this issue, we really need the source code to reproduce the problem, so that we can investigate the issue in house. It is not necessary that you send out the complete source of your project. We just need a simplest sample to reproduce the problem. You can remove any confidential information or business logic from it.Before that , We also suggest that you should have a look at thishttp://www.asp.net/AJAX/Control-Toolkit/Live/RoundedCorners/RoundedCorners.aspx.

Here we provide a sample ,which is contained in Control Toolkit source code.

<ajaxToolkit:ToolkitScriptManager runat="Server" ID="ScriptManager1" />
<div class="demoarea">
<div class="demoheading">RoundedCorners Demonstration</div>

<asp:Panel ID="Panel1" runat="server" Width="330px" CssClass="roundedPanel">
<div style="padding: 10px; text-align: center">
<div style="padding: 5px; border: solid black thin; background-color: #B4B4B4;">
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/AJAX.gif" AlternateText="ASP.NET AJAX" /><br />
ASP.NET AJAX
</div>
</div>
</asp:Panel>

<ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server"
BehaviorID="RoundedCornersBehavior1"
TargetControlID="Panel1"
Radius="6"
Corners="All" />

<div style="padding-top: 3px;">CornerRadius:</div>
<div style="padding: 10px;">
<input type="radio" id="radius0" name="radiusValues" value="0"
onclick="$find('RoundedCornersBehavior1').set_Radius(this.value);" />
<label for="radius0">None</label>

<input type="radio" id="radius2" name="radiusValues" value="2"
onclick="$find('RoundedCornersBehavior1').set_Radius(this.value);" />
<label for="radius2">2px</label>

<input type="radio" id="radius4" name="radiusValues" value="4"
onclick="$find('RoundedCornersBehavior1').set_Radius(this.value);" />
<label for="radius4">4px</label>

<input type="radio" id="radius6" name="radiusValues" value="6"
onclick="$find('RoundedCornersBehavior1').set_Radius(this.value);" checked="checked" />
<label for="radius6">6px</label>

<input type="radio" id="radius10" name="radiusValues" value="10"
onclick="$find('RoundedCornersBehavior1').set_Radius(this.value);" />
<label for="radius10">10px</label>
</div>

<div style="padding-top: 3px;">Corners:</div>
<div style="padding: 10px;">
<input type="checkbox" id="corner1" name="cornerValues" value="1"
onclick="$find('RoundedCornersBehavior1').setCorner(this.value, this.checked);" checked="checked" />
<label for="corner1">Top Left</label>

<input type="checkbox" id="corner2" name="cornerValues" value="2"
onclick="$find('RoundedCornersBehavior1').setCorner(this.value, this.checked);" checked="checked" />
<label for="corner2">Top Right</label><br />

<input type="checkbox" id="corner8" name="cornerValues" value="8"
onclick="$find('RoundedCornersBehavior1').setCorner(this.value, this.checked);" checked="checked" />
<label for="corner8" >Bottom Left</label>

<input type="checkbox" id="corner4" name="cornerValues" value="4"
onclick="$find('RoundedCornersBehavior1').setCorner(this.value, this.checked);" checked="checked" />
<label for="corner4">Bottom Right</label>
</div>

<div style="padding-top: 3px;">Border Color:</div>
<div style="padding: 10px;">
<input type="radio" id="color0" name="colorValues" value=""
onclick="$find('RoundedCornersBehavior1').set_BorderColor(this.value);" checked="checked" />
<label for="color0">None</label>

<input type="radio" id="color1" name="colorValues" value="Black"
onclick="$find('RoundedCornersBehavior1').set_BorderColor(this.value);" />
<label for="color1">Black</label>

<input type="radio" id="color2" name="colorValues" value="Red"
onclick="$find('RoundedCornersBehavior1').set_BorderColor(this.value);" />
<label for="color2">Red</label>

<input type="radio" id="color3" name="colorValues" value="Aqua"
onclick="$find('RoundedCornersBehavior1').set_BorderColor(this.value);" />
<label for="color3">Aqua</label>
</div>
</div>

If your problem has been resolved or be resolved by the sample , please mark it as "Answered" or "Resolved", so our community members will not waste their time on a resolved issue. Otherwise, would you please provide a sample here? Thanks.

Best Regards,

Jonathan

Hi Jonathan,

Thanks for ur reply. The following is the part of the source code:

<asp:Panel ID="pnlCountry" runat="server" Style="position: relative; top: 24px; border-style: groove;
left: 8px; z-index: 101;" Height="125px" Width="950px" BackColor="#E0E0E0">

<asp:Label ID="lblCountryName" runat="server" Style="z-index: 100; left: 296px; position: absolute;
top: 32px" Text="Country Name" Width="104px"></asp:Label>
<asp:TextBox ID="txtCountryName" runat="server" Style="z-index: 101; left: 424px;
position: absolute; top: 32px"></asp:TextBox>
<asp:Button ID="btnCancelCountry" runat="server" Style="z-index: 106; left: 808px;
position: absolute; top: 80px" Text="Cancel" BackColor="Silver" />
<asp:Button ID="btnSaveCountry" runat="server" Style="z-index: 104; left: 712px;
position: absolute; top: 80px" Text="Save" Width="56px" BackColor="Silver" />
</asp:Panel>

<ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender2" runat="server" TargetControlID="pnlCountry"
Radius="8" Corners="All" />

As u might have noticed I have applied border style= groove to the panel name pnlCountry. After that I have used the RoundedCornersExtender to round the corner of the panel. However, the effect is that the panel has the rounded corner but because of the border it seems that corners are still pointed as it is the panel that gets the rounded corners not the border of the panel. So the effect is there but it is not visible. Plz help.

Thanks & Regards,

Geevika

Hi Geevika,

Would you please explain more clearly? I have tested your sample and it seems that the border , which is groove ,is not displayed well. If it is your problem, I think it's CSS issue. My suggestion is using a <div> element show the border instead of your Panel control.

Best Regards,

Jonathan

Country Name

Hi Jonathan,

I think I was unable to explain my point clearly. The code that i sent to you gives the above result however, this above displayed output did not include Ajax rounded corner control. As you can see the border is clearly visible and border style is groove. Now whenever I apply the ajax rounded corner control, the border remain as it is(pointed corners) but the panel body(inner light gray part) gets the rounded corners. So the effect of rounded corner control is there but that is not clearly visible as the border did not get the rounded corners. What I m trying to do is that the panel border should also get the rounded corners so that the effect should be clearly visible.

Thanks & Regards,

Geevika

Hi Geevika,

As far as I know, I'm afraid that we cannot achieve this by setting any property directly.I have nested a RoundedCornersExtender but find that it is difficult to control its diplay position.So I think the best way is using <div> element.

Best Regards,

Jonathan

rounded corner extender not working consistantly

<formid="form1"runat="server">

<asp:PanelID="PanelTop"runat="server"BackColor="AliceBlue"Height="50px"Width="800px">

<strong><spanstyle="font-size: 16pt; color: #1e90ff">KSM Information Systems --

PC Inventory <br/>

<tablewidth="800">

<tr>

<tdstyle="width: 831px; height: 18px; text-align: center;"valign="top">

<spanstyle="font-size: 16pt; color: dodgerblue">

<asp:ButtonID="Button2"runat="server"BackColor="#507CD1"Font-Bold="True"ForeColor="White"

PostBackUrl="~/AddMultiplePCs2.aspx"Text="Enter New PC's"/></span></td>

</tr>

</table>

<br/>

</span></strong>

</asp:Panel>

<br/>

<asp:PanelID="PanelMain"runat="server"BackColor="AliceBlue"Height="12px"Width="797px">

te

<asp:ButtonID="BtnViewALLpcs"runat="server"BackColor="#507CD1"Font-Bold="True"

ForeColor="White"PostBackUrl="~/ViewAllPcs2.aspx"Text="View All PC's"BorderStyle="None"/>st<br/>

<br/>

</asp:Panel>

<br/>

<asp:PanelID="PanelMain2"runat="server"Height="50px"Width="796px"BackColor="AliceBlue">

<strong><spanstyle="font-size: 16pt; color: #1e90ff">KSM Information Systems --

PC Inventory <br/><tablewidth="800">

<tr>

<tdstyle="width: 831px; height: 18px; text-align: center;"valign="top">

<spanstyle="font-size: 16pt; color: dodgerblue">

<asp:ButtonID="Button3"runat="server"BackColor="#507CD1"Font-Bold="True"ForeColor="White"

PostBackUrl="~/AddMultiplePCs2.aspx"Text="Enter New PC's"/></span></td>

</tr>

</table><asp:ButtonID="Button1"runat="server"BackColor="#507CD1"Font-Bold="True"ForeColor="White"

PostBackUrl="~/Checkout2.aspx"Text="Checkout a PC"/></asp:Panel>

<br/>

<br/>

<br/>

<br/>

<br/>

<asp:contentplaceholderid="ContentPlaceHolder1"runat="server">

</asp:contentplaceholder>

<divstyle="font-family: 'Arial Unicode MS'; font-size: 12pt;">

<asp:ScriptManagerID="ScriptManager1"runat="server"/>

</div>

<cc1:roundedcornersextenderid="RoundedCornersExtender1"runat="server"corners="Bottom"

targetcontrolid="PanelTop"BorderColor="224, 224, 224"Radius="10"></cc1:roundedcornersextender>

<cc1:DropShadowExtenderID="DropShadowExtender1"runat="server"Radius="10"TargetControlID="BtnViewALLpcs"Opacity="6"Rounded="True">

</cc1:DropShadowExtender>

<cc1:roundedcornersextenderID="RoundedCornersExtender2"runat="server"BorderColor="224, 224, 224"Radius="10"TargetControlID="PanelMain"Corners="Bottom">

</cc1:roundedcornersextender>

<cc1:roundedcornersextenderID="RoundedCornersExtender3"runat="server"BorderColor="224, 224, 224"

Corners="Bottom"Radius="10"TargetControlID="PanelMain2">

</cc1:roundedcornersextender>

</form>

Please provide more details...What is the inconsistent behavior?

Rounded Corner Extender has problems with dynamic panels

I'm trying to create some panels, which are "glued" to the top and bottom, so the panel resize together with browser. It works fine, until I attach a Rounded Corner Extender. Then the rounded corners are positioned correct with the top, but the height are fixed somewhere near the top.

Here are the panel I try to add rounded corners to:

<asp:PanelID="PanelSideBar"runat="server"Style="position: absolute; top: 100px;left: 10px; bottom: 25px; width: 200px"BackColor="Beige"></asp:Panel>

<

ajaxToolkit:RoundedCornersExtenderID="RCExtender"runat="server"TargetControlID="PanelSideBar"></ajaxToolkit:RoundedCornersExtender>Thanks for reporting this. I have opened work itemhttp://www.codeplex.com/AtlasControlToolkit/WorkItem/View.aspx?WorkItemId=8769 for this.

Rounded Corner Extender - loses background colour

I've just moved from 'Atlas' to the Ajax 1.0, and have overcome most of the problems that threw up, except for one. My rounded corner extender is losing the background colour of the panel it is acting on and replaces it with the colour from the page background image. Anyone else come across this and knows how I can fix it?

Cheers,

Sam

I'm having the same problem.
I noticed that defining the style elements in the panel-style attribute, solves the problem, but it's not what i want.

Here an example of the problem and a possible fix. Anyone else with a better solution?

<%

@.PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default" %>

<!

DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<

htmlxmlns="http://www.w3.org/1999/xhtml">

<

headrunat="server"><title>Untitled Page</title><style>.cssPanel

{

width:720px;background:#fffafa;

}

</style>

</

head>

<

bodystyle="background-color: gray; padding: 10 10 10 10px;"><formid="form1"runat="server"><asp:ScriptManagerID="ScriptManager1"runat="server"/><ajaxToolkit:RoundedCornersExtenderID="rce1"runat="server"TargetControlID="panel1"Radius="6"/><asp:PanelID="panel1"CssClass="cssPanel"runat="server">

Panel1

</asp:Panel><br/><ajaxToolkit:RoundedCornersExtenderID="rce2"runat="server"TargetControlID="panel2"Radius="6"/><asp:PanelID="panel2"style="background:#fffafa;width: 720px;"runat="server">

Panel2

</asp:Panel></form>

</

body>

</

html>

Rounded corner divs

Is it possible to use the RoundedCornerExtender on divs? I got it to work on my panel, but for some reason my panels don't take the CSS class I assign them to.

Thanks!

Yes, asp:Panel just maps to DIV in HTML anyway.

rounded corners with firefox and opera

I am using some rounded corner controls on an app im testing. In IE they work perfectly but in firefox and opera the borders are broken. The rounded part shows but it detached from the vertical borders. Has anyone else had this happen? HOw do you fix it?I wrote some testing codes to check Ajax:RoundedCornersExtenderand found it worked fine in IE7,FireFox and Opera.I installed Visual Studio 2005 with Ajax Beta 2 and Futures November CTP in my PC.Here are my testing?codes?for?your?
reference.
<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="Ajax" %>
<div>
<asp:Panel ID="pnlRoundedCorner" runat="server" BackColor="LimeGreen">
<table>
<tr><td id="RoundedCorner">Rounded Corner Rectangle:<asp:TextBox ID="TBRoundedCorner" runat="server"></asp:TextBox></td></tr>
</table>
</asp:Panel>
<Ajax:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" TargetControlID="pnlRoundedCorner" Radius="60"></Ajax:RoundedCornersExtender>
</div>
AjaxEnabled website web.config:
<?xml version="1.0"?>
<configuration>
<configSections>
<sectionGroup name="microsoft.web" type="Microsoft.Web.Configuration.MicrosoftWebSectionGroup, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
<sectionGroup name="scripting" type="Microsoft.Web.Configuration.ScriptingSectionGroup, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
<sectionGroup name="webServices" type="Microsoft.Web.Configuration.ScriptingWebServicesSectionGroup, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
<section name="jsonSerialization" type="Microsoft.Web.Configuration.ScriptingJsonSerializationSection, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false"/>
<section name="profileService" type="Microsoft.Web.Configuration.ScriptingProfileServiceSection, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false"/>
<section name="authenticationService" type="Microsoft.Web.Configuration.ScriptingAuthenticationServiceSection, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false"/>
</sectionGroup>
</sectionGroup>
</sectionGroup>
</configSections>
<connectionStrings>
<add name="AspForumsConnection" connectionString="Data Source=.;Initial Catalog=Performancing;UID=sa;PWD=Infy_1001"
providerName="System.Data.SqlClient" />
<add name="ProductConnectionString" connectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Product.mdf;Integrated Security=True;User Instance=True"
providerName="System.Data.SqlClient" />
</connectionStrings>
<system.web>
<pages>
<controls>
<add tagPrefix="asp" namespace="Microsoft.Web.UI" assembly="Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add tagPrefix="asp" namespace="Microsoft.Web.UI.Controls" assembly="Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
</controls>
<tagMapping>
<add tagType="System.Web.UI.WebControls.CompareValidator" mappedTagType="Microsoft.Web.UI.Compatibility.CompareValidator, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add tagType="System.Web.UI.WebControls.CustomValidator" mappedTagType="Microsoft.Web.UI.Compatibility.CustomValidator, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add tagType="System.Web.UI.WebControls.RangeValidator" mappedTagType="Microsoft.Web.UI.Compatibility.RangeValidator, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add tagType="System.Web.UI.WebControls.RegularExpressionValidator" mappedTagType="Microsoft.Web.UI.Compatibility.RegularExpressionValidator, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add tagType="System.Web.UI.WebControls.RequiredFieldValidator" mappedTagType="Microsoft.Web.UI.Compatibility.RequiredFieldValidator, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add tagType="System.Web.UI.WebControls.ValidationSummary" mappedTagType="Microsoft.Web.UI.Compatibility.ValidationSummary, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
</tagMapping>
</pages>
<!--
Set compilation debug="true" to insert debugging
symbols into the compiled page. Because this
affects performance, set this value to true only
during development.
-->
<compilation debug="true">
<assemblies>
<add assembly="Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add assembly="System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A"/></assemblies>
</compilation>
<httpHandlers>
<remove verb="*" path="*.asmx"/>
<add verb="*" path="*.asmx" validate="false" type="Microsoft.Web.Script.Services.ScriptHandlerFactory, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add verb="GET" path="ScriptResource.axd" type="Microsoft.Web.Handlers.ScriptResourceHandler" validate="false"/>
</httpHandlers>
<httpModules>
<add name="WebResourceCompression" type="Microsoft.Web.Handlers.WebResourceCompressionModule, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add name="ScriptModule" type="Microsoft.Web.UI.ScriptModule, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add name="MagicAjax" type="MagicAjax.MagicAjaxModule, MagicAjax" />
</httpModules>
<!--<sessionState mode="StateServer" stateConnectionString="tcpip=127.0.0.1:42424" timeout="1" cookieName="PHPSESS_ID@.PLANETRE" cookieless="UseCookies"/>-->
</system.web>
<system.webServer>
<validation validateIntegratedModeConfiguration="false"/>
<modules>
<add name="ScriptModule" preCondition="integratedMode" type="Microsoft.Web.UI.ScriptModule, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
</modules>
<handlers>
<remove name="WebServiceHandlerFactory-ISAPI-2.0"/>
<add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode" type="Microsoft.Web.Script.Services.ScriptHandlerFactory, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add name="ScriptResource" verb="GET" path="ScriptResource.axd" type="Microsoft.Web.Handlers.ScriptResourceHandler"/>
</handlers>
</system.webServer>
</configuration>
Besides,try to set "Fit to Width" in Opera,otherwise maybe you will get the inorder web controls in a web page.
Can you post some codes here?Let me try to test it and check what's the result.
Wish the above can help you.

RoundedcornerExtender in Firefox

I have placed a rounded corner extender inside a datalist. Now I placed a named anchor (<a name="_myanchor">)

In another page I have set a link like "Mypage.aspx#_myanchor"

When its run in IE it works great and page scrolls to the bottom.

When its open in FF it moves to bottom, it takes two secs to draw the rounded corners (my be because there are more than 50 records) and scrolls little up.

I think the reason for this is rounded corner with border is drawn around the actual div resulting in an increase of the size (height also) of the page. When I disabled the extender it works perfect.

Please advice..

Thanks in Advance

Any hope?

RoundedCornerExtender and gridview do not match.

I created a cortrol that works ok except for the rounded corner on the panel that contains a gridview of selectable items.

i know it has to do with the size of the panel but the grid view will be different heights depending on the items returns for that page.

this one has to be a common problem.

Specificly the rounded corner bottom appears in the middle of the gridview.

Thanks!

KES

Hi,

You may specify the panel's height & width programmatically in the databound event of the GridView.

Thank you for responding

I know i can set the panel size and width the question is by how much? some lines wrap and other do not. I am really looking for a way to get the extender to reconize the current size of the panel as dictated by the objects populating it.

What about use percentage to represent the panle's width and height. For instance:

<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"></script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager>    </div> <asp:Panel ID="Panel1" runat="server" Height="60%" Width="80%"> <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" Height="100%"> </asp:GridView> <ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" BehaviorID="RoundedCornersBehavior1" BorderColor="blue" TargetControlID="Panel1" Radius="6" Corners="All" /> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString%>" SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [Title], [TitleOfCourtesy] FROM [Employees]" ProviderName="<%$ ConnectionStrings:NorthwindConnectionString.ProviderName%>"> </asp:SqlDataSource> </asp:Panel> </form></body></html>