RoundedCorners used with other controls

Has anyone had any luck in using the RoundedCorners control with any other controls, such as HoverMenu, Popup, etc?

PopupControl calendar in ajax beta 2 toolkit:

<asp:Panel ID="Panel1" runat="server" CssClass="popupControl"> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <center> <asp:Panel ID="Panelx" runat="server" Width="160px" CssClass="xroundedPanel"> <asp:Calendar ID="Calendar1" runat="server" BackColor="White" BorderColor="#999999" CellPadding="1" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" Width="160px" OnSelectionChanged="Calendar1_SelectionChanged"> <SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" /> <TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" /> <SelectorStyle BackColor="#CCCCCC" /> <WeekendDayStyle BackColor="#FFFFCC" /> <OtherMonthDayStyle ForeColor="#808080" /> <NextPrevStyle VerticalAlign="Bottom" /> <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" /> <TitleStyle BackColor="#999999" Font-Size="7pt" BorderColor="Black" Font-Bold="True" /> </asp:Calendar> </asp:Panel> </center> <ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender1" BehaviorID="RoundedCornersBehavior1" runat="server" TargetControlID="Panelx" Radius="4" /> </ContentTemplate> </asp:UpdatePanel> </asp:Panel>

StyleSheetcss:

/* Rounded Corners*/.xroundedPanel{width:160px;background-color:#999999;}.roundedPanel{width:300px;background-color:#5377A9;color:white;font-weight:bold;}

PopupControl reminder message in ajax beta 2 toolkit:

StyleSheet.css:

/*Popup Control*/.ypopupControl{background:transparent;position:absolute;visibility:hidden;}.popupControl{background-color:White;position:absolute;visibility:hidden;}/* Rounded Corners*/.yroundedPanel{width:200px;background-color:#849EC0;}.xroundedPanel{width:160px;background-color:#999999;}.roundedPanel{width:300px;background-color:#5377A9;color:white;font-weight:bold;}

PopupControl.aspx:

<asp:Panel ID="Panel2" runat="server" CssClass="ypopupControl"> <div style="border:0px outset white; width:200px; font-weight: bold;"> <asp:UpdatePanel ID="UpdatePanel2" runat="server"> <ContentTemplate> <asp:Panel ID="Panely" runat="server" Width="200px" CssClass="yroundedPanel"> <asp:RadioButtonList ID="RadioButtonList1" runat="server" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged" AutoPostBack="true"> <asp:ListItem Text=" Walk dog"></asp:ListItem> <asp:ListItem Text=" Feed dog"></asp:ListItem> <asp:ListItem Text=" Feed cat"></asp:ListItem> <asp:ListItem Text=" Feed fish"></asp:ListItem> <asp:ListItem Text=" Cancel" Value=""></asp:ListItem> </asp:RadioButtonList> </asp:Panel> <ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender2" BehaviorID="RoundedCornersBehavior1" runat="server" TargetControlID="Panely" Radius="8" /> </ContentTemplate> </asp:UpdatePanel> </div> </asp:Panel>

Rounded Corners applied to Hovermenu Demonstration in ajax beta 2 toolkit.

In this example, the rightmost Update/Cancel hover has rounded corners.

So far, a design/coding issue results in an unsatisfactory solution for the leftmost Edit/Delete hover. To be taken-up in a different thread.

StyleSheet.css:

 
/*Hover Menu*/.popupMenua {/*for roundedcorners-hovermenu demo*/position:absolute;visibility:hidden;background-color:red;background:transparent;/*hide corners*/opacity:.9;filter: alpha(opacity=90);}.popupMenu {position:absolute;visibility:hidden;background-color:#F5F7F8;opacity:.9;filter: alpha(opacity=90);}.popupHover { position:relative;/*fix IE cold-spot between hover & grid*/background-image:url(images/header-opened.png);background-repeat:repeat-x;background-position:left top;background-color:#F5F7F8;}/* Rounded Corners*/.ahovermenuroundedPanel/*for roundedcorners-hovermenu demo*/{width:80px;background-color:orange;/*for demo clarity*/}
 

HoverMenu.aspx:

<asp:UpdatePanel ID="up1" runat="server"> <ContentTemplate> <asp:GridView BackColor="Azure" GridLines="None" ShowHeader="False" Width="100%" ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ItemID" DataSourceID="ObjectDataSource1"> <Columns> <asp:TemplateField> <EditItemTemplate> <asp:Panel ID="Panel9a" runat="server" Width="80%"> <table width="100%"> <tr> <td width="30%">Title:<br /><asp:TextBox Font-Bold="true" ID="TextBox1" runat="server" Text='<%# Bind("Title")%>' Width="100"></asp:TextBox></td> <td width="55%">Desc:<br /><asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("Description")%>' Width="150"></asp:TextBox></td> <td width="15%">Pri:<br /><asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("Priority")%>' Width="40"></asp:TextBox></td> </tr> </table> </asp:Panel> <ajaxToolkit:HoverMenuExtender ID="hme1" runat="Server" TargetControlID="Panel9a" PopupControlID="PopupMenu" HoverCssClass="popupHover" PopupPosition="Right"> </ajaxToolkit:HoverMenuExtender><!--added closing tag to be consistent with hme2 below--> <asp:Panel ID="PopupMenu" runat="server" Width="80" CssClass="popupMenua"><!--modified styling--> <asp:Panel ID="RoundedCornersPanela" runat="server" Width="80px" CssClass="ahovermenuroundedPanel"><!--added panel--> <div style="text-align: center;"> <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="True" CommandName="Update" Text="Update"> </asp:LinkButton> <br /> <asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False" CommandName="Cancel" Text="Cancel"> </asp:LinkButton> </div> </asp:Panel><!--RoundedCornersPanela--> </asp:Panel><!--PopupMenu--> <ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender1a" BehaviorID="RoundedCornersBehavior1" runat="server" TargetControlID="RoundedCornersPanela" Radius="6" /><!--added extender--> </EditItemTemplate> <ItemTemplate> <asp:Panel ID="PopupMenuED" runat="server" Width="80" CssClass="popupMenua"><!--modified styling--> <div> <asp:Panel ID="RoundedCornersEDPanel" runat="server" Width="80px" CssClass="ahovermenuroundedPanel"><!--added panel--> <div style="text-align: center;"> <div> <asp:LinkButton ID="LinkButton1" runat="server" CommandName="Edit" Text="Edit"> </asp:LinkButton> </div> <div> <asp:LinkButton ID="LinkButton2" runat="server" CommandName="Delete" Text="Delete"> </asp:LinkButton> </div> </div> </asp:Panel><!--ID="RoundedCornersEDPanel"--> </div> </asp:Panel><!--ID="PopupMenuED"--> <!--RoundedCornersExtender1b placeholder--> <asp:Panel ID="Panel9b" runat="server"> <table width="100%"> <tr> <td width="25%"><asp:Label Font-Bold="true" ID="Label1" runat="server" Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("Title")))%>'></asp:Label></td> <td width="50%"><asp:Label ID="Label2" runat="server" Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("Description")))%>'></asp:Label></td> <td width="25%"><asp:Label ID="Label3" runat="server" Text='<%# Eval("Priority")%>'></asp:Label></td> </tr> </table> </asp:Panel> <ajaxToolkit:HoverMenuExtender ID="hme2" runat="Server" HoverCssClass="popupHover" PopupControlID="PopupMenuED" PopupPosition="Left" TargetControlID="Panel9b" PopDelay="25"> </ajaxToolkit:HoverMenuExtender> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" DeleteMethod="Delete" InsertMethod="Insert" OldValuesParameterFormatString="original_{0}" SelectMethod="Select" TypeName="SessionTodoXmlDataObject" UpdateMethod="Update"> <DeleteParameters> <asp:Parameter Name="Original_ItemID" Type="Int32" /> </DeleteParameters> <UpdateParameters> <asp:Parameter Name="Title" Type="String" /> <asp:Parameter Name="Description" Type="String" /> <asp:Parameter Name="Priority" Type="Int32" /> <asp:Parameter Name="Original_ItemID" Type="Int32" /> </UpdateParameters> <InsertParameters> <asp:Parameter Name="Title" Type="String" /> <asp:Parameter Name="Description" Type="String" /> <asp:Parameter Name="Priority" Type="Int32" /> </InsertParameters> </asp:ObjectDataSource></ContentTemplate></asp:UpdatePanel>

AlwaysVisibleControl ajax beta 2 toolkit:

<asp:UpdatePanel ID="update" runat="server"> <ContentTemplate> <div style="width:230px;height:100px;"> <asp:Panel ID="timer" runat="server" Width="220px" BackColor="White" ForeColor="DarkBlue" BorderWidth="0" BorderStyle="solid" BorderColor="DarkBlue" style="z-index: 1;"> <div style="width: 100%; height: 100%; vertical-align: middle; text-align: center;"><p>Current Time:</p><span id="currentTime" runat="server" style="font-size:xx-large;font-weight:bold;line-height:40px;"/></div> </asp:Panel> <ajaxToolkit:AlwaysVisibleControlExtender ID="avce" runat="server" TargetControlID="timer" VerticalSide="Top" VerticalOffset="10" HorizontalSide="Right" HorizontalOffset="10" ScrollEffectDuration=".1" /> <ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender1" BehaviorID="RoundedCornersBehavior1" runat="server" TargetControlID="timer" Radius="14" /> </div>

Quick question for you - your posting example code - but are you getting errors? Fiddler would be able to provide some additional input - so can you provide some additional info. I tried rounded corners with some other controls myself and all I got some explicit errors that I annotated...http://forums.asp.net/thread/1440377.aspx(I never bothered to bug report it as I simply got tired of posting in so many places and never seem to get the issues addressed or they dissapear ...)

What exactly is the description of the problems in the examples...

Thanks - the description of the problem is: Has anyone had any luck in using the RoundedCorners control with any other controls, such as HoverMenu, Popup, etc?

Answer - yes, if you tinker with various toolkit samples, applying the RoundedCorners extender works just fine.

Datagrid in ajax toolkit beta 2 HoverMenu sample

<asp:UpdatePanel ID="up1" runat="server"> <ContentTemplate> <asp:Panel ID="RoundedGrid" runat="server" Width="100%" CssClass="ahovermenuroundedPanel"><!--added panel--> <ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender1" BehaviorID="RoundedCornersBehavior1" runat="server" TargetControlID="RoundedGrid" Radius="13"/><!--added extender--> <asp:GridView BackColor="orange" GridLines="None" ShowHeader="False" Width="100%" ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ItemID" DataSourceID="ObjectDataSource1">

StyleSheet.css

/* Rounded Corners*/.ahovermenuroundedPanel/*for roundedcorners-hovermenu demo*/{width:80px;background-color:orange;/*for demo clarity*/}

Here's what I tried. And got a quirky behavior. I tried to use RoundedCorners with a TextBox control. Since there is no restriction on what type of control it can extend I thought it would be interesting to see how it behaved if used with a text box.

Well it did not round the corners of the text box but somehow when I put my mouse over the text box I got a crosshair cursor the one you get when you are over a draggable item. If i clicked the textbox it selected the textbox like in the design view in VS. With extension points at the corners and the middle of the sides. I could then put the mouse on one of those points and the cursor would change to a "resize" cursor and I could actually drag the mouse and see an outlined shape being resized though the text box was not being resized. Very peculiar indeed. I wasn't using a Master Page but I had two RoundedCornerExtenders on the page one for a normal Panel control and the other for the TextBox.

The question is can anyone else reproduce the behavior and if they can then I suppose its a bug. Maybe there should be a way to specify in an extender what type of controls it DOESN'T support, so that when you try to assign the TargetControlID to a control that is not supported then a validation message can appear at design time warning the user that the type is not supported. I will work on changing the RoundedCornersExtender control to add that functionality for the types of controls that I know it doesn't work with.

If you have any other .NET server controls you found that it does not work with then let me know.

Thanks

I intepreted the question like Silver did. Which is can you use the RoundedControlExtender with other controls like GridView, Textbox, checkbox. What I mean by that is can you set the TargetControlID of the RoundedCornersExtender to an ID of a control of type Textbox or GridView or Checkbox? The thing is in ALL the examples shown above in this chain the extender is used to extend the Panel. If a Panel is the only thing that can be extended with this extender then why not restrict it to a panel like the Textboxwatermark extender is restricted to controls of type TextBox only or ConfirmButton Extender is restricted to controls of type Button only??

Thanks

I too would very much like the roundercorners to works with the gridview control. Right now I'm trying to put my gridview in a panel with rounded corners but the panel doesn't seem to want to auto-resize with the gridview, so i'm having some issues there.