Ajax CollapsiblePanelExtender


ASPX Design Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .style1
        {
            color: #FFFFFF;
        }
        .style2
        {
            width: 163px;
        }
        .style8
        {
        cursor: pointer;
        }
    </style>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1"
runat="server">
</asp:ToolkitScriptManager>
<div>
<asp:Panel ID="Panel1" runat="server" Width="299px"
Height="26px">
<div style="background-image: url('bg-menu-main.png');
     font-family: Arial; font-size: large;
      font-weight: bold">
<div style="font-family: Arial; font-size: medium;
    font-weight: bold"
class="style1">
<table>
<tr><td align="left">EmployeeDetails
</td>
<td align="right" class="style2">
<asp:Label ID="Label1" runat="server"
Text="Label" style="color: #FFFFFF"></asp:Label>
<asp:Image ID="Image1" runat="server" Width="16px"
CssClass="style8" /></td>
</tr></table></div></div></asp:Panel>
<asp:Panel ID="Panel2" runat="server" Width="256px">
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="False"
CellPadding="4" DataKeyNames="EmpNo"
DataSourceID="SqlDataSource1"
ForeColor="#333333" GridLines="None"
 Width="254px">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:BoundField DataField="EmpNo" HeaderText="EmpNo"
 ReadOnly="True"
SortExpression="EmpNo" />
<asp:BoundField DataField="EmpName" HeaderText="EmpName"
SortExpression="EmpName" />
<asp:BoundField DataField="EmpJob" HeaderText="EmpJob"
SortExpression="EmpJob" />
<asp:BoundField DataField="EmpSal" HeaderText="EmpSal"
SortExpression="EmpSal" />
</Columns>
<EditRowStyle BackColor="#2461BF" />
<FooterStyle BackColor="#507CD1" Font-Bold="True"
ForeColor="White" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True"
ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White"
HorizontalAlign="Center" />
<RowStyle BackColor="#EFF3FB" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True"
ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F5F7FB" />
<SortedAscendingHeaderStyle BackColor="#6D95E1" />
<SortedDescendingCellStyle BackColor="#E9EBEF" />
<SortedDescendingHeaderStyle BackColor="#4870BE" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT * FROM [Emp]"></asp:SqlDataSource>
</asp:Panel>
<asp:CollapsiblePanelExtender ID="Panel2_CollapsiblePanelExtender"
runat="server" CollapseControlID="Panel1"
CollapsedImage="~/expand_blue.jpg"
CollapsedText="Show.." Enabled="True" ExpandControlID="Panel1"
ExpandedImage="~/collapse_blue.jpg" ExpandedText="Hide.."
 ImageControlID="Image1"
TargetControlID="Panel2" TextLabelID="Label1">
</asp:CollapsiblePanelExtender>
</div>
</form>
</body>
</html>
Output:
 

DownloadSamplecode

Advertisements

One thought on “Ajax CollapsiblePanelExtender

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s