Click here to check my latest exciting videos on youtube
Search Mallstuffs

Flag Counter
Spirituality, Knowledge and Entertainment

Locations of visitors to this page

Latest Articles

Move to top
Give rounded corners to your panel using Ajax
Posted By Sarin on Jun 22, 2012     RSS Feeds     Latest Hinduism news

AJAX RoundedCorners extender Control

The AJAX RoundedCorners extender is used to provide round shaped To target control. You can set the color of the edges same as the background color of the associated Panel control. RoundedCornersExtender also provides the feature to set the edges with alternate styles such as round corners for BottomLeft, TopLeft etc. it can be used to differentiate one control from another by providing a more glassy and catchy look.
AJAX RoundedCornersExtender Properties

TargetControlID: ID of the target Panel Control.
Radius: Radius of the round edges of the target control. Default value is 5. Greater value for Radius property generates the broader round corners.
Color: Adjusts the color of the corners associated with extender.
Corners: This property provides the combinations for the corners of the associated Panel. Following are the different combinations or values for Corners property that generates the round edges at the specified value for this property:

  • All
    • Bottom
    • BottomLeft
    • BottomRight
    • Left
    • None
    • Right
    • Top
    • TopLeft
    • TopRight
    Steps to use RoundedCornersExtender
      1)   Create the control on which you want to apply rounded corners. Here we are using panel control
                <asp:Panel ID="Panel1" runat="server" BackColor="#C0C0FF" Height="150px" Width="460px">
      2)   set the TargetControlID property of RoundedCornersExtender to the control defined in step 1. Additionally, set various other properties like colors, corners etc
          <ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" TargetControlID="Panel1" Radius="6">
    Let us see an example where I have the form set as shown below:
    <asp:Panel ID="Panel1" runat="server" BackColor="#C0C0FF" Height="150px" Width="460px">
    <br />This Is My Panel
    <br />
    <asp:CheckBoxList ID="CheckBoxList1" runat="server" BackColor="Orange" ForeColor="Snow" RepeatColumns="3" Width="450" Font-Names="Comic Sans MS" Font-Size="Large">
    <br />
    <ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" TargetControlID="Panel1"
    <ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender2" runat="server" TargetControlID="CheckBoxList1"
    Radius="10" Corners="Bottom" Color="AntiqueWhite">

    As we see above, I have two
    RoundedCornersExtender control, one applied to panel and other to checkboxlist.
    Output of this on the browser is as follows:

    Thus, we have seen how to use ajax
    RoundedCornersExtender control on any controls of our page.


  • Share this to your friends. One of your friend is waiting for your share.
    Share on Google+ Share on Tumblr Print Browser Favorite
    Related Articles
    Calling web service asynchronously using jquery ajax
    Creating your first application in JQuery
    Call .net service from javascript
    Give rounded corners to your panel using Ajax
    Show animation effects using ajax UpdatePanelAnimation control
    Uploading multiple files with drag and drop feature

    Post Comment