|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,083
|
Hi, The following code demonstrates how to use EO Menu, ASP.NET AJAX ConfirmButton and ModalPopup Extender together. When user clicks a menu item, ConfirmButton is triggered, which in turns displays a modal popup for user to confirm. Once user confirms the popup, the menu continues to raises server side ItemClick event.
Code: HTML/ASPX
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!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 id="Head1" runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript">
//This variable is set to true after user confirmed
//the popup
var g_confirmed = false;
//This variable contains the last menu item that was
//clicked by the user
var g_MenuItemClicked = null;
//This function is called when a menu item is clicked
function confirmMenuClick(e, info)
{
//Return directly if already confirmed
if (g_confirmed)
return;
//Otherwise remember the item that was clicked
g_MenuItemClicked = info.getItem();
//Simulate Button1 click event. This triggers
//the modal popup
document.getElementById("Button1").click();
//Cancel the menu postback for now
return false;
}
//This function is called when the popup window
//is closed
function hiddenHandler(sender, e)
{
//Proceed if user confirmed the popup
if (e.get_confirmed())
{
g_confirmed = true;
//Simuate item click event. This causes
//the menu to post back and raises server
//side ItemClick event
g_MenuItemClicked.click();
}
}
//This function is called when user cancels the
//popup dialog
function cancelClick()
{
g_MenuItemClicked = true;
}
</script>
<ajaxToolkit:ToolkitScriptManager runat="Server" EnablePartialRendering="true" ID="ScriptManager1" />
<div style="display: none">
<asp:Button ID="Button1" runat="server" Text="Click Me" />
</div>
<ajaxToolkit:ConfirmButtonExtender ID="ConfirmButtonExtender1" runat="server" TargetControlID="Button1"
DisplayModalPopupID="ModalPopupExtender1" OnClientCancel="cancelClick" />
<br />
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button1"
PopupControlID="PNL" OkControlID="ButtonOk" CancelControlID="ButtonCancel" BackgroundCssClass="modalBackground" />
<asp:Panel ID="PNL" runat="server" Style="display: none; width: 200px; background-color: White;
border-width: 2px; border-color: Black; border-style: solid; padding: 20px;">
Are you sure you want to click the Button?
<br />
<br />
<div style="text-align: right;">
<asp:Button ID="ButtonOk" runat="server" Text="OK" />
<asp:Button ID="ButtonCancel" runat="server" Text="Cancel" />
</div>
</asp:Panel>
<eo:Menu runat="server" ID="Menu1" CheckIconUrl="OfficeCheckIcon" ClientSideOnItemClick="confirmMenuClick"
ControlSkinID="None" RaisesServerEvent="True" Width="200px" OnItemClick="Menu1_ItemClick">
<LookItems>
<eo:MenuItem DisabledStyle-CssText="background-color:transparent;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;padding-bottom:1px;padding-left:5px;padding-right:5px;padding-top:1px;color:lightgrey"
Height="24" HoverStyle-CssText="background-color:#c1d2ee;border-bottom-color:#316ac5;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#316ac5;border-left-style:solid;border-left-width:1px;border-right-color:#316ac5;border-right-style:solid;border-right-width:1px;border-top-color:#316ac5;border-top-style:solid;border-top-width:1px;padding-left:4px;padding-right:4px;padding-top:0px;padding-bottom:0px;"
ItemID="_TopLevelItem" NormalStyle-CssText="background-color:transparent;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;padding-bottom:1px;padding-left:5px;padding-right:5px;padding-top:1px;"
SelectedStyle-CssText="background-color:white;border-bottom-color:#316ac5;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#316ac5;border-left-style:solid;border-left-width:1px;border-right-color:#316ac5;border-right-style:solid;border-right-width:1px;border-top-color:#316ac5;border-top-style:solid;border-top-width:1px;padding-left:4px;padding-right:4px;padding-top:0px;padding-bottom:0px;">
<SubMenu CollapseEffect-Type="GlideTopToBottom" ExpandEffect-Type="GlideTopToBottom"
ItemSpacing="3" LeftIconCellWidth="25" SideImage="Office2003SideBar" Style-CssText="background-color:#fcfcf9;border-bottom-color:#999999;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#999999;border-left-style:solid;border-left-width:1px;border-right-color:#999999;border-right-style:solid;border-right-width:1px;border-top-color:#999999;border-top-style:solid;border-top-width:1px;color:black;cursor:hand;font-family:Tahoma;font-size:8pt;padding-bottom:1px;padding-left:1px;padding-right:1px;padding-top:1px;">
</SubMenu>
</eo:MenuItem>
<eo:MenuItem IsSeparator="True" ItemID="_Separator" NormalStyle-CssText="background-color:#c5c2b8;height:1px;margin-left:30px;width:1px;">
</eo:MenuItem>
<eo:MenuItem DisabledStyle-CssText="background-color:transparent;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;padding-bottom:1px;padding-left:2px;padding-right:5px;padding-top:1px;color:lightgrey"
Height="24" HoverStyle-CssText="background-color:#c1d2ee;border-bottom-color:#316ac5;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#316ac5;border-left-style:solid;border-left-width:1px;border-right-color:#316ac5;border-right-style:solid;border-right-width:1px;border-top-color:#316ac5;border-top-style:solid;border-top-width:1px;padding-left:1px;padding-right:4px;padding-top:0px;"
ItemID="_Default" NormalStyle-CssText="background-color:transparent;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;padding-bottom:1px;padding-left:2px;padding-right:5px;padding-top:1px;"
SelectedStyle-CssText="background-color:white;border-bottom-color:#316ac5;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#316ac5;border-left-style:solid;border-left-width:1px;border-right-color:#316ac5;border-right-style:solid;border-right-width:1px;border-top-color:#316ac5;border-top-style:solid;border-top-width:1px;padding-left:1px;padding-right:4px;padding-top:0px;"
Text-Padding-Right="30">
<SubMenu CollapseEffect-Type="GlideTopToBottom" ExpandEffect-Type="GlideTopToBottom"
ItemSpacing="3" LeftIconCellWidth="25" SideImage="Office2003SideBar" Style-CssText="background-color:#fcfcf9;border-bottom-color:#999999;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#999999;border-left-style:solid;border-left-width:1px;border-right-color:#999999;border-right-style:solid;border-right-width:1px;border-top-color:#999999;border-top-style:solid;border-top-width:1px;color:black;cursor:hand;font-family:Tahoma;font-size:8pt;padding-bottom:1px;padding-left:1px;padding-right:1px;padding-top:1px;">
</SubMenu>
</eo:MenuItem>
</LookItems>
<TopGroup>
<Items>
<eo:MenuItem Text-Html="Format">
</eo:MenuItem>
<eo:MenuItem Text-Html="Layout">
</eo:MenuItem>
</Items>
</TopGroup>
</eo:Menu>
<script type="text/javascript">
function loadHandler(sender, e)
{
//Attach hidden handler
$find("ConfirmButtonExtender1").add_hidden(hiddenHandler);
}
//Attach load handler
Sys.Application.add_load(loadHandler);
</script>
</form>
</body>
</html>
Code: C#
protected void Menu1_ItemClick(
object sender, EO.Web.NavigationItemEventArgs e)
{
//Handling menu item click event
}
Thanks!
|
|
Rank: Newbie
Groups: Member
Joined: 4/2/2009
Posts: 2
|
This is interesting, but is there a way to tell which item was clicked? For instance, I don't want to show the panel for every item in the menu, perhaps only the "Format" item.
|
|
Rank: Newbie
Groups: Member
Joined: 4/2/2009
Posts: 2
|
Also, when dealing with Master Pages, make sure you rework the javascript to use the .ClientID property to get the true id of each control that you reference.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,083
|
Hi, You can check which item is clicked inside your confirmMenuClick handler, it will be something like this:
Code: JavaScript
function confirmMenuClick(e, info)
{
//Does nothing if the item is not "Format". Note the sample
//code checks "ItemID", so you will need to set the
//item's ItemID property in order for this code to work.
//You can also call getText() to check the item text
if (info.getItem().getItemId() != "format")
return;
//Continue other logics such as displaying confirm dialog....
......
}
Here is the reference for NavigationEventInfo object (type of "info" argument) and NavigationItem object (type of info.getItem()): http://doc.essentialobjects.com/library/1/jsdoc.public.navigatoreventinfo.aspxhttp://doc.essentialobjects.com/library/1/jsdoc.public.navigationitem.aspxAnd yes, the code should be adjusted if you use a master page. For example, instead of using:
Code: JavaScript
document.getElementById("Button1").click();
It should be:
Code: JavaScript
document.getElementById('<%=Button1.ClientID%>').click();
Thanks for pointing this out! Please feel free to let us know if you have any more questions/suggestions.
|
|