This is a small sample program for the people, who want to implement a rounded corner with collapse/expand features. This program is designed, implemented in ASP.NET using the AjaxControlToolkit support. The output of this program will be as in the following pictures.
This is the Expand view
This is the Collapse view
The below is the CSS code which i used in this program and this code will be there in the Style.css file.
.TableStyle
{
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
background: #e0d8c6;
margin: auto;
border-collapse:collapse;
text-align: left;
border-top:0px;
border-left:0px;
border-right:0px;
width:300px;
}
.TableStyle th
{
font-size: 15px;
font-weight: normal;
color:White;
border-bottom: 2px solid #000000;
border-top:0px;
border-left:0px;
border-right:0px;
background-image:url(images/Background.jpg);
cursor:pointer;
}
.TableStyle td
{
border-bottom: 1px solid #3e3e3e;
color:Black;
padding: 6px 8px;
border-top:0px;
border-left:0px;
border-right:0px;
}
.TableStyle tbody tr:hover td
{
color: #009;
}
In this program i took three panels, one panel is used for Rounded corner , second panel is used for Table Header, third panel is used for table content. All these panels are arranged as shown in the below diagram.
Panels Arrangement
The implementation of the above structure is given below.This program will be there in the default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<link href="Style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<!-- Panel for Rounded Corner effect -->
<asp:Panel ID="pnlRoundedSample" runat="server" Width="300px" BackColor="#e0d8c6">
<!-- This will give Collapse / Expand Effect -->
<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1"
runat="server" ImageControlID="imgHeader"
TextLabelID="lblHeader" CollapseControlID="pnlHeader"
ExpandControlID="pnlHeader"
TargetControlID="pnlContent"
CollapsedImage="images/expand.jpg"
ExpandedImage="images/collapse.jpg"
CollapsedText="Sample (Show)"
ExpandedText="Sample (Hide)">
</cc1:CollapsiblePanelExtender>
<asp:Panel ID="pnlHeader" runat="server">
<table class="TableStyle">
<tr>
<th>
<asp:Image ID="imgHeader" runat="server"
ImageUrl="~/images/collapse.jpg" />
<asp:Label ID="lblHeader" runat="server"
Text="Sample (Hide)">
</asp:Label>
</th>
</tr>
</table>
</asp:Panel>
<!-- This is the Panel for Table Content -->
<asp:Panel ID="pnlContent" runat="server">
<table class="TableStyle">
<tr>
<td>Sample 1</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>Sample 2</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td>Sample 3</td>
<td>333</td>
<td>333</td>
</tr>
<tr>
<td>Sample 4</td>
<td>444</td>
<td>444</td>
</tr>
<tr>
<td>Sample 5</td>
<td>555</td>
<td>555</td>
</tr>
<tr>
<td>Sample 6</td>
<td>666</td>
<td>666</td>
</tr>
</table>
</asp:Panel>
</asp:Panel>
<!-- This will give the Rounded Corner Effect -->
<cc1:RoundedCornersExtender ID="round1" runat="server"
TargetControlID="pnlRoundedSample"
Radius="7" BorderColor="#7c0b1a" Color="#7c0b1a">
</cc1:RoundedCornersExtender>
</form>
</body>
</html>
There is a zip file is given below, which contains the source code files, images. Download Here
Note: This zip file doesn’t contain any ajaxcontroltoolkit reference files and web.config.
[...] the article here: Collapsable Rounded corner in ASP.net using AjaxControlToolkit
Pretty nice post. I just stumbled upon your blog and wanted to say that I have really enjoyed browsing your blog posts. In any case I’ll be subscribing to your feed and I hope you write again soon!
Great information! I’ve been looking for something like this for a while now. Thanks!