Some programmers would like to find a function to handle the Accordion’s SelectedIndexChanged event. As we all know, the Accordion’s Client behavior has provided such two events:
Code
add_selectedIndexChanged(handler)
add_selectedIndexChanging(handler)
Now, let's have a look at how to add a confirmation when the Accordion pane header is clicked.
Code
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestHandleSelectedChangedEvent.aspx.vb"
Inherits="SoluTest_Accordion.TestHandleSelectedChangedEvent" %>
<%@ 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></title>
<style type="text/css">
.accordionHeader
{
border: 1px solid #2F4F4F;
color: white;
background-color: #2E4d7B;
font-family: Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
margin-top: 5px;
cursor: pointer;
height: 10px;
}
.accordionHeaderSelect
{
border: 1px solid #2F4F4F;
color: red;
background-color: #2E4d7B;
font-family: Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
margin-top: 5px;
cursor: pointer;
height: 10px;
}
.accordionContent
{
background-color: #D3DEEF;
border: 1px dashed #2F4F4F;
border-top: none;
padding: 5px;
padding-top: 10px;
}
</style>
<script type="text/javascript">
var accordion;
var handlerFired;
function pageLoad() {
accordion = $find("Accordion1_AccordionExtender"); //parameter should be the ID_AccordionExtender
accordion.add_selectedIndexChanged(selectedIndexChangedHandler)
}
function selectedIndexChangedHandler(sender, args) {
if (handlerFired) {
//add this variable to prevent firing the handler twice.
handlerFired = false;
return;
}
if (confirm("Would you like to change the index from " + args._oldIndex + " to " + args._selectedIndex + "?")) {
return;
} else {
handlerFired = true;
// if we don't want to change the index, we need to set it to the old value.
accordion.set_SelectedIndex(args._oldIndex);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<cc1:Accordion ID="Accordion1" runat="server" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelect"
ContentCssClass="accordionContent" FadeTransitions="True" FramesPerSecond="40"
TransitionDuration="250" AutoSize="None" RequireOpenedPane="false" SuppressHeaderPostbacks="false"
SelectedIndex="-1">
<Panes>
<cc1:AccordionPane ID="AccordionPane1" runat="server">
<Header>
<p>
Header1</p>
</Header>
<Content>
<p>
This is the content area!</p>
</Content>
</cc1:AccordionPane>
<cc1:AccordionPane ID="AccordionPane2" runat="server">
<Header>
<p>
Header2</p>
</Header>
<Content>
<p>
This is the content area!</p>
</Content>
</cc1:AccordionPane>
<cc1:AccordionPane ID="AccordionPane3" runat="server">
<Header>
<p>
Header3</p>
</Header>
<Content>
<p>
This is the content area!</p>
</Content>
</cc1:AccordionPane>
</Panes>
</cc1:Accordion>
</div>
</form>
</body>
</html>
The related thread url: http://forums.asp.net/t/1380353.aspx
