Burman@cool blog's(ASP.NET,SQL SERVER,JavaScript,XML,sharepoint,WCF,SSIS): Overlapping Collapsible Panel using AJAX CollapsiblePanelExtender Control

Hi Guys,

For implementing such functionality just add following things

1.<%@ Register Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" TagPrefix="ajax" %>
2.<style type="text/css">
.pnlCSS{
font-weight: bold;
cursor: pointer;
border: solid 1px #c0c0c0;
width:30%;
}
</style>

3. <ajax:ToolkitScriptManager ID="ScriptManager1" runat="server">
</ajax:ToolkitScriptManager>

4. <div style="position:absolute; z-index:9999;">

<asp:Panel ID="PanelClient" runat="server" CssClass="pnlCSS" BorderWidth="0" >
<table cellspacing="0" cellpadding="0" border="0" >
<tr>
<td class="tdPurpleMid" colspan="2"><asp:Label ID="LabelClient" runat="server" Text="Client Details"></asp:Label></td>

<td class="tdPurpleMid" style="text-align:right;" colspan="4" >

<asp:ImageButton ID="imgArrows4" runat="server"
style="height: 16px" />
</td>

</tr>
<tr >
<td class="tdPurpleBg" colspan="6"><img alt="" height="4" src="../images/spacer.gif" /></td>
</tr>
<tr>
<td colspan="6">
<asp:Panel ID="CollapsiblPanelClient" runat="server" Height="30" >
<table id="Table2" cellspacing="0" cellpadding="0" border="1">

<tr>
<td class="tdPurpleLgt" width="122">
<asp:Label ID="lblClientName" runat="server" Text="Client Name"></asp:Label>
</td>
<td class="tdPurpleLgt" width="280px">
<asp:TextBox ID="txtClientName" runat="server" Width="250px" BorderStyle="None" EnableViewState="true"
BorderColor="White" ></asp:TextBox>

</td>
<td class="tdPurpleLgt" align="left" width="150px">
 
</td>
<td class="tdPurpleLgt" align="center" width="10px">
 
</td>
</tr>
<tr>
<td class="tdPurpleLgt" >
<asp:Label ID="lblClientDetails" runat="server" Text="Client Address"></asp:Label>
</td>
<td class="tdPurpleLgt">
<asp:TextBox ID="txtAddress1" runat="server" Width="176px" BorderStyle="None"
BorderColor="White"></asp:TextBox>

</td>
<td class="tdPurpleLgt" style="width: 3px">
<asp:Label ID="Label10" runat="server" Width="150px" Text="Contact Person Name"></asp:Label>
</td>
<td class="tdPurpleLgt">
<asp:TextBox ID="txtContactName" runat="server" Width="180px" BorderStyle="None"
BorderColor="White"></asp:TextBox>
</td>
</tr>
<tr>
<td class="tdPurpleLgt" width="92">
</td>
<td class="tdPurpleLgt">
<asp:TextBox ID="txtAddress2" runat="server" Width="176px" BorderStyle="None" BorderColor="White"></asp:TextBox>
</td>
<td class="tdPurpleLgt" style="width: 3px">
<asp:Label ID="lblTel1" runat="server" Width="90px" Text="Work Number"></asp:Label>
</td>
<td class="tdPurpleLgt">
<asp:TextBox ID="txtTel1" runat="server" Width="180px" BorderStyle="None" BorderColor="White"></asp:TextBox>
</td>
</tr>
<tr>
<td class="tdPurpleLgt" width="92">
</td>
<td class="tdPurpleLgt">
<asp:TextBox ID="txtAddress3" runat="server" Width="176px" BorderStyle="None" BorderColor="White"></asp:TextBox>
</td>
<td class="tdPurpleLgt" style="width: 3px">
<asp:Label ID="lblTel2" runat="server" Width="90px" Text="Mobile Number"></asp:Label>
</td>
<td class="tdPurpleLgt">
<asp:TextBox ID="txtTel2" runat="server" Width="180px" BorderStyle="None" BorderColor="White"></asp:TextBox>
</td>
</tr>
<tr>
<td class="tdPurpleLgt" width="92">
</td>
<td class="tdPurpleLgt">
<asp:TextBox ID="txtAddress4" runat="server" Width="176px" BorderStyle="None" BorderColor="White"></asp:TextBox>
</td>
<td class="tdPurpleLgt" style="width: 3px">
<asp:Label ID="lblFax" runat="server" Width="90px" Text="Fax :"></asp:Label>
</td>
<td class="tdPurpleLgt">
<asp:TextBox ID="txtFax" runat="server" Width="180px" BorderStyle="None" BorderColor="White"></asp:TextBox>
</td>
</tr>
<tr>
<td class="tdPurpleLgt">
<asp:Label ID="lblClientTown" runat="server" Text="Town"></asp:Label>
</td>
<td class="tdPurpleLgt">
<asp:TextBox ID="txtClientTown" runat="server" Width="176px" BorderStyle="None" BorderColor="White"></asp:TextBox>
</td>
<td class="tdPurpleLgt" style="width: 3px">
<asp:Label ID="lblDX" runat="server" Width="90px" Text="DX :"></asp:Label>
</td>
<td class="tdPurpleLgt">
<asp:TextBox ID="txtDX" runat="server" Width="180px" BorderStyle="None" BorderColor="White"></asp:TextBox>
</td>
</tr>
<tr>
<td class="tdPurpleLgt">
<asp:Label ID="lblClientCounty" runat="server" Text="County"></asp:Label>
</td>
<td class="tdPurpleLgt">
<asp:TextBox ID="txtClientCounty" runat="server" BorderStyle="None" Width="176px"
BorderColor="White"></asp:TextBox>
</td>
<td class="tdPurpleLgt">
<asp:Label ID="lblEmail" runat="server" Text="Email"></asp:Label>
</td>
<td class="tdPurpleLgt">
<asp:TextBox ID="txtEmail" runat="server" Width="180px" BorderStyle="None" BorderColor="White"
MaxLength="100"></asp:TextBox>
</td>
</tr>
<tr>
<td class="tdPurpleLgt">
<asp:Label ID="lblClientPostalCode" runat="server" Text="Postal Code"></asp:Label>
</td>
<td class="tdPurpleLgt">
<asp:TextBox ID="txtClientPostalCode" runat="server" BorderStyle="None" Width="176px"
BorderColor="White"></asp:TextBox>
</td>
<td class="tdPurpleLgt">Billing Name</td>
<td class="tdPurpleLgt">
<asp:TextBox ID="txtbilling" runat="server" Width="180px" BorderStyle="None" BorderColor="White"
MaxLength="100"></asp:TextBox>
</td>
</tr>
<tr >
<td class="tdPurpleLgt" width="92">
A/C Manager</td>
<td class="tdPurpleLgt">
<asp:DropDownList ID="ddlAcountMgr" runat="server" Width="186px">
</asp:DropDownList>
</td>
<td class="tdPurpleLgt">

Payee Name</td>
<td class="tdPurpleLgt">

<asp:TextBox ID="txtPayeeName" runat="server" Width="180px" BorderStyle="None" BorderColor="White"
MaxLength="100"></asp:TextBox>
</td>

</tr>
<tr>
<td class="tdPurpleLgt" width="92">
Payment Method</td>
<td class="tdPurpleLgt">
<asp:DropDownList ID="ddlPyamentMehtod" runat="server" Height="19px"
Width="133px">
</asp:DropDownList>
</td>
<td class="tdPurpleLgt">
Credit Card Commission</td>
<td class="tdPurpleLgt">

<asp:TextBox ID="txtCCCommission" runat="server" Width="180px"
BorderStyle="None" BorderColor="White"
MaxLength="6"></asp:TextBox>
</td>
</tr>
<tr>
<td class="tdPurpleLgt">
VAT</td>
<td class="tdPurpleLgt">

<asp:TextBox ID="txtVAT" runat="server" Width="180px"
BorderStyle="None" BorderColor="White" MaxLength="5"></asp:TextBox>
</td>
<td class="tdPurpleLgt">
Remit Collection</td>
<td class="tdPurpleLgt">
<input id="hdnClientid1" runat="server" name="hidden" type="hidden" />

<asp:DropDownList ID="ddlRemitCollection" runat="server" Width="186px">
<asp:ListItem Text="Select" Value=""></asp:ListItem>
<asp:ListItem Text="Remit after Deduction" Value="Remit after Deduction"></asp:ListItem>
<asp:ListItem Text="Remit With Invoice" Value="Remit With Invoice"></asp:ListItem>
</asp:DropDownList>

</td>
</tr>
<tr>
<td class="tdPurpleLgt">
Commission%</td>
<td class="tdPurpleLgt">

<asp:TextBox ID="txtCommission" runat="server" Width="180px"
BorderStyle="None" BorderColor="White"
MaxLength="5"></asp:TextBox>

</td>
<td class="tdPurpleLgt">
Payment Terms(days)</td>
<td class="tdPurpleLgt">

<asp:TextBox ID="txtPaymentTerms" runat="server" Width="180px"
BorderStyle="None" BorderColor="White"
MaxLength="4"></asp:TextBox>
</td>
</tr>
<tr>
<td class="tdPurpleLgt">
Admin Fee</td>
<td class="tdPurpleLgt">

<asp:TextBox ID="txtAdminFee" runat="server" Width="180px"
BorderStyle="None" BorderColor="White"
MaxLength="6"></asp:TextBox>
</td>
<td class="tdPurpleLgt">
Commission Invoices</td>
<td class="tdPurpleLgt">

<asp:DropDownList ID="ddlCommissionInvoices" runat="server" Width="186px">
<asp:ListItem Text="Select" Value=""></asp:ListItem>
<asp:ListItem Text="Monthly" Value="Monthly"></asp:ListItem>
<asp:ListItem Text="Weekly" Value="Weekly"></asp:ListItem>
</asp:DropDownList>

</td>
</tr>
<tr>
<td class="tdPurpleLgt">
Debit Card Commission</td>
<td class="tdPurpleLgt">

<asp:TextBox ID="txtDCCommission" runat="server" Width="180px"
BorderStyle="None" BorderColor="White"
MaxLength="6"></asp:TextBox>
</td>
<td class="tdPurpleLgt">
Admin Invoices</td>
<td class="tdPurpleLgt">

<asp:DropDownList ID="ddlAdminInvoices" runat="server" Width="186px">
<asp:ListItem Text="Select" Value=""></asp:ListItem>
<asp:ListItem Text="Monthly" Value="Monthly"></asp:ListItem>
<asp:ListItem Text="Weekly" Value="Weekly"></asp:ListItem>
</asp:DropDownList>

</td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
</table>
</asp:Panel>

<ajax:CollapsiblePanelExtender ID="CollapsiblePanelExtender2" runat="server" TargetControlID="CollapsiblPanelClient"
Collapsed="True"
ExpandControlID="imgArrows4"
CollapseControlID="imgArrows4"
AutoCollapse="False"
AutoExpand="true"
ScrollContents="false"
TextLabelID="LabelClient"
CollapsedText=""
ExpandedText=""
ImageControlID="imgArrows4"
ExpandedImage="../images/left.jpg"
CollapsedImage="../images/right.jpg"
ExpandDirection="Vertical">
</ajax:CollapsiblePanelExtender>

</div>

Burman@cool blog's(ASP.NET,SQL SERVER,JavaScript,XML,sharepoint,WCF,SSIS)

Thursday, August 30, 2012

Overlapping Collapsible Panel using AJAX CollapsiblePanelExtender Control

No comments:

Post a Comment

About Me

Blog Archive