Looking for some guidance/recomendations on the following:
currently trying to use the ModalPopUp control fired when a menu item from an ASP.NET 2.0 menu is selected. Issue is the menu items themselves dont have an ID and therefore the targetcontrolid within the modalpopupextender cannot be set. I am looking for
a way around this or probably some guidance as to what I should be doing instead..
Well thats my take on it. Im new to everything here (ASP.NET 2.0, ATLAS, CRYSTAL XI). My company is looking for a proof of concept type arrangement showing some MI over some web pages. So far I have been cruising slowly but surely and these new Atlas controls
have made what would have been an average looking site, look and feel pretty damn good (if I do say so myself). Any help is appreciated..
We've seen a number of people run into problems when ASP.NET UI elements are not actual controls (like the menu items). Fortunately for your very specific situation we can work around it with a pretty simple hack. We can indirectly force the modal popup to
occur through a hidden link. Check out this sample page that launches a modal popup when the first item is clicked:
The btnForce link is not shown (because of it's
display: none;) and it's wired up as the
TargetControlID of our ModalPopupExtender. We've also got a JavaScript function
forcePopup that fakes a click of the invisible link. The last touch is to invoke this JavaScript function as the
NavigateUrl property of a menu item. I hope this workaround takes care of your problem.
Thanks,
Ted
This posting is provided "AS IS" with no warranties, and confers no rights.
Hello again Ted.. Well, have tried the code sample you gave me in the application we are developing at work and I cannot seem to get it to work. Thats not to say the code doesnt work but probably is something I have done or are doing.. Will try and explain
..
code essentially has been inputed line for line, word for word from what you posted.
asp:menu is held within a table cell - have tried running your posted code within the cell as well as outside the table itself (such as the modalpopupextender which I think can sit anywhere within the page)
this is sitting within a master page which also has an ascx page dropped onto it which does have a working modal popup. I did run into problems when running as the system saw 2 modalpopupextender's where 1 is all that is required. I removed the extender
from the ascx page and the original ascx popup's work - still the asp:menu masterpage based one doesnt.
Error on page comes out as = Line 139. Error: 'null' is null or not an object. Line 139 doesnt seem to correspond with anything. I am hoping you can see an issue with the way I am doing it from the above (eg. cant use the modal popup within a table <td>
or something like that). As with everything else, Javascript is a new beast to me and wasnt sure how to debug or get any more information on this problem. If I can get more information, please let me know how and I will post..
Apologies foir being a pain - Im sure this is simple.......
I should have added - I can run the code provided in a simple aspx page and it works fine - so I know the problem is not with the code but how I am executing it.. Also, I know the javascript is being invoked on my page as I can run an alert function.. Not
sure if that helps..
Do you think you could post your page with the error? I'm not entirely sure what's causing the difference in behavior between the example and your page.
Also - if you take a look at the "Easily modifying and debugging scripts" section of
http://atlas.asp.net/atlastoolkit/Walkthrough/OtherNeatStuff.aspx, using the
ScriptPath attribute would allow you to put breakpoints in the JavaScript file and step through it.
Thanks,
Ted
This posting is provided "AS IS" with no warranties, and confers no rights.
Hello again Ted.. Firstly - apologies for the delays in replying to this.. Currently sitting interviews for jobs back in Australia and between that and trying to wrap up other things, have not had much chance to look at this... I am hoping the following
is what you have asked for in your response (Im including the html code - there is no c# code on the page as yet..). Im sure this is simple but I think requires more of my time to sift through which as I said, I havnt managed too well recently... As always,
thanks for any assistance you can provide and if I have misunderstood your request, let me know and I will repost..
That came through pretty funky - I can't actually see most of the code or what's wrong with it. If you get another chance, perhaps you could try to post again. No rush though.
Thanks,
Ted
This posting is provided "AS IS" with no warranties, and confers no rights.
Wow - it has been a while since I looked at this (apologies if this has fallen off your radar).. Heading back to Oz in a few weeks so sampling of this for company purposes sort of got put on the backburner but I would like to finish what I started so now I
have free'd up some time I'd like to hit this again.. Not sure what happened in the last insert but the below looks better (I think). If you can assist, thats would be great. I will now continue playing with this stuff and hopeful;ly get somewhere before
I leave.. If you need anything else, just shout and will action immediately (promise)
Thanks, as usual, for any assistance/guidance you may give....
toshach
Member
70 Points
14 Posts
using ModalPopUp with ASP.NET menuitem :assistance
May 09, 2006 03:16 PM|LINK
currently trying to use the ModalPopUp control fired when a menu item from an ASP.NET 2.0 menu is selected. Issue is the menu items themselves dont have an ID and therefore the targetcontrolid within the modalpopupextender cannot be set. I am looking for a way around this or probably some guidance as to what I should be doing instead..
Well thats my take on it. Im new to everything here (ASP.NET 2.0, ATLAS, CRYSTAL XI). My company is looking for a proof of concept type arrangement showing some MI over some web pages. So far I have been cruising slowly but surely and these new Atlas controls have made what would have been an average looking site, look and feel pretty damn good (if I do say so myself). Any help is appreciated..
Ted Glaza [M...
Contributor
4198 Points
847 Posts
Microsoft
Re: using ModalPopUp with ASP.NET menuitem :assistance
May 19, 2006 02:02 AM|LINK
Hi toshach,
I'm glad you've been enjoying the Toolkit.
We've seen a number of people run into problems when ASP.NET UI elements are not actual controls (like the menu items). Fortunately for your very specific situation we can work around it with a pretty simple hack. We can indirectly force the modal popup to occur through a hidden link. Check out this sample page that launches a modal popup when the first item is clicked:
<%@ Page Language="C#" %> <%@ Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %> <!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>Modal Popup from Menu Item</title> <style> .modalBackground { background-color: Gray; filter: alpha(opacity=70); opacity: 0.7; } .modalPopup { background-color: #ffffdd; border-width: 3px; border-style: solid; border-color: Gray; padding: 3px; width: 250px; } </style> </head> <body><form runat="server"><div> <atlas:ScriptManager ID="ScriptManager" runat="server" /> <asp:Panel ID="Popup" runat="server" CssClass="modalPopup" Style="display: none;"> This is the modal popup!<br /> <asp:Button ID="btnOK" runat="server" Text="OK" /> </asp:Panel> <asp:LinkButton ID="btnForce" runat="server" Text="You shouldn't see me" Style="display: none;" /> <asp:Menu ID="SimpleMenu" runat="server"> <Items> <asp:MenuItem Text="A" NavigateUrl="javascript: forcePopup();"/> <asp:MenuItem Text="B" /> <asp:MenuItem Text="C" /> <asp:MenuItem Text="D" /> </Items> </asp:Menu> <atlasToolkit:ModalPopupExtender ID="mpe" runat="server"> <atlasToolkit:ModalPopupProperties TargetControlID="btnForce" PopupControlID="Popup" OkControlID="btnOK" CancelControlID="btnOK" BackgroundCssClass="modalBackground" /> </atlasToolkit:ModalPopupExtender> <script language="javascript" type="text/javascript"> function forcePopup() { $('btnForce').click(); } </script> </div></form></body> </html>The btnForce link is not shown (because of it's display: none;) and it's wired up as the TargetControlID of our ModalPopupExtender. We've also got a JavaScript function forcePopup that fakes a click of the invisible link. The last touch is to invoke this JavaScript function as the NavigateUrl property of a menu item. I hope this workaround takes care of your problem.
Thanks,
Ted
toshach
Member
70 Points
14 Posts
Re: using ModalPopUp with ASP.NET menuitem :assistance
May 19, 2006 12:05 PM|LINK
For someone starting a long way back in this development game, this sort of help is so valuable and very much appreciated.. Thanks again...toshach
Ted Glaza [M...
Contributor
4198 Points
847 Posts
Microsoft
Re: using ModalPopUp with ASP.NET menuitem :assistance
May 19, 2006 04:52 PM|LINK
I'm glad to help. Keep posting any questions you have when playing with the Toolkit and we'll do our best to answer.
Thanks,
Ted
toshach
Member
70 Points
14 Posts
Re: using ModalPopUp with ASP.NET menuitem :assistance
May 23, 2006 02:44 PM|LINK
- code essentially has been inputed line for line, word for word from what you posted.
- asp:menu is held within a table cell - have tried running your posted code within the cell as well as outside the table itself (such as the modalpopupextender which I think can sit anywhere within the page)
- this is sitting within a master page which also has an ascx page dropped onto it which does have a working modal popup. I did run into problems when running as the system saw 2 modalpopupextender's where 1 is all that is required. I removed the extender
from the ascx page and the original ascx popup's work - still the asp:menu masterpage based one doesnt.
Error on page comes out as = Line 139. Error: 'null' is null or not an object. Line 139 doesnt seem to correspond with anything. I am hoping you can see an issue with the way I am doing it from the above (eg. cant use the modal popup within a table <td> or something like that). As with everything else, Javascript is a new beast to me and wasnt sure how to debug or get any more information on this problem. If I can get more information, please let me know how and I will post..Apologies foir being a pain - Im sure this is simple.......
toshach
Member
70 Points
14 Posts
Re: using ModalPopUp with ASP.NET menuitem :assistance
May 23, 2006 03:39 PM|LINK
Ted Glaza [M...
Contributor
4198 Points
847 Posts
Microsoft
Re: using ModalPopUp with ASP.NET menuitem :assistance
May 26, 2006 05:49 PM|LINK
Hi toshach,
Do you think you could post your page with the error? I'm not entirely sure what's causing the difference in behavior between the example and your page.
Also - if you take a look at the "Easily modifying and debugging scripts" section of http://atlas.asp.net/atlastoolkit/Walkthrough/OtherNeatStuff.aspx, using the ScriptPath attribute would allow you to put breakpoints in the JavaScript file and step through it.
Thanks,
Ted
toshach
Member
70 Points
14 Posts
Re: using ModalPopUp with ASP.NET menuitem :assistance
Jun 05, 2006 10:55 AM|LINK
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="finWEB_finance.master.cs" Inherits="finWEB_finance" %> <%@ register src="finWEBRightControl.ascx" tagname="finWEBRightControl" tagprefix="uc1" %> <%@ Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %> "-//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" > "server"> "aaStyles/finWEB_style_1.css" rel="stylesheet" type="text/css" /> <form id="<span" class="st">"form1" runat="server"> <script language="<span" class="st">"javascript" type="text/javascript"> function forcePopup() { //alert("This is working"); $('btnForce').Click(); } </script> "ScriptManager" runat="server"> "Popup" runat="server" cssclass="modalPopup" style="display: none;"> This is the modal popup! "btnOK" runat="server" text="OK" /> "btnForce" runat="server" style="display: none;" text="You shouldn't see me"> "mpe" runat="server"> "modalBackground" cancelcontrolid="btnOK" okcontrolid="btnOK" popupcontrolid="Popup" targetcontrolid="btnForce" /> <div id="<span" class="st">"table1"> "headtab" cellpadding="0px" cellspacing="0px"> "nablogo" rowspan="2" style="width: 124px"> "Img1" runat="server" alt="NAB Logo" src="aaImages/nab_logo_2.gif" /> "headtop" colspan="3"> finweb Project <div id="<span" class="st">"userinfo"> "lblWelcomeMsg" runat="server" text="Welcome to the <b>finweb</b>"> </div> "right" style="width: 100%;"> "headermenu" width="100%"> "width:100%;"> "mnuTools" runat="server" dynamichorizontaloffset="2" CssClass="headermenu" orientation="Horizontal" staticsubmenuindent="10px"> "~/aaImages/preferences.png" text=" Tools" tooltip="A good tradesman wont blame these." value="Tools" selectable="false"> "Currency Converter" value="forcePopup" NavigateUrl="javascript: forcePopup();" /> "Work Request System" /> "#000" horizontalpadding="5px" verticalpadding="2px" /> "Gray" borderstyle="Solid" borderwidth="2px" /> "#000" /> "5px" verticalpadding="3px" /> "#000000" /> "mnuHome" runat="server" CssClass="headermenu"> "~/aaImages/home.png" navigateurl="~/finWEB_financeHome.aspx" text=" Home" tooltip="There is no place like it" value="Home"> "3"> <div id="<span" class="st">"redbotm"> </div> </div> <div id="<span" class="st">"table2"> "0px" cellspacing="0px" width="100%"> "width: 100%"> "width: 65%; padding: 5px 5px 5px 5px; text-align: left; vertical-align: text-top;"> "cpLeft" runat="server"> "vertical-align: top; width: 50px;"> "nabvert" alt="" src="aaImages/redstarV.jpg" /> "padding: 5px 5px 5px 5px; text-align: right; vertical-align: text-top; width: 378px;"> "FinWEBRightControl1" runat="server" /> "width: 100%"> "3"> <div id="<span" class="st">"copyr"> "width: 75%; height: 1px; color: #5D7B9D;" /> "complogo" runat="server" alt="Company Logo" src="aaImages/logo.gif" /> Copyright © 2005 FletcherFarm Designs. </div> </div> </form>Ted Glaza [M...
Contributor
4198 Points
847 Posts
Microsoft
Re: using ModalPopUp with ASP.NET menuitem :assistance
Jun 06, 2006 08:35 PM|LINK
That came through pretty funky - I can't actually see most of the code or what's wrong with it. If you get another chance, perhaps you could try to post again. No rush though.
Thanks,
Ted
toshach
Member
70 Points
14 Posts
Re: using ModalPopUp with ASP.NET menuitem :assistance
Jun 23, 2006 01:02 PM|LINK
Wow - it has been a while since I looked at this (apologies if this has fallen off your radar).. Heading back to Oz in a few weeks so sampling of this for company purposes sort of got put on the backburner but I would like to finish what I started so now I have free'd up some time I'd like to hit this again.. Not sure what happened in the last insert but the below looks better (I think). If you can assist, thats would be great. I will now continue playing with this stuff and hopeful;ly get somewhere before I leave.. If you need anything else, just shout and will action immediately (promise)
Thanks, as usual, for any assistance/guidance you may give....
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="finWEB_finance.master.cs" Inherits="finWEB_finance" %> <%@ register src="finWEBRightControl.ascx" tagname="finWEBRightControl" tagprefix="uc1" %> <%@ Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %> <!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>finweb Project - Proof Of Concept</title> <link href="aaStyles/finWEB_style_1.css" rel="stylesheet" type="text/css" /> </head> <body> <form id="form1" runat="server"> <script language="javascript" type="text/javascript"> function forcePopup() { //alert("This is working"); $('btnForce').click(); } </script> <atlas:scriptmanager id="ScriptManager" runat="server"> </atlas:scriptmanager> <asp:panel id="Popup" runat="server" cssclass="modalPopup" style="display: none;"> <asp:label id="Label1" runat="server" text="Convert From :"></asp:label> <asp:dropdownlist id="DropDownList1" runat="server" datasourceid="odsCurrencyConverter_CountryCodes" datatextfield="CRNCY_DESC" datavaluefield="CRNCY_CDE"> <asp:listitem selected="True" value="NULL">--SELECT CURRENCY TYPE --</asp:listitem> </asp:dropdownlist><asp:objectdatasource id="odsCurrencyConverter_CountryCodes" runat="server" oldvaluesparameterformatstring="original_{0}" selectmethod="getCurrencyExchange" typename="datasetCurrencyConverterTableAdapters.dtCurrencyExchangeTableAdapter"></asp:objectdatasource> <asp:label id="Label2" runat="server" text="Convert To :"></asp:label> <asp:dropdownlist id="DropDownList2" runat="server" datasourceid="odsCurrencyConverter_CountryCodes" datatextfield="CRNCY_DESC" datavaluefield="CRNCY_CDE"> </asp:dropdownlist> <asp:label id="Label3" runat="server" text="Convert From Amount :"></asp:label> <asp:textbox id="txtAmount" runat="server"></asp:textbox> <asp:label id="lblCovertResult" runat="server"></asp:label> <asp:button id="btnOK" runat="server" text="OK" /> </asp:panel> <asp:linkbutton id="btnForce" runat="server" style="display: none;" text="You shouldn't see me"> </asp:linkbutton> <atlastoolkit:modalpopupextender id="mpe" runat="server"> <atlastoolkit:modalpopupproperties backgroundcssclass="modalBackground" cancelcontrolid="btnOK" okcontrolid="btnOK" popupcontrolid="Popup" targetcontrolid="btnForce" /> </atlastoolkit:modalpopupextender> <div id="table1"> <!-- TABLE 1 MASTERPAGE - start --> <table id="headtab" cellpadding="0px" cellspacing="0px"> <tr> <td id="nablogo" rowspan="2" style="width: 124px"> <img id="Img1" runat="server" alt="NAB Logo" src="aaImages/nab_logo_2.gif" /> </td> <td id="headtop" colspan="3"> <b>finweb</b> Project </td> </tr> <tr> <td> <div id="userinfo"> <asp:label id="lblWelcomeMsg" runat="server" text="Welcome to the b>"></asp:label> </div> </td> <td align="right" style="width: 100%;"> <table id="headermenu" width="100%"> <tr> <td style="width:100%;"> </td> <td> </td> <td> </td> <td> <asp:menu id="mnuTools" runat="server" dynamichorizontaloffset="2" CssClass="headermenu" orientation="Horizontal" staticsubmenuindent="10px"> <items> <asp:menuitem imageurl="~/aaImages/preferences.png" text=" Tools" tooltip="A good tradesman wont blame these." value="Tools" selectable="false"> <asp:menuitem navigateurl="javascript: forcePopup();" text="Currency Converter"></asp:menuitem> <asp:menuitem text="Work Request System" /> </asp:menuitem> </items> <staticmenuitemstyle forecolor="#000" horizontalpadding="5px" verticalpadding="2px" /> <dynamicmenustyle bordercolor="Gray" borderstyle="Solid" borderwidth="2px" /> <dynamichoverstyle forecolor="#000" /> <dynamicmenuitemstyle horizontalpadding="5px" verticalpadding="3px" /> <statichoverstyle forecolor="#000000" /> </asp:menu> </td> <td> <asp:menu id="mnuHome" runat="server" CssClass="headermenu"> <items> <asp:menuitem imageurl="~/aaImages/home.png" navigateurl="~/finWEB_financeHome.aspx" text=" Home" tooltip="There is no place like it" value="Home"></asp:menuitem> </items> </asp:menu> </td> </tr> </table> </td> </tr> <tr> <td colspan="3"> <div id="redbotm"> </div> </td> </tr> </table> <!-- TABLE 1 MASTERPAGE - end --> </div> <div id="table2"> <!-- TABLE 2 MASTERPAGE - start --> <table cellpadding="0px" cellspacing="0px" width="100%"> <tr style="width: 100%"> <td style="width: 65%; padding: 5px 5px 5px 5px; text-align: left; vertical-align: text-top;"> <asp:contentplaceholder id="cpLeft" runat="server"> </asp:contentplaceholder> </td> <td style="vertical-align: top; width: 50px;"> <img id="nabvert" alt="" src="aaImages/redstarV.jpg" /> </td> <td style="padding: 5px 5px 5px 5px; text-align: right; vertical-align: text-top; width: 378px;"> <uc1:finwebrightcontrol id="FinWEBRightControl1" runat="server" /> </td> </tr> <tr style="width: 100%"> <td colspan="3"> <div id="copyr"> <hr style="width: 75%; height: 1px; color: #5D7B9D;" /> <img id="complogo" runat="server" alt="Company Logo" src="aaImages/logo.gif" /> <br /> Copyright © 2005 FletcherFarm Designs. <br /> </div> </td> </tr> </table> <!-- TABLE 2 MASTERPAGE - end --> </div> <br /> </form> </body> </html>