Advertisements

Archive

Posts Tagged ‘collapse from javascript’

Collapsible panel extender samples in ASP.Net indifferent scenario

July 25, 2011 3 comments

How to implement collapsible panel extender in ASP.Net/C#?

Ajax collapsible panel extender is a tool used to collapse and expand each section with content or without content with asynchronous javascript, hence there is no postback happening in the middle of collapse/expand process. Dot Net framework helps to create collapse and expand functionalities within easy steps. Ajax tool kit included a control name Ajax Collapsible Panel Extender allows to implement above mentioned process as very easily.  The CollapsiblePanel is a very flexible extender that allows you to easily add collapsible sections to your web page. This extender targets any ASP.NET Panel control. The page developer specifies which control(s) on the page should be the open/close controller for the panel, or the panel can be set to automatically expand and/or collapse when the mouse cursor moves in or out of it, respectively.

Steps to implement Ajax collapsible panel extender in ASP.Net/C#

Here we are going to demonstrate step by step process to implement ajax collapsible panel extender in ASP.Net/C#. In order to implement collapsible panel extender we need to include ajax control toolkit dll as reference to our visual studio.

  1. Register Ajax control toolkit to your aspx page
  2. Drag and drop a <ScriptManager> from the Toolbox to the page
  3. Now add an UpdatePanel to the page. Inside the <ContentTemplate> drag and drop a CollapsiblePanel from the AJAX toolkit. After applying some Css and add properties of the CollapsiblePanel, the mark up will look similar to the following

 

<%@ 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.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>CollapsiblePanelExtender Tips </title>   
<style type="text/css">
.cpHeader
{
color: white;
background-color: #719DDB;
font: bold 11px auto "Trebuchet MS", Verdana;
font-size: 12px;
cursor: pointer;
width:450px;
height:18px;
padding: 4px;           
}
.cpBody
{
background-color: #DCE4F9;
font: normal 11px auto Verdana, Arial;
border: 1px gray;               
width:450px;
padding: 4px;
padding-top: 7px;
}      
</style>

</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel ID="pHeader" runat="server" CssClass="cpHeader">
<asp:Label ID="lblText" runat="server" />
</asp:Panel>

<asp:Panel ID="pBody" runat="server" CssClass="cpBody">
Here will display our contents or controls
</asp:Panel>

<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"
TargetControlID="pBody" CollapseControlID="pHeader" ExpandControlID="pHeader"
Collapsed="true" TextLabelID="lblText" CollapsedText="Click to Show Content.."
ExpandedText="Click to Hide Content.."
CollapsedSize="0">
</cc1:CollapsiblePanelExtender>

</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>

 

How to Expand/Collapse the ASP.NET AJAX CollapsiblePanel programmatically using JavaScript?

In above example we looked that how we can implement ajax collapsible panel extender within the aspx page. In some scenario we need to call this functionality on some javscript events. In those scenario, we need to study that how we can call collapse and expand functionalities from javascript. Below is the code for calling ajax collapsible panel extender from javascript.

<asp:Button ID="btnClick" OnClientClick="ExpandCollapse()"
runat="server" Text="Expand/Collapse" />
</ContentTemplate>
</asp:UpdatePanel>
Add JavaScript in the <head> tag as shown below:
<script type="text/javascript">

function ExpandCollapse() {           
var collPanel = $find("CollapsiblePanelExtender1");
if (collPanel.get_Collapsed())
collPanel.set_Collapsed(false);
else
collPanel.set_Collapsed(true);
}      

</script>
 

How we can implement ajax collapsible panel extender from code behind in ASP.Net/C#?

We are going to check how we can call expand/collapse ajax collapsible panel extender from code behind in asp.net/c#. In some scenario we need to call expand/collapse functions in Ajax collapsible panel extender dynamically from asp.net/C#. Below mentioned code helps to dynamically call expand/collapse ajax collapsible panel extender from asp.net/c#

protected void btn_Collapse(object sender, EventArgs e)
    {
        // Expand
        this.CollapsiblePanelExtender1.Collapsed = false;
        this.CollapsiblePanelExtender1.ClientState = "false";
        // Collapse
        // Expand
        this.CollapsiblePanelExtender1.Collapsed = true;
        this.CollapsiblePanelExtender1.ClientState = "true";
    }

How to add an Ajax collapsible panel extender dynamically from code behind in ASP.Net/C#

In some scenario we have to create and implement a ajax collapsible panel extender dynamically as per the data from the database in ASP.Net/C#. We can create and implement ajax collapsible panel extender dynamically from code behind in ASP.Net/C# using below mentioned code.

 

using AjaxControlToolkit;

protected void Page_Load(object sender, EventArgs e)
{        
// Create Header Panel
Panel panelHead = new Panel();
panelHead.ID = "pH";
panelHead.CssClass = "cpHeader";
// Add Label inside header panel to display text
Label lblHead = new Label();
lblHead.ID = "lblHeader";
panelHead.Controls.Add(lblHead);

//Create Body Panel
Panel panelBody = new Panel();
panelBody.ID = "pB";
panelBody.CssClass = "cpBody";
// Add Label inside body Panel to display text
Label lblB = new Label();
lblB.ID = "lblBody";
lblB.Text = "This panel was added dynamically";
panelBody.Controls.Add(lblB);

// Create CollapsiblePanelExtender
CollapsiblePanelExtender cpe =
    new CollapsiblePanelExtender();
cpe.TargetControlID = panelBody.ID;
cpe.ExpandControlID = panelHead.ID;
cpe.CollapseControlID = panelHead.ID;
cpe.ScrollContents = false;
cpe.Collapsed = true;
cpe.ExpandDirection =
CollapsiblePanelExpandDirection.Vertical;
cpe.SuppressPostBack = true;
cpe.TextLabelID = lblHead.ID;
cpe.CollapsedText = "Click to Show Content..";
cpe.ExpandedText = "Click to Hide Content..";

this.UpdatePanel1.ContentTemplateContainer.Controls.Add(panelHead);
this.UpdatePanel1.ContentTemplateContainer.Controls.Add(panelBody);
this.UpdatePanel1.ContentTemplateContainer.Controls.Add(cpe);

}
Advertisements
%d bloggers like this: