AjaxControlToolkit-Part2

0

Rakesh Singh Naresh I Technologies Hyderabad

AJAX Control Toolkit

Copyright © 2013 https://www.facebook.com/rakeshdotnet All Rights Reserved.

1

Ajax Control Toolkit ToggleButtonExtender: ToggleButton is an ASP.NET AJAX extender that can be attached to an ASP.NET CheckBox control.

ToggleButton enables the use of custom images to show the state of the CheckBox. The behaviour of

the CheckBox is unaffected.

ToggleButton Properties:

TargetControlID - The ID of the CheckBox to modify

ImageHeight\ImageWidth - The height and width of the image

CheckedImageUrl - the URL of the image to show when the toggle button is in the checked

state.

UncheckedImageUrl - the URL of the image to show when the toggle button is in the

unchecked state.

DisabledCheckedImageUrl - the URL of the image to show when the toggle button is disabled

and in the checked state.

DisabledUncheckedImageUrl - the URL of the image to show when the toggle button is

disabled and in the unchecked state.

CheckedImageOverUrl - the URL of the image to show when the toggle button is in the

checked state and the mouse is over the button.

UncheckedImageOverUrl - the URL of the image to show when the toggle button is in the

unchecked state and the mouse is over the button.

CheckedImageAlternateText - the alt text to show when the toggle button is in the checked

state.

UncheckedImageAlternateText - the alt text to show when the toggle button is in the

unchecked state.

CheckedImageOverAlternateText - the alt text to show when the toggle button is in the

checked state and the mouse is over the button.

UncheckedImageOverAlternateText - the alt text to show when the toggle button is in the

unchecked state and the mouse is over the button.

Example:

ToggleButtonExtender.aspx (Source View):

<%@ Page Language="C#" AutoEventWireup="true"

CodeFile="ToggleButtonExtender.aspx.cs" Inherits="ToggleButtonExtender" %>

https://www.facebook.com/rakeshdotnet


2

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"

TagPrefix="asp" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">

</asp:ToolkitScriptManager>

<div>

<asp:CheckBox ID="CheckBox1" runat="server" Text="I Like ASP.NET AJAX" />

<asp:ToggleButtonExtender ID="ToggleButtonExtender1" runat="server"

TargetControlID="CheckBox1"

ImageWidth="19"

ImageHeight="19"

CheckedImageAlternateText="Check"

UncheckedImageAlternateText="UnCheck"

UncheckedImageUrl="Images/ToggleButton_UnChecked.gif"

CheckedImageUrl="Images/ToggleButton_Checked.gif" />

</div>

</form>

</body>

</html>



3

Ajax Control Toolkit PopupControlExtender:

PopupControl is an ASP.NET AJAX extender that can be attached to any control in order to open a

popup window that displays additional content. This popup window will probably be interactive and will

probably be within an ASP.NET AJAX UpdatePanel, so it will be able to perform complex server-based

processing (including postbacks) without affecting the rest of the page. The popup window can contain

any content, including ASP.NET server controls, HTML elements, etc. Once the work of the popup

window is done, a simple server-side call dismisses it and triggers any relevant script on the client to

run and update the page dynamically.

PopupControl Properties:

TargetControlID - The ID of the control to attach to

PopupControlID - The ID of the control to display

Position - Optional setting specifying where the popup should be positioned

relative to the target control. (Left, Right, Top, Bottom, Center)

CommitProperty - Optional setting specifying the property on the control being

extended that should be set with the result of the popup

CommitScript - Optional setting specifying additional script to run after setting

the result of the popup



4

OffsetX/OffsetY - The number of pixels to offset the Popup from its default

position, as specified by Position.

Animations - Generic animations for the PopupControlExtender.

o OnShow - The OnShow animation will be played each time the popup is

displayed. The popup will be positioned correctly but hidden. The

animation can use to display the popup along with any other visual effects.

o OnHide - The OnHide animation will be played each time the popup is

hidden.

Example:

PopupControlExtender.aspx (Source View)


CodeFile="PopupControlExtender.aspx.cs" Inherits="PopupControlExtender" %>


TagPrefix="asp" %>

<!DOCTYPE html>


<head id="Head1" runat="server">

<title></title>

</head>

<body>




<div>

<b>Enter Date: </b>

<asp:TextBox ID="txtDate" runat="server"></asp:TextBox>

<asp:Panel ID="Panel1" runat="server">

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

<asp:Calendar ID="Calendar1" runat="server"

OnSelectionChanged="Calendar1_SelectionChanged"

BackColor="#FFFFCC" BorderColor="#FFCC66" BorderWidth="1px"

DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt"

ForeColor="#663399" Height="200px" ShowGridLines="True"

Width="220px">

<DayHeaderStyle BackColor="#FFCC66" Font-Bold="True"

Height="1px" />

<NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" />

<OtherMonthDayStyle ForeColor="#CC9966" />

<SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" />



5

<SelectorStyle BackColor="#FFCC66" />

<TitleStyle BackColor="#990000" Font-Bold="True" Font-Size="9pt"

ForeColor="#FFFFCC" />

<TodayDayStyle BackColor="#FFCC66" ForeColor="White" />

</asp:Calendar>

</ContentTemplate>

</asp:UpdatePanel>

</asp:Panel>

<asp:PopupControlExtender ID="PopupControlExtender1" runat="server"

TargetControlID="txtDate"

PopupControlID="Panel1"

Position="Bottom">

</asp:PopupControlExtender>

</div>

</form>

</body>

</html>

Code View

protected void Calendar1_SelectionChanged(object sender, EventArgs e)

{

// Popup result is the selected date

PopupControlExtender1.Commit(Calendar1.SelectedDate.ToShortDateString());

}


CodeFile="PopupControlExtender.aspx.cs" Inherits="PopupControlExtender" %>



6


TagPrefix="asp" %>

<!DOCTYPE html>



<title></title>

</head>

<body>


<asp:ToolkitScriptManager ID="ToolkitScriptManager1"

runat="server"></asp:ToolkitScriptManager>

<h3>Ajax Control Toolkit Example: Using PopupControlExtender</h3>

<hr />

<div>

<b>Enter Your Favourite Language: </b>

<asp:TextBox ID="txtLanguage" runat="server"></asp:TextBox>

<asp:Panel ID="Panel1" runat="server">

<div style="border: 1px outset white; width: 150px">

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

<asp:RadioButtonList ID="RadioButtonList1" runat="server"

AutoPostBack="true"

OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">

<asp:ListItem Text="Visual C#" />

<asp:ListItem Text="Visual Basic" />

<asp:ListItem Text="Visual C++" />

<asp:ListItem Text="Visual J#" />

<asp:ListItem Text="Cancel" Value="" />

</asp:RadioButtonList>

</ContentTemplate>

</asp:UpdatePanel>

</div>

</asp:Panel>

<asp:PopupControlExtender ID="PopupControlExtender1" runat="server"

TargetControlID="txtLanguage"

PopupControlID="Panel1"

CommitProperty="value"

Position="Bottom" />

</div>

</form>

</body>

</html>



7

Code View:

protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)

{

if (!string.IsNullOrEmpty(RadioButtonList1.SelectedValue))

{

// Popup result is the selected task

PopupControlExtender1.Commit(RadioButtonList1.SelectedValue);

}

else

{

// Cancel the popup

PopupControlExtender1.Cancel();

}

// Reset the selected item

RadioButtonList1.ClearSelection();

}

Ajax Control Toolkit BalloonPopupExtender: The BalloonPopupExtender control displays a popup which can contain any content. For

example, you can use the BalloonPopupExtender to display help information when you

move focus to a TextBox control.



8

The BalloonPopupExtender supports three different styles: Balloon, Rectangle, and

Custom. You can select among three different sizes for the popup: Small, Medium, and

Large. If you set the BalloonPopup style to the value Custom then you can define a custom

appearance for the BalloonPopup. In that case, you also need to set the CustomCssUrl

property to point to a custom style sheet.

This control can be set to 5 positions - TopLeft, TopRight, BottomLeft, BottomRight and

Auto. If you select the value Auto then the position of the BalloonPopup is determined

automatically based on available space.

You can set the BalloonPopExtender to be triggered by the MouseOver, Focus or Click

events. The control is hidden automatically when you click outside the Balloon Popup.

BalloonPopupExtender Properties

TargetControlID - The ID of the control to attach to.

BalloonPopupControlID - The ID of the control to display.

Position - Optional setting specifying where the popup should be positioned relative to the

target control. (TopRight, TopLeft, BottomRight, BottomLeft, Auto) Default value is Auto.

OffsetX/OffsetY - The number of pixels to offset the Popup from its default position, as

specified by Position. Default value is 0.

BalloonStyle - Optional setting specifying the theme of balloon popup. (Cloud, Rectangle,

Custom). Default value is Rectangle.

BalloonSize - Optional setting specifying the size of balloon popup. (Small, Medium and Large).

Default value is Small.

CustomCssUrl - This is required if user choose BalloonStyle to Custom. This specifies the url of

custom css which will display custom theme.

CustomClassName - This is required if user choose BalloonStyle to Custom. This specifies the

name of the css class for the custom theme.

UseShadow - Optional setting specifying whether to display shadow of balloon popup or not.

ScrollBars - Optional setting specifying whether to display scrollbar if contents are

overflowing. This property contains 5 options - None, Horizontal, Vertical, Both and Auto.

Default value is Auto.

DisplayOnMouseOver - Optional setting specifying whether to display balloon popup on the

client onMouseOver event. Default value is false.

DisplayOnFocus - Optional setting specifying whether to display balloon popup on the client

onFocus event. Default value is false.

DisplayOnClick - Optional setting specifying whether to display balloon popup on the client

onClick event. Default value is true.

Animations - Generic animations for the PopupControlExtender.

OnShow - The OnShow animation will be played each time the popup is displayed. The

popup will be positioned correctly but hidden. The animation can use <HideAction

Visible="true" /> to display the popup along with any other visual effects.



9

OnHide - The OnHide animation will be played each time the popup is hidden.

Example:

BalloonPopupExtender.aspx (Source View)


CodeFile="BalloonPopupExtender.aspx.cs" Inherits="BalloonPopupExtender" %>


TagPrefix="asp" %>

<!DOCTYPE html>



<title></title>

</head>

<body>




<h3>Ajax Control Toolkit Example: Using BalloonPopupExtender</h3>

<hr />

<div>

<b>Cloud Style Balloon Popup: </b>

<asp:TextBox ID="TextBox1" runat="server" />

<asp:Panel ID="Panel1" runat="server" ForeColor="Green" Font-Size="15" Font-

Names="Tahoma">

<b>This is a Cloud Balloon Popup</b>

</asp:Panel>

<asp:BalloonPopupExtender ID="BalloonPopupExtender1" runat="server"

TargetControlID="TextBox1" UseShadow="true"

DisplayOnFocus="true" Position="BottomRight" BalloonPopupControlID="Panel1"

BalloonStyle="Cloud" />

</div>

</form>

</body> </html>



10

<b>Rectangle Style Balloon Popup: </b>

<asp:TextBox ID="TextBox2" runat="server" />

<asp:Panel ID="Panel2" runat="server" ForeColor="Green" Font-Size="15"

Font-Names="Tahoma">

<b>This is a Rectangle Balloon Popup</b>

</asp:Panel>


TargetControlID="TextBox2" UseShadow="true" DisplayOnFocus="true"

Position="BottomRight" BalloonPopupControlID="Panel2" BalloonStyle="Rectangle" />



11

<b>Custom Style Balloon Popup: </b>

<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>

<asp:Panel ID="Panel3" runat="server" ForeColor="Green" Font-Size="12" Font-

Names="Tahoma">

<b>This is a Custom Balloon Popup</b>

</asp:Panel>


TargetControlID="TextBox3" UseShadow="true" DisplayOnFocus="true"

Position="BottomRight" BalloonPopupControlID="Panel3" BalloonStyle="Custom"

CustomCssUrl="~/Styles/Css.css" CustomClassName="oval" />



12

Ajax Control Toolkit DropShadowExtender:

DropShadow is an extender that applies a drop shadow to an ASP.NET Panel control. The extender

allows you to specify how wide the shadow is, how opaque it is, and whether the shadow should have

rounded corners. For pages that let the user move or resize the panel, the DropShadow extender has a

mode that will resize and reposition the shadow to match the target panel at run time.

DropShadowExtender Properties:

TargetControlID - The ID of the control to extend.

Width - The width, in pixels, of the drop shadow. The default is 5.

Opacity - The opacity of the drop shadow, from 0 (fully transparent) to 1.0 (fully opaque). The

default is .5.

TrackPosition - A Boolean value that specifies whether the DropShadow should track the

position of the panel it is attached to. Set this property to true if the panel is absolutely

positioned or if it might move at run time. The default is false.

Rounded - A Boolean value that specifies whether the corners of the target and drop shadow

should be rounded.

Example:

DropShadowExtender.aspx (Source View)


CodeFile="DropShadowExtender.aspx.cs" Inherits="DropShadowExtender" %>


TagPrefix="asp" %>

<!DOCTYPE html>



<title></title>

</head>

<body>




<h3>Ajax Control Toolkit Example: Using DropShadowExtender</h3>

<hr />

<div>

<asp:Panel ID="Panel1" runat="server" Width="300" Height="150"

BackColor="Blue" ForeColor="White">

<div style="padding: 10px; text-align: center">



13

<b>First Name:</b>

<asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox><br />

<br />

<b>Last Name:</b>

<asp:TextBox ID="txtLastName" runat="server"></asp:TextBox><br />

<br />

<hr style="width: 270px" />

</div>

</asp:Panel>

<asp:DropShadowExtender ID="DropShadowExtender1" runat="server"

TargetControlID="Panel1"

Width="15"

Rounded="true"

Radius="20"

Opacity=".75"

TrackPosition="true" />

</div>

</form>

</body>

</html>



14

Ajax Control Toolkit CalendarExtender:

The Calendar control enables you to display a date picker when focus is moved to an input element.

Calendar is an ASP.NET AJAX extender that can be attached to any ASP.NET TextBox control. It provides

client-side date-picking functionality with customizable date format and UI in a popup control. You can

interact with the calendar by clicking on a day to set the date, or the "Today" link to set the current

date.

In addition, the left and right arrows can be used to move forward or back a month. By clicking on the

title of the calendar you can change the view from Days in the current month, to Months in the current

year. Another click will switch to Years in the current Decade. This action allows you to easily jump to

dates in the past or the future from within the calendar control.

CalendarExtender Properties:

TargetControlID - The ID of the TextBox to extend with the calendar.

CssClass - Name of the CSS class used to style the calendar. See the Calendar Theming

section for more information.

Format - Format string used to display the selected date.

PopupButtonID - The ID of a control to show the calendar popup when clicked. If this value is

not set, the calendar will pop up when the textbox receives focus.

PopupPosition - Indicates where the calendar popup should appear at the

BottomLeft(default), BottomRight, TopLeft, TopRight, Left or Right of the TextBox.

SelectedDate - Indicates the date the Calendar extender is initialized with.

StartDate - Indicates start date for range that available for selection.

EndDate - Indicates end date for range that available for selection.

Example:

CalendarExtender.aspx (Source View):


CodeFile="CalendarExtender.aspx.cs" Inherits="CalendarExtender" %>


TagPrefix="asp" %>

<!DOCTYPE html>



http://msdn2.microsoft.com/en-us/library/bb79761a-ca08-44ee-b142-b06b3e2fc22b.aspx


15


<title></title>

<style type="text/css">

.MyCalendar .ajax__calendar_container {

border: 1px solid #646464;

background-color: lemonchiffon;

color: red;

}

.MyCalendar .ajax__calendar_other .ajax__calendar_day,

.MyCalendar .ajax__calendar_other .ajax__calendar_year {

color: black;

}

.MyCalendar .ajax__calendar_hover .ajax__calendar_day,

.MyCalendar .ajax__calendar_hover .ajax__calendar_month,

.MyCalendar .ajax__calendar_hover .ajax__calendar_year {

color: black;

}

.MyCalendar .ajax__calendar_active .ajax__calendar_day,

.MyCalendar .ajax__calendar_active .ajax__calendar_month,

.MyCalendar .ajax__calendar_active .ajax__calendar_year {

color: black;

font-weight: bold;

}

</style>

</head>

<body>




<h3>Ajax Control Toolkit Example: Using CalendarExtender</h3>

<hr />

<div>

<b>Default Calendar: </b>

<br />

<asp:TextBox runat="server" ID="txtDate1" /><br />

<asp:CalendarExtender ID="defaultCalendarExtender" runat="server"

TargetControlID="txtDate1" />

<div style="font-size: 90%">

<em>(Set the focus to the textbox to show the calendar)</em>

</div>

<br />

<br />

<b>

Calendar with a custom style and formatted date (opening on left):

</b>



16

<br />

<asp:TextBox runat="server" ID="txtDate2" /><br />

<asp:CalendarExtender ID="customCalendarExtender" runat="server"

TargetControlID="txtDate2" CssClass="MyCalendar"

Format="MMMM d, yyyy" SelectedDate="April 28, 2013"

PopupPosition="Left" />


<em>(Set the focus to the textbox to show the calendar)</em>

</div>

<br />

<br />

<b>Calendar with an associated button:</b><br />

<asp:TextBox runat="server" ID="txtDate3" />

<asp:ImageButton ID="Image1" runat="Server"

ImageUrl="~/images/calendarIcon.gif"

AlternateText="Click to show calendar" /><br />

<asp:CalendarExtender ID="calendarButtonExtender" runat="server"

TargetControlID="txtDate3"

PopupButtonID="Image1" />


<em>

(Click the image button to show the calendar; this calendar

dismisses automatically when you choose a date)

</em>

</div>

<br />

<br />

<b>Calendar with date range:</b>

<br />

<asp:TextBox runat="server" ID="txtDate4" />

<asp:CalendarExtender ID="dateRangeCalendarExtender1" runat="server"

Format="MM/dd/yyyy" TargetControlID="txtDate4" StartDate="8/3/2013"

EndDate="10/18/2013" SelectedDate="8/3/2013" />


<em>

(Set the focus to the textbox to show the calendar. This calendar's

StartDate property is '8/3/2013' and EndDate is '10/18/2013')

</em>

</div>

</div>

</form>

</body>

</html>



17

Calendar Theming

You can change the look and feel of Calendar using the Calendar CssClass property. Calendar has a predefined set

of CSS classes that can be overridden. It has a default style which is embedded as a WebResource and is a part

of the Toolkit assembly that has styles set for all the sub-classes. If your CssClass does not provide values for any

of those then it falls back to the default value. To customize the same the user would have to set the CssClass

property to the name of the CSS style and define the styles for the individual classes so that the various elements

in a Calendar control can be styled accordingly. The second calendar in the demo above uses the "MyCalendar"

style, which sets the Calendar container style as follows.

.MyCalendar .ajax__calendar_container {

border:1px solid #646464;

background-color: lemonchiffon;

color: red;

}

Calendar CSS Classes:

.ajax__calendar_container : The outer rectangular container that supplies the border around the

calendar element. Child Css classes:

o .ajax__calendar_header, .ajax__calendar_body,.ajax__calendar_footer.



18

.ajax__calendar_header : A container element that holds the next and previous arrows and the title

of the current view. Child Css classes:

o .ajax__calendar_prev, .ajax__calendar_title, .ajax__calendar_next.

.ajax__calendar_prev : An element that displays the arrow to view the previous set of data in the

view(previous month/year/decade). Child Css classes: none.

.ajax__calendar_title : An element that displays the title of the current view (month name, year,

decade). Child Css classes: none.

.ajax__calendar_next : An element that displays the arrow to view the previous set of data in the

view (previous month/year/decade). Child Css classes: none.

.ajax__calendar_body : A container element that holds the days, months, and years panes. Also

provides a fixed rectangle with hidden overflow that is used for transitioning between views

(next/previous month, or days/months/years).Child Css class:

o .ajax__calendar_days, .ajax__calendar_months, .ajax__calendar_years.

.ajax__calendar_days : A container element that holds the layout for the days in a month. Child Css

classes: .ajax__calendar_dayname, .ajax__calendar_day

.ajax__calendar_dayname : An element that displays the short name of the day of the week. Child

Css classes: none.

.ajax__calendar_day : An element that displays the day of the month. Child Css classes: none

.ajax__calendar_months : A container element that holds the layout for the months in a year. Child

Css classes: .ajax__calendar_month.

.ajax__calendar_month : An element that displays the month of the year. Child Css classes: none

.ajax__calendar_years : A container element that holds the layout for the years in a decade. Child

Css classes: .ajax__calendar_year.

.ajax__calendar_year : An element that displays the year in a decade. Child Css classes: none

.ajax__calendar_footer : A container element that holds the current date. Child Css classes:

.ajax__calendar_today.

.ajax__calendar_today : An element that displays the current date. Child Css classes: none.

.ajax__calendar_hover : This is applied to an element in the DOM above a day, month or year and

is used to apply CSS attributes that show a hover state. Child Css classes: .ajax__calendar_day,

.ajax__calendar_month, .ajax__calendar_year

.ajax__calendar_active : This is applied to an element in the DOM above a day, month or year and

is used to apply CSS attributes that show the currently selected value. Child Css classes:

.ajax__calendar_day, .ajax__calendar_month, .ajax__calendar_year.

.ajax__calendar_other : This is applied to an element in the DOM above a day or year that is outside

of the current view (day not in the visible month, year not in the visible decade). Child Css classes:

.ajax__calendar_day, .ajax__calendar_year.



19

Ajax Control Toolkit CollapsiblePanelExtender:

The CollapsiblePanelExtender adds collapsible sections to a Web page. This extender targets any

ASP.NET Panel control. You specify which control or controls on the page should act as the open and

close controllers for the panel. Alternatively the panel can be set to automatically expand and collapse

when the mouse cursor moves in or out of it.

The panel is postback aware. During a client postback, the panel remembers and restores its client state.

You can specify whether the panel should scroll when the content is larger than the panel, and whether

the panel expands horizontally or vertically (height or width).

Note: The CollapsiblePanelExtender assumes that the standard CSS box model is being used. Early

versions of Internet Explorer did not support that model completely. Therefore, use

the !DOCTYPE declaration (as found at the top of this page and as enabled by default for new ASP.NET

pages) to specify that the page should be rendered using Internet Explorer standards-compliant mode.

CollapsiblePanelExtender Properties:

TargetControlID - The ID of the control to expand and collapse.

CollapsedSize - The size of the target, in pixels, when it is in the collapsed state.

ExpandedSize - The size of the target, in pixels, when it is in the opened state.

Collapsed - True to specify that the object should initially be collapsed or expanded. Set this

to match your initial size. In that case, the panel is initially set to a height of 0 to match

the CollapsedSize property, so that when the page first renders, the panel is not displayed in

expanded state.

AutoCollapse - True to automatically collapse the panel when the mouse is moved out of the

panel.

AutoExpand - True to automatically expand when the mouse is moved into the panel.

ScrollContents - True to add a scrollbar if the contents are larger than the panel, or False to

clip the contents.

ExpandControlID - The ID of the control that can be clicked to expand the panel. If the value

of this property is the same as CollapseControlID, the panel will automatically toggle its state

on each click.

CollapseControlID - The ID of the control that can be clicked to collapse the panel. If the value

of this property is the same as ExpandControlID, the panel will automatically toggle its state

on each click.

TextLabelID - The ID of a Label control where the status text for the panel will be placed. The

panel will replace the inner HTML of the specified control.



20

CollapsedText - The text to display in the control that is specified by TextLabelID when the

panel is collapsed. This text is also used as the alternate text of the image if ImageControlID is

set.

ExpandedText - The text to display in the control that is specified by TextLabelID when the

panel is opened. This text is also used as the alternate text of the image ifImageControlID is

set.

ImageControlID - The ID of an Image control where an icon that indicates the collapsed status

of the panel will be placed. The extender sets the Source property of the Image control to the

URLs of the CollapsedImage and ExpandedImage properties. If

the ExpandedText or CollapsedText properties are set, they are used as the alternate text for

the image.

CollapsedImage - The path of an image used by ImageControlID when the panel is collapsed.

ExpandedImage - The path of an image used by ImageControlID when the panel is expanded.

ExpandDirection - The direction to expand the panel. This can be Vertical or Horizontal.

Example:

CollapsiblePanelExtender.aspx (Source View):


CodeFile="CollapsiblePanelExtender.aspx.cs" Inherits="CollapsiblePanelExtender" %>


TagPrefix="asp" %>

<!DOCTYPE html>


<head runat="server">

<title></title>

<style type="text/css">

.collapsePanel {

background-color: white;

overflow: hidden;

}

.collapsePanelHeader {

width: 50%;

height: 30px;

background-image: url(images/bg-menu-main.png);

background-repeat: repeat-x;

color: #FFF;

font-weight: bold;

}

</style>

</head>

<body>



21




<h3>Ajax Control Toolkit Example: Using CollapsiblePanelExtender</h3>

<hr />

<div>

<asp:Panel ID="Panel2" runat="server" CssClass="collapsePanelHeader"

Height="30px">

<div style="padding: 5px; cursor: pointer; vertical-align: middle;">

<div style="float: left;">What is ASP.NET AJAX?</div>

<div style="float: left; margin-left: 20px;">

<asp:Label ID="Label1" runat="server">

(Show Details...)

</asp:Label>

</div>

<div style="float: right; vertical-align: middle;">

<asp:ImageButton ID="Image1" runat="server"

ImageUrl="~/images/expand_blue.jpg"

AlternateText="(Show Details...)" />

</div>

</div>

</asp:Panel>

<asp:Panel ID="Panel1" runat="server" CssClass="collapsePanel"

Height="0" Width="50%" Style="text-align: justify;">

<br />

<p>

<asp:ImageButton ID="Image2" runat="server"

ImageUrl="~/images/AJAX.gif"

AlternateText="ASP.NET AJAX" ImageAlign="right" />

<%= GetContentFillerText() %>

</p>

</asp:Panel>

<asp:CollapsiblePanelExtender ID="cpeDemo" runat="Server"

TargetControlID="Panel1"

ExpandControlID="Panel2"

CollapseControlID="Panel2"

Collapsed="True"

TextLabelID="Label1"

ImageControlID="Image1"

ExpandedText="(Hide Details...)"

CollapsedText="(Show Details...)"

ExpandedImage="~/images/collapse_blue.jpg"

CollapsedImage="~/images/expand_blue.jpg"

SuppressPostBack="true" />

</div>

</form>

</body>

</html>



22

Code View (CollapsiblePanelExtender.aspx.cs):

protected string GetContentFillerText()

{

return "ASP.NET AJAX is a free framework for building a new generation of richer,

more interactive, highly personalized cross-browser web applications. This new web

development technology from Microsoft integrates cross-browser client script libraries with

the ASP.NET 2.0 server-based development framework. In addition, ASP.NET AJAX offers

you the same type of development platform for client-based web pages that ASP.NET

offers for server-based pages. And because ASP.NET AJAX is an extension of ASP.NET, it

is fully integrated with server-based services. ASP.NET AJAX makes it possible to easily

take advantage of AJAX techniques on the web and enables you to create ASP.NET pages

with a rich, responsive UI and server communication. However, AJAX isn't just for

ASP.NET. You can take advantage of the rich client framework to easily build client-centric

web applications that integrate with any backend data provider and run on most modern

browsers.";

}


Documents

AjaxControlToolkit-Part2