摘要: In one scenario, there are two GridViews with the Main Data and Detailed Data. The Customer would like to show the Detailed Value for the associated Hovered Row by using the HoverMenuExtender.To achie...
阅读全文
posted @
2009-12-18 17:56 Zhi-Qiang Ni 阅读(318) |
评论 (3) |
编辑
摘要: There is a requirement: A customer would like to built a Custom CollapsiblePanel control. There are two contents of this control, the Header and the Content, both of them are Panels. His requirement i...
阅读全文
posted @
2009-12-08 17:42 Zhi-Qiang Ni 阅读(172) |
评论 (1) |
编辑
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
posted @
2009-02-09 17:50 Zhi-Qiang Ni 阅读(208) |
评论 (0) |
编辑
Preface
Everytime we want to display the CalendarExtender at the client side, we need to use this code:
Code
$find(“the calendar’s behaviorid”).show();
Text
How can we change the location of the Calendar as we wish?
Here is the solution:
Code
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestCalendarPosition.aspx.vb"
Inherits="SoluTest_CalendarUserControl.TestCalendarPosition" %>
<%@ 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>
<script type="text/javascript">
//To handle the mouse up event
function onMouseUp() {
$find("cal").hide();
$find("cal").show();
}
//We need to change the position after the Calendar is shown.
//To handle the client shown event
function calendarShown() {
//If set a breakpoint here,you may notice that the style of the Calendar popup div would like this:
// "LEFT: 10px; VISIBILITY: visible; POSITION: absolute; TOP: 38px"
//The current postion is the Target TextBox's position. Now, let's specify it.
$get("cal_popupDiv").style.top = event.offsetY;
$get("cal_popupDiv").style.left = event.offsetX;
}
</script>
</head>
<body>
<form id="form1" runat="server" onmouseup="onMouseUp()" style="background-color: #FFFF99;
width: 1000px; height: 1000px;">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<cc1:CalendarExtender ID="TextBox1_CalendarExtender" runat="server" BehaviorID="cal"
Enabled="True" TargetControlID="TextBox1" OnClientShown="calendarShown">
</cc1:CalendarExtender>
</div>
</form>
</body>
</html>
Comment
The cal_popupDiv document is the popup div of Calendar "cal", it can also be find by using
Code
$find("cal")._popupDiv
Or
Code
$find("cal")._popupBehavior._element
We need to check if it is null before using it.
Note
Note that I set the Calendar’s popup position as the Mouse’s offset position and it can only be used in IE, you can change it as your wish.
The related thread url:http://forums.asp.net/t/1373908.aspx
posted @
2009-01-27 10:44 Zhi-Qiang Ni 阅读(942) |
评论 (2) |
编辑