Logo
My Account |  Site Map | Contact Us  
Welcome Guest Search | Active Topics | Sign In | Register

Sample code for using ConfirmButton, ModalPopup Extender and Menu together Options
eo_support
Posted: Friday, June 19, 2009 11:16:02 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 20,999
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!
WebPhenom
Posted: Sunday, June 21, 2009 1:42:12 PM
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.
WebPhenom
Posted: Sunday, June 21, 2009 1:43:19 PM
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.
eo_support
Posted: Sunday, June 21, 2009 2:08:33 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 20,999
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.aspx
http://doc.essentialobjects.com/library/1/jsdoc.public.navigationitem.aspx

And 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.


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.