Monthly Archives: March 2011

Can ASP.NET AJAX CollapsiblePanelExtender to act like an Accordion control?

The Accordion is a web control that allows you to provide multiple panes and display them one at a time.
When one of the panels is expanded, the other collapses. so can i do the same thing using CollapsiblePanelExtender?
“Yessss of course u can do that surely!” ūüôā
Add two Panels and corresponding CollapsiblePanelExtenders for the two Panels as shown below:
<!– Panel 1 –>
<div class=”TitleBC”><table cellspacing=”0″ cellpadding=”0″ width=”100%” border=”0″><tbody> <tr> <td><asp:Label runat=”server” Height=”15″ Text=”User Profile” Font-Bold=”True”></asp:Label></td><td align=”right”> <asp:Image ID=”_arrowDownProfile” runat=”server” ImageUrl=”~/ArrowDown.png” Height=”15″ CssClass=”CursorHand”></asp:Image> </td> </tr> </tbody> </table>
</div>
<div><asp:Panel ID=”pnlUserProfile” runat=”server”> Panel 1 content goes here</asp:Panel> </div>
<!– Panel 2 –>
<div¬†class=”TitleBC”><table cellspacing=”0″ cellpadding=”0″ width=”100%” border=”0″><tbody> <tr> <td><asp:Label runat=”server” Height=”15″ Text=”User History” Font-Bold=”True”></asp:Label></td><td align=”right”> <asp:Image ID=”_arrowDownHistory” runat=”server” ImageUrl=”~/ArrowDown.png” Height=”15″ CssClass=”CursorHand”></asp:Image> </td> </tr> </tbody> </table>
</div>
<div><asp:Panel ID=”pnlUserHistory” runat=”server”>Panel 2 content goes here</asp:Panel> </div>
<ajaxToolkit:CollapsiblePanelExtender ID=”_collapsiblePanelExtender1″ runat=”server” CollapseControlID=”_arrowDownProfile”¬†¬† ¬† ¬† ¬†SuppressPostBack=”false” ExpandControlID=”_arrowDownProfile” TargetControlID=”pnlUserProfile”¬†¬† ¬† ¬† ¬†ImageControlID=”_arrowDownProfile” ExpandedImage=”~/ArrowUp.png” CollapsedImage=”~/ArrowDown.png” Collapsed=”false” BehaviorID=”extenderProfile”>¬†¬† ¬†</ajaxToolkit:CollapsiblePanelExtender>
<ajaxToolkit:CollapsiblePanelExtender ID=”_collapsiblePanelExtender2″ runat=”server” CollapseControlID=”_arrowDownHistory”¬†¬† ¬† ¬† ¬†SuppressPostBack=”false” ExpandControlID=”_arrowDownHistory” TargetControlID=”pnlUserHistory”¬†¬† ¬† ¬† ¬†ImageControlID=”_arrowDownHistory” ExpandedImage=”~/ArrowUp.png”¬†¬† ¬† ¬† ¬†CollapsedImage=”~/ArrowDown.png” Collapsed=”true” BehaviorID=”extenderHistory”>¬†¬† ¬†</ajaxToolkit:CollapsiblePanelExtender>
JavaScript will do the trick!
<script type=”text/javascript”>
/* Collapsible Extender event handlling */
function pageLoad(sender, args) {
$find(“extenderProfile”).add_expandComplete(expandHandlerProfile); $find(“extenderHistory”).add_expandComplete(expandHandlerHistory);
}
function expandHandlerProfile(sender, args) {
$find(“extenderHistory”)._doClose();
}
function expandHandlerHistory(sender, args) {
$find(“extenderProfile”)._doClose();
}
</script>
Advertisements

Think a minute before do Form Design

Web Forms may be you love them, may be boring…. However form are an essential part of web design and development.

Please check whether you are considering about followings before do any form designs:

  • Planning
  • Designing
  • Structure
  • Styling
  • Enhancing