Showing posts with label working. Show all posts
Showing posts with label working. Show all posts

Wednesday, March 28, 2012

Modal Popup Delete Help.

Im working on a gridview that`ll delete a row of data. Currently the gridview shows the data, and i have a linkbutton at the other end of the gridviews template field. When you click the linkbutton the modalpopup appears and it has two buttons "cancel" and "ok". Cancel makes it disappear, and ok, doesnt do its job lol. I have a foreach code that deletes all the entries to the gridview but i cant work out what the individual row delete code would be! my gridview code is :

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="Admin" BorderStyle="Dotted" BorderWidth="0px" ShowHeader="False" DataKeyNames="UserID">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Panel ID="Admin" runat="server" >

<table width="630">
<tr>
<td width="460">
<div align="left">
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# Eval("UserID", "~/Profile.aspx?id={0}") %>' Text='<%# Eval("FullName") %>' Font-Names="Tahoma" Font-Size="10pt" ForeColor="SteelBlue"></asp:HyperLink>
</div>
</td>
<td>
<div align="right">
<asp:LinkButton ID="LinkButton7" runat="server" Font-Names="Tahoma" Font-Size="8pt" ForeColor="SteelBlue" OnClick="LinkButton7_Click">Remove</asp:LinkButton>
</div>
</td>
</tr>
</table>
<hr />
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender5" TargetControlID="LinkButton7" CancelControlID="Button10" PopupControlID="Panel5" runat="server" BackgroundCssClass="modalBackground">
</ajaxToolkit:ModalPopupExtender>
<asp:Label ID="Label17" Visible="false" runat="server"></asp:Label>
<asp:Panel ID="Panel5" runat="server" Width="300px" BackColor="IndianRed">
<asp:Label ID="Label18" runat="server" Text="Are you sure you want to delete this person?"></asp:Label><asp:Label ID="Label19" runat="server"></asp:Label>
<table>
<tr>
<td>
<asp:Button ID="Button9" runat="server" OnClick="LinkButton9_Click" Text="Confirm" />
</td>
<td>
<asp:Button ID="Button10" runat="server" Text="Cancel" />
</td>
</tr>
</table>
</asp:Panel>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EmptyDataTemplate>
Nothing...

</EmptyDataTemplate>
</asp:GridView>

Currently when the linkbutton9 is clicked... it loop though all of the records and deletes them can someone help me with a code that deletes the unique ID in the list of users "UserIDNumber" thanks in advance! si!

Hiblink18jew,

You don't need to loop though all of the records to find out the record that you want to delete.

Just change:

<asp:Button ID="Button9" runat="server" OnClick="LinkButton9_Click" Text="Confirm" />

to:

<asp:Button ID="Button9" runat="server" OnCommand="LinkButton9_Command" CommandArgument='<%# Eval("UserID", "{0}") %>' Text="Confirm" />

C# code:

protected void LinkButton9_Command(object sender, CommandEventArgs e)
{
// delete the person whoes UserID is e.CommandArgument
}

Best Regards

Modal Popup Challenge.

The challenge.

I've been working on the following problem for about a week. I have a multiview with six views. I need to make a popup for date fields. Each view may have one or more date fields. The popup must open from a mouse click on an image control. I would like to have only one calendar control in the HTML. It can be done with either the Popup or Modal Popup Atlas controls. If you use a Popup control you must add a "Cancel" button so you can return no date. The screen can not flicker or take for ever once you have selected a date from the date control.

What I've learned.

One: You must put thePopupControlExtender or ModalPopupExtender inside the view that holds the TargetControlID. If not you will get an error on the first view because it can not fine the TargetControlID on the other views that are not active (showing). One side effect of putting these controls inside of a view is that you can no longer see you html in the Design mode. You get the following "Error Rendering Control – Mulitiview. An unhandled exception has occurred." Even with this error in Design mode everthing compiles and seems to run OK. The Following are the examples that I used.

<atlasToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server">

<atlasToolkit:PopupControlProperties

TargetControlID="TextBox_CUS_DATE_OF_BIRTH"

PopupControlID="Panel1"

Position="Bottom" />

</atlasToolkit:PopupControlExtender>

<atlasToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server">

<atlasToolkit:ModalPopupProperties

TargetControlID="ImageButton_CUS_DATE_OF_BIRTH"

PopupControlID="Panel1"

BackgroundCssClass="modalBackground"

DropShadow="true"

OkControlID="OkButton"

OnOkNormalSubmit="false"

OnOkScript="onOk()"

CancelControlID="CancelButton"

OnCancelScript="onCancel()" />

</atlasToolkit:ModalPopupExtender>

Two: To get the popup to work off the mouse click of an image you need to set the onClientClick="return false;". Example:

<asp:ImageButton ID="ImageButton_CUS_DATE_OF_BIRTH" runat="server" ImageUrl="~/Images/Calendar.jpg" CssClass="imageButton" OnClientClick="return false;" />

Three: Examples of the Calendars used for both Popup and Modal Popup.

<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Style="display: none">

<atlas:UpdatePanel ID="UpdatePanel1" runat="server"

EnableViewState="true" Mode="always">

<ContentTemplate>

<center>

<asp:Calendar ID="Calendar1" runat="server"

BackColor="White" BorderColor="#999999"

CellPadding="1" DayNameFormat="Shortest"

Font-Names="Verdana" Font-Size="8pt"

ForeColor="Black" Width="160px"

OnSelectionChanged="Calendar1_SelectionChanged">

<SelectedDayStyle BackColor="#666666"

Font-Bold="True" ForeColor="White" />

<TodayDayStyle BackColor="#CCCCCC" ForeColor="Black"/>

<SelectorStyle BackColor="#CCCCCC" />

<WeekendDayStyle BackColor="#FFFFCC" />

<OtherMonthDayStyle ForeColor="#808080" />

<NextPrevStyle VerticalAlign="Bottom" />

<DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True"

Font-Size="7pt" />

<TitleStyle BackColor="#999999" BorderColor="Black"

Font-Bold="True" />

</asp:Calendar>

<asp:Button ID="OkButton" runat="server" Text="OK">

</asp:Button>

<asp:Button ID="CancelButton" runat="server"

Text="Cancel"></asp:Button>

</center>

</ContentTemplate>

</atlas:UpdatePanel>

</asp:Panel>

<asp:Panel ID="Panel1" runat="server" CssClass="popupControl">

<atlas:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

<center>

<asp:Calendar ID="Calendar1" runat="server"

BackColor="White" BorderColor="#999999"

CellPadding="1" DayNameFormat="Shortest"

Font-Names="Verdana" Font-Size="8pt"

ForeColor="Black" Width="160px"

OnSelectionChanged="Calendar1_SelectionChanged" >

<SelectedDayStyle BackColor="#666666" Font-Bold="True"

ForeColor="White" />

<TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" />

<SelectorStyle BackColor="#CCCCCC" />

<WeekendDayStyle BackColor="#FFFFCC" />

<OtherMonthDayStyle ForeColor="#808080" />

<NextPrevStyle VerticalAlign="Bottom" />

<DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True"

Font-Size="7pt" />

<TitleStyle BackColor="#999999" BorderColor="Black"

Font-Bold="True" />

</asp:Calendar>

<asp:Button ID="Button1" runat="server" Text="Cancel"

OnClick="Button1_Click" />

</center>

</ContentTemplate>

</atlas:UpdatePanel>

</asp:Panel>

Four: This is my code behind examples for both Popup and Modal Popup.

Code for Modal Popup.

protected void Calendar1_SelectionChanged(object sender, EventArgs e)

{

Calendar cTemp = (Calendar)sender;

TextBox_CUS_DATE_OF_BIRTH.Text = cTemp.SelectedDate.ToShortDateString();

}

Code for Popup.

protected void Calendar1_SelectionChanged(object sender, EventArgs e)

{

Calendar cTemp = (Calendar)sender;

PopupControlExtender.GetCurrent(this.Page).Commit (cTemp.SelectedDate.ToShortDateString());

}

Final results.

Popup control: When I try to use a Popup control everthing works until I try to click on a date in the calendar control. It returns nothing back to the TextBox.

Modal Popup control: When I try to use a Modal Popup control everthing works until I try to click on a date in the calendar control. Itdoes return a date back to the TextBox, but only the Dropdownlist boxes become active. Everything else is still grayed out.

If you have an ideas on why this will not work or an example of this working please post it. Thanks.

Could you please post a complete sample page (simplified as much as possible)? We'd love to look into this.

Here is a simple example that I created using a Modal Popup. You can replace the Modal Popup with just the Popup control and it fails at the same spot.

<%

@.PageCodeFile="ExampleModal.aspx.cs"AutoEventWireup="true"EnableViewState="true"Inherits="ExampleModal"Language="C#" %>

<%

@.RegisterAssembly="AtlasControlToolkit"Namespace="AtlasControlToolkit"TagPrefix="atlasToolkit" %>

<!

DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<

htmlxmlns="http://www.w3.org/1999/xhtml">

<

headrunat="server"><title>Customers</title>

</

head>

<

body><formid="formExampleModal"runat="server"><atlas:ScriptManagerID="ScriptMgr"runat="server"EnablePartialRendering="true"></atlas:ScriptManager><atlas:UpdatePanelID="UpdatePanelMain"runat="server"Mode="always"><ContentTemplate><divid="divPage"><tableid="TableMenu"width="100%"><tr><tdcolspan="10"><asp:MenuID="MenuTab"runat="server"Orientation="Horizontal"OnMenuItemClick="MenuTab_MenuItemClick"><Items><asp:MenuItemText="View one"Value="0"></asp:MenuItem><asp:MenuItemText="View two"Value="1"></asp:MenuItem></Items></asp:Menu></td></tr><tr><td><asp:MultiViewID="MultiViewCustomer"runat="server"><asp:ViewID="View1"runat="server"><tablestyle="width: 100%;"><tr><tdalign="right"><asp:LabelID="Label1"runat="server"EnableViewState="False"TabIndex="-1"Text="Textbox Date"></asp:Label></td><tdalign="left"><asp:TextBoxID="TextBox1"runat="server"Width="100px"TabIndex="1"></asp:TextBox></td><tdalign="left"><asp:ImageButtonID="ImageButton1"runat="server"ImageUrl="~/Images/Calendar.jpg"OnClientClick="return false;"/></td><tdalign="right"><asp:LabelID="Label2"runat="server"EnableViewState="False"TabIndex="-1"Text="Test Dropdown"></asp:Label></td><tdalign="left"><asp:DropDownListID="DropDownList1"runat="server"TabIndex="2"Width="100px"></asp:DropDownList></td></tr></table><atlasToolkit:ModalPopupExtenderID="ModalPopupExtender1"runat="server"><atlasToolkit:ModalPopupPropertiesTargetControlID="ImageButton1"PopupControlID="Panel1"BackgroundCssClass="modalBackground"DropShadow="true"OkControlID="OkButton"OnOkScript="onOk()"CancelControlID="CancelButton"OnCancelScript="onCancel()"/></atlasToolkit:ModalPopupExtender></asp:View><asp:ViewID="View2"runat="server"><tablestyle="width: 100%;"><tr><tdalign="right"><asp:LabelID="Label3"runat="server"EnableViewState="False"TabIndex="-1"Text="Textbox Date"></asp:Label></td><tdalign="left"><asp:TextBoxID="TextBox3"runat="server"Width="100px"TabIndex="1"></asp:TextBox></td><tdalign="left"><asp:ImageButtonID="ImageButton2"runat="server"ImageUrl="~/Images/Calendar.jpg"OnClientClick="return false;"/></td><tdalign="right"><asp:LabelID="Label4"runat="server"EnableViewState="False"TabIndex="-1"Text="Test Dropdown"></asp:Label></td><tdalign="left"><asp:DropDownListID="DropDownList2"runat="server"TabIndex="2"Width="100px"></asp:DropDownList></td></tr></table><atlasToolkit:ModalPopupExtenderID="ModalPopupExtender2"runat="server"><atlasToolkit:ModalPopupPropertiesTargetControlID="ImageButton2"PopupControlID="Panel1"BackgroundCssClass="modalBackground"DropShadow="true"OkControlID="OkButton"OnOkScript="onOk()"CancelControlID="CancelButton"OnCancelScript="onCancel()"/></atlasToolkit:ModalPopupExtender></asp:View></asp:MultiView></td></tr></table></div></ContentTemplate></atlas:UpdatePanel><asp:PanelID="Panel1"runat="server"Style="display: none"><atlas:UpdatePanelID="UpdatePanel1"runat="server"EnableViewState="true"Mode="always"><ContentTemplate><center><asp:CalendarID="Calendar1"runat="server"BackColor="White"BorderColor="#999999"CellPadding="1"DayNameFormat="Shortest"Font-Names="Verdana"Font-Size="8pt"ForeColor="Black"Width="160px"OnSelectionChanged="Calendar1_SelectionChanged"><SelectedDayStyleBackColor="#666666"Font-Bold="True"ForeColor="White"/><TodayDayStyleBackColor="#CCCCCC"ForeColor="Black"/><SelectorStyleBackColor="#CCCCCC"/><WeekendDayStyleBackColor="#FFFFCC"/><OtherMonthDayStyleForeColor="#808080"/><NextPrevStyleVerticalAlign="Bottom"/><DayHeaderStyleBackColor="#CCCCCC"Font-Bold="True"Font-Size="7pt"/><TitleStyleBackColor="#999999"BorderColor="Black"Font-Bold="True"/></asp:Calendar><asp:ButtonID="OkButton"runat="server"Text="OK"></asp:Button><asp:ButtonID="CancelButton"runat="server"Text="Cancel"></asp:Button></center></ContentTemplate></atlas:UpdatePanel></asp:Panel></form><scripttype="text/javascript">function onOk()

{

}

function onCancel()

{

}

</script>

</

body>

</

html>

using

System;

using

System.Data;

using

System.Configuration;

using

System.Collections;

using

System.Web;

using

System.Web.Security;

using

System.Web.UI;

using

System.Web.UI.WebControls;

using

System.Web.UI.WebControls.WebParts;

using

System.Web.UI.HtmlControls;

using

AtlasControlToolkit;

public

partialclassExampleModal : System.Web.UI.Page

{

public ExampleModal()

{

Page.Load +=

newEventHandler(Page_Load);

}

protectedoverridevoid OnInit(EventArgs e)

{

base.OnInit(e);

}

protectedvoid Page_Load(object sender,EventArgs e)

{

if (!IsPostBack)

{

MultiViewCustomer.ActiveViewIndex = 0;

MenuTab.Items[0].Selected =

true;

}

}

protectedvoid MenuTab_MenuItemClick(object sender,MenuEventArgs e)

{

MultiViewCustomer.ActiveViewIndex =

Int32.Parse(e.Item.Value);

}

protectedvoid Calendar1_SelectionChanged(object sender,EventArgs e)

{

Calendar cTemp = (Calendar)sender;

TextBox1.Text = cTemp.SelectedDate.ToShortDateString();

TextBox3.Text = cTemp.SelectedDate.ToShortDateString();

}

}

/*Modal Popup*/

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

}

Once again any help would be great. If you need anything else let me know.


I'm not sure I've captured all your requirements, but please have a look at the page below as I believe it does what you're asking for.

using System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;using AtlasControlToolkit;public partialclass ExampleModal : System.Web.UI.Page{public ExampleModal() { Page.Load +=new EventHandler(Page_Load); }protected void Page_Load(object sender, EventArgs e) {if (!IsPostBack) { MultiViewCustomer.ActiveViewIndex = 0; MenuTab.Items[0].Selected =true; } }protected void MenuTab_MenuItemClick(object sender, MenuEventArgs e) { MultiViewCustomer.ActiveViewIndex = Int32.Parse(e.Item.Value); }protected void Calendar1_SelectionChanged(object sender, EventArgs e) { Calendar cTemp = (Calendar)sender; TextBox1.Text = cTemp.SelectedDate.ToShortDateString(); TextBox3.Text = cTemp.SelectedDate.ToShortDateString(); PopupControlExtender.GetCurrent(Page).Commit(Calendar1.SelectedDate.ToShortDateString()); }}
<%@. Page CodeFile="Default10.aspx.cs" AutoEventWireup="true" EnableViewState="true" Inherits="ExampleModal" 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>Customers</title> <style type="text/css">/*Modal Popup*/.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; }</style></head><body> <form id="formExampleModal" runat="server"> <atlas:ScriptManager ID="ScriptMgr" runat="server" EnablePartialRendering="true"> </atlas:ScriptManager><%-- <atlas:UpdatePanel ID="UpdatePanelMain" runat="server" Mode="always"> <ContentTemplate>--%> <div id="divPage"> <table id="TableMenu" width="100%"> <tr> <td colspan="10"> <asp:Menu ID="MenuTab" runat="server" Orientation="Horizontal" OnMenuItemClick="MenuTab_MenuItemClick"> <Items> <asp:MenuItem Text="View one" Value="0"></asp:MenuItem> <asp:MenuItem Text="View two" Value="1"></asp:MenuItem> </Items> </asp:Menu> </td> </tr> <tr> <td> <asp:MultiView ID="MultiViewCustomer" runat="server"> <asp:View ID="View1" runat="server"> <table style="width: 100%;"> <tr> <td align="right"> <asp:Label ID="Label1" runat="server" EnableViewState="False" TabIndex="-1" Text="Textbox Date"></asp:Label> </td> <td align="left"> <asp:TextBox ID="TextBox1" runat="server" Width="100px" TabIndex="1"></asp:TextBox> </td> <td align="left"> <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/atlas_title.jpg" OnClientClick="return false;" /> </td> <td align="right"> <asp:Label ID="Label2" runat="server" EnableViewState="False" TabIndex="-1" Text="Test Dropdown"></asp:Label> </td> <td align="left"> <asp:DropDownList ID="DropDownList1" runat="server" TabIndex="2" Width="100px"> </asp:DropDownList> </td> </tr> </table> <atlasToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server"> <atlasToolkit:PopupControlProperties TargetControlID="ImageButton1" PopupControlID="Panel1" CommitProperty="commit" CommitScript="$('TextBox1').value = $('ImageButton1').commit;" /> </atlasToolkit:PopupControlExtender> </asp:View> <asp:View ID="View2" runat="server"> <table style="width: 100%;"> <tr> <td align="right"> <asp:Label ID="Label3" runat="server" EnableViewState="False" TabIndex="-1" Text="Textbox Date"></asp:Label> </td> <td align="left"> <asp:TextBox ID="TextBox3" runat="server" Width="100px" TabIndex="1"></asp:TextBox> </td> <td align="left"> <asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="~/Images/atlas_title.jpg" OnClientClick="return false;" /> </td> <td align="right"> <asp:Label ID="Label4" runat="server" EnableViewState="False" TabIndex="-1" Text="Test Dropdown"></asp:Label> </td> <td align="left"> <asp:DropDownList ID="DropDownList2" runat="server" TabIndex="2" Width="100px"> </asp:DropDownList> </td> </tr> </table> <atlasToolkit:PopupControlExtender ID="PopupControlExtender2" runat="server"> <atlasToolkit:PopupControlProperties TargetControlID="ImageButton2" PopupControlID="Panel1" CommitProperty="commit" CommitScript="$('TextBox3').value = $('ImageButton2').commit;" /> </atlasToolkit:PopupControlExtender> </asp:View> </asp:MultiView> </td> </tr> </table> </div><%-- </ContentTemplate> </atlas:UpdatePanel>--%> <asp:Panel ID="Panel1" runat="server" Style="display: none; background-color:Gray"> <atlas:UpdatePanel ID="UpdatePanel1" runat="server" EnableViewState="true" Mode="always"> <ContentTemplate> <center> <asp:Calendar ID="Calendar1" runat="server" BackColor="White" BorderColor="#999999" CellPadding="1" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" Width="160px" OnSelectionChanged="Calendar1_SelectionChanged"> <SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" /> <TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" /> <SelectorStyle BackColor="#CCCCCC" /> <WeekendDayStyle BackColor="#FFFFCC" /> <OtherMonthDayStyle ForeColor="#808080" /> <NextPrevStyle VerticalAlign="Bottom" /> <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" /> <TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" /> </asp:Calendar> </center> </ContentTemplate> </atlas:UpdatePanel> </asp:Panel> </form></body></html>

This has a couple of issues.

1). Can not change month without calendar disappearing.

2). Loses focus. I can set focus in code behind but if you selected the image a second time focus can not be set. This is not good for an entry screen.

Other notes:

This code never gets executed or does not work.

CommitProperty="commit" CommitScript="$('TextBox1').value = $('ImageButton1').commit;"

and

PopupControlExtender.GetCurrent(Page).Commit(Calendar1.SelectedDate.ToShortDateString());

You can remove these lines and get the same results. These lines of code only seems to work if the PopupControlExtender is nested inside of the panel that is referencing, like this...

<asp:PanelID="Panel1"runat="server"CssClass="popupControl">

<atlas:UpdatePanelID="UpdatePanel1"runat="server">

<ContentTemplate>

<atlasToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server">
<atlasToolkit:PopupControlProperties TargetControlID="ImageButton1" PopupControlID="Panel1"
CommitProperty="commit" CommitScript="$('TextBox1').value = $('ImageButton1').commit;" />
</atlasToolkit:PopupControlExtender>
<center>

<asp:CalendarID="Calendar1"runat="server"BackColor="White"BorderColor="#999999"CellPadding="1"DayNameFormat="Shortest"Font-Names="Verdana"Font-Size="8pt"

etc...

The text value is being set by this code in the code behind.

Calendar cTemp = (Calendar)sender;
TextBox1.Text = cTemp.SelectedDate.ToShortDateString();
TextBox3.Text = cTemp.SelectedDate.ToShortDateString();

To make this work I would have to have a calendar control like this for input field that is a date. This wold not be good. I have one screen that uses multiviews and that have thirty plus dates on it.

Either way I still will have problem of changing months.

If I'm not correct in what I say, please let me know for I have just started working with Atlas.


I think maybe something went weird when you tried to copy the code/codebehind I posted? You report that you can't change months without the calendar disappearing, but that works fine for me with the modifications I made.

If I remove the lines of code that you suggest in the HTML then every time you move between views the mulitview disappears for about two-three seconds. This why I started using Atlas, to avoid the screen redrawing all the time. Is this my only choice?

////The lines that I would need to remove...////
<atlas:UpdatePanel ID="UpdatePanelMain" runat="server" Mode="always">
<ContentTemplate>


Untilwork item 711 is fixed, that may be your best option. However, I'll note that switching to debug=false in your web.config should speed things up - perhaps enough that this is tolerable?


David, thanks for your help. I will go forward using the popup and I will keep checking on item 711.

just found this thread. I am trying to do something similar only my popup does not NEED to be modal and I am working with master pages.

However I cannot get the calendar click event to write to the textbox. I have copied the example provided above !! Any ideas anyone ?


ps i have changeset 5220 so the fix for 711 is in my version of atlas !!
Could you please post a simple, complete sample of what you're trying to do that's not working with the 60914 release? Thanks.

Hello David, thanks for replying. Sorry for not posting sooner... i have been away for the weekend.

I attach part of my code. I am using a master page... there are two date "popup" controls here. One attempts to use the click of an image button to popup the calendar and then pass the selected to a text box. One just uses the standard example supplied with atlas (textbox gets focus, popup calendar displays, select date..date goes into text box).

the one that uses the image button pops up the calendar ok but when the date is selected an error occurrs on the page i think an object is not getting set somewhere. the one that uses the standard example supplied with atlas works fine but itsnt really what i want as i want the user to be able to type a date OR pop up a calendar.

incidentally i am using july ctp release (only just noticed that there was a september release when i looked for 60914 based on your comment above). Do i need to un-install atlas and do a clean install from the september ctp or will it update everything correctly if i just install septembers "on top" of july's ?)

Here is an extract of apx code:

<%@. Page Language="C#" MasterPageFile="~/JSAACMaster.master" AutoEventWireup="true" CodeFile="ExistingCustomer.aspx.cs" Inherits="ExistingCustomer" Title="Existing Customer" %><%@. Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="AtlasControlToolkit" %><%@. MasterType VirtualPath="~/JSAACMaster.master" %><asp:Content ID="Content1" ContentPlaceHolderID="cphMain" Runat="Server"><!-- GC Update panels need a script manager control to function correctly...atlas uses javascript to function --><atlas:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server"></atlas:ScriptManager><AtlasControlToolkit:PopupControlExtender ID="pcePopUpDates" runat="server"> <AtlasControlToolkit:PopupControlProperties TargetControlID="imbReqDateCalendar" PopupControlID="Panel1" ExtenderControlID="pcePopUpDates" PageRequestManagerID="_PageRequestManager" CommitProperty="commit" CommitScript="$('txtReqDate').value = $('imbReqDateCalendar').commit;"/> <AtlasControlToolkit:PopupControlPropertiesTargetControlID="txtPostDate"PopupControlID="Panel2"Position="Bottom"ExtenderControlID="pcePopUpDates"PageRequestManagerID="_PageRequestManager" /></AtlasControlToolkit:PopupControlExtender><table style="width: 1139px; height: 232px; padding-right: 25px; padding-left: 25px; padding-bottom: 25px; margin: 25px; padding-top: 25px; vertical-align: middle; text-align: left;"> <tr> <td style="width: 594px; vertical-align: top; text-align: left; font-weight: bold; text-transform: uppercase;"> UTN:<br /> <asp:TextBox ID="txtUTN" runat="server" Width="148px"></asp:TextBox><asp:RequiredFieldValidator ID="rfvUTN" runat="server" ErrorMessage="UTN field must be completed" ControlToValidate="txtUTN" Height="6px" Width="1px">*</asp:RequiredFieldValidator> </td> <td style="vertical-align: top; text-align: left; width: 522px; font-weight: bold; text-transform: uppercase;"> TITLE:<br /> <asp:TextBox ID="txtTitle" runat="server"></asp:TextBox><asp:RequiredFieldValidator ID="rfvTitle" runat="server" ErrorMessage="Title field must be completed" ControlToValidate="txtTitle">*</asp:RequiredFieldValidator> </td> </tr> <tr> <td style="width: 594px; vertical-align: top; text-align: left; font-weight: bold; text-transform: uppercase;"> RANK:<br /> <asp:TextBox ID="txtRank" runat="server"></asp:TextBox><asp:RequiredFieldValidator ID="rfvRank" runat="server" ErrorMessage="Rank field must be completed" ControlToValidate="txtRank">*</asp:RequiredFieldValidator> </td> <td style="vertical-align: top; text-align: left; width: 522px; font-weight: bold; text-transform: uppercase;"> SURNAME:<br /> <asp:TextBox ID="txtSurname" runat="server"></asp:TextBox><asp:RequiredFieldValidator ID="rfvSurname" runat="server" ErrorMessage="Surname field must be completed" ControlToValidate="txtSurname">*</asp:RequiredFieldValidator> </td> </tr> <tr> <td style="width: 594px; vertical-align: top; text-align: left; font-weight: bold; text-transform: uppercase;"> SERVICE NUMBER:<br /> <asp:TextBox ID="txtServNo" runat="server"></asp:TextBox><asp:RequiredFieldValidator ID="rfvServNo" runat="server" ErrorMessage="Service No field must be completed" ControlToValidate="txtServNo">*</asp:RequiredFieldValidator> </td> <td style="vertical-align: top; text-align: left; width: 522px; font-weight: bold; text-transform: uppercase;"> INITIALS:<br /> <asp:TextBox ID="txtInits" runat="server"></asp:TextBox><asp:RequiredFieldValidator ID="rfvInits" runat="server" ErrorMessage="Initials field must be completed" ControlToValidate="txtInits">*</asp:RequiredFieldValidator> </td> </tr> <tr> <td style="width: 594px; vertical-align: top; text-align: left; font-weight: bold; text-transform: uppercase;"> UIN:<br /> <asp:TextBox ID="txtUIN" runat="server"></asp:TextBox><asp:RequiredFieldValidator ID="rfvUIN" runat="server" ErrorMessage="UIN field must be completed" ControlToValidate="txtUIN">*</asp:RequiredFieldValidator> </td> <td style="vertical-align: top; text-align: left; width: 522px; font-weight: bold; text-transform: uppercase;"> ALPHA CODE:<br /> <asp:DropDownList ID="ddlAlpha" runat="server" Width="154px"></asp:DropDownList><asp:RequiredFieldValidator ID="rfvAlpha" runat="server" ErrorMessage="Alpha Code field must be completed" ControlToValidate="ddlAlpha">*</asp:RequiredFieldValidator> </td> </tr> <tr> <td style="width: 594px; vertical-align: top; text-align: left; font-weight: bold; text-transform: uppercase;"> REQUIRED DATE:<br /> <asp:TextBox ID="txtReqDate" runat="server"></asp:TextBox><asp:ImageButton ID="imbReqDateCalendar" runat="server" OnClientClick="return false;" ImageUrl="~/images/calendar.gif" /><asp:RequiredFieldValidator ID="rfvReqDate" runat="server" ControlToValidate="txtReqDate" ErrorMessage="Required Date field must be completed">*</asp:RequiredFieldValidator> <asp:CustomValidator ID="CustomValidator1" runat="server" ControlToValidate="txtReqDate" ErrorMessage="Invalid Date"></asp:CustomValidator><br /><!-- Atlas popup control requires panel to function --> <%-- ID="Panel1" runat="server" style="visibility:hidden" CssClass="popupControl">--%> <asp:Panel ID="Panel1" runat="server" style="display:none"><!-- update panel controlled by scriptmanager and contains calendar which will be the "popup" linked to the textbox click--> <atlas:UpdatePanel ID="UpdatePanel1" runat="server" EnableViewState="true" Mode="Always" > <ContentTemplate> <center> <asp:Calendar ID="Calendar1" runat="server" BackColor="White" BorderColor="#999999" CellPadding="1" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" Width="160px" OnSelectionChanged="Calendar1_SelectionChanged"> <SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" /> <TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" /> <SelectorStyle BackColor="#CCCCCC" /> <WeekendDayStyle BackColor="#FFFFCC" /> <OtherMonthDayStyle ForeColor="#808080" /> <NextPrevStyle VerticalAlign="Bottom" /> <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" /> <TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" /> </asp:Calendar> </center> </ContentTemplate> </atlas:UpdatePanel> </asp:Panel> </td> <td style="vertical-align: top; text-align: left; width: 522px; font-weight: bold; text-transform: uppercase;"> POSTING DATE:<br /> <asp:TextBox ID="txtPostDate" runat="server"></asp:TextBox><asp:RequiredFieldValidator ID="rfvPostDate" runat="server" ControlToValidate="txtPostDate" ErrorMessage="Posting Date field must be completed">*</asp:RequiredFieldValidator> <asp:CustomValidator ID="CustomValidator2" runat="server" ControlToValidate="txtPostDate" ErrorMessage="Invalid Date" SetFocusOnError="True"></asp:CustomValidator><br /> <asp:Panel ID="Panel2" runat="server" style="visibility:hidden" CssClass="popupControl"> <atlas:UpdatePanel ID="UpdatePanel2" runat="server"> <ContentTemplate> <center> <asp:Calendar ID="Calendar2" runat="server" BackColor="White" BorderColor="#999999" CellPadding="1" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" Width="160px" OnSelectionChanged="Calendar2_SelectionChanged"> <SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" /> <TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" /> <SelectorStyle BackColor="#CCCCCC" /> <WeekendDayStyle BackColor="#FFFFCC" /> <OtherMonthDayStyle ForeColor="#808080" /> <NextPrevStyle VerticalAlign="Bottom" /> <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" /> <TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" /> </asp:Calendar> </center> </ContentTemplate> </atlas:UpdatePanel> </asp:Panel> </td> </tr> <tr> <%--inserted empty row for spacing--%> </tr>

here is the code behind:

using System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;using EDS.UK.AFPAA.CASS.JSAAC.UIP;using Microsoft.ApplicationBlocks.UIProcess;using AtlasControlToolkit;public partialclass ExistingCustomer : PageBase{protected void Page_Load(object sender, EventArgs e) { Master.NavigationEventHandler +=new Master.MenuResponseEvent(Master_MenuEvent); Master.GetMasterResultsPanel.Visible =false; }#region UIP Plumbingprivate ApplicantController myController {get {return (ApplicantController)this.Controller; } }#endregion protected void Calendar1_SelectionChanged(object sender, EventArgs e) {//// Popup result is the selected date linked to required date text box //PopupControlExtender.GetCurrent(this.Page).Commit(Calendar1.SelectedDate.ToShortDateString()); ////txtReqDate.Text = PopupControlExtender.GetCurrent(this.Page).Commit(Calendar1.SelectedDate.ToShortDateString()); Calendar cTemp = (Calendar)sender;this.txtReqDate.Text = cTemp.SelectedDate.ToShortDateString();//TextBox3.Text = cTemp.SelectedDate.ToShortDateString(); PopupControlExtender.GetCurrent(this.Page).Commit(cTemp.SelectedDate.ToShortDateString()); }protected void Calendar2_SelectionChanged(object sender, EventArgs e) {// Popup result is the selected date linked to posting date text box PopupControlExtender.GetCurrent(this.Page).Commit(Calendar2.SelectedDate.ToShortDateString());//txtReqDate.Text = Calendar1.SelectedDate.ToShortDateString(); }}

Both popups behave as I'd expect when I try with 60914. Please switch to that and give it another try. To upgrade, you should be able to install "over top of" a previous release. That may leave a couple of unnecessary files behind, but things should work just fine doing that. Let me know if 60914 doesn't solve the problem here!

i have downloaded 60914 but there is no atlas setup msi as per the july ctp. The only vsi i can find is for the extenders. When i run this i get installation errors. Do i just have to open and compile the solution and place the new dll's in my atlas project then run the new extender vsi's ??

Sorry im a little confused !!

Monday, March 26, 2012

Modal popup extender shows before page is done rendering ?

Hi

My page consists of a single linkbutton triggering the modal popup extender and a panel containing the popups controls. This is all working except one tiny thing, on each submit postback it quickly shows->hides the popup. How can I get rid of this problem?

"mpeProjects" runat="server"
TargetControlID="lbnProjects"
PopupControlID="pnlProjects"
DropShadow="false"
OkControlID="btnProjectsOK"
CancelControlID="btnProjectsCancel"
BackgroundCssClass="DialogPopupBackGround"
OnOkScript="onOK()"
>

 

Hi,

Please make sure you have the style attribute of the pnlProjects panel set to "display:none".

If you already have some value in the style attribute, just add the above at the end of the attribute value.

Kind regards,

sbogus.

Modal Popup Extender Repositionmode is not working correctly

Hello,

I have a modal popup that contains a form with a height that exceeds the screen size. When i try to scroll down the modal popup repositions itself so that i never can reach the bottom content. I have tried downloading the latest Ajax Control toolkit release (1.11119) and implemented the RepositionMode = "None" attribute but it still doesn't work. Anyone have any suggestions?

Thanks,

Tony

Hi Tcha143,

As far as I know, it is a known issue. We suggest that you should post it toCodePlex. We will mark it as "resolved" so our community members won't waste their time to reproduce your issues. Thanks for understanding.

Best regards,

Jonathan

Modal Popup Offset problem

Greetings,

Sorry to ask such a simple question, but my Modal Popup is working great except that it is popping up offset -- both the popup control and the background.

Are there any instances/tags that would "contain" the popup? I'm assuming this is more of an HTML problem, but assumed the "modal" part of the control would find the entire IE (6.0) window.

Ideas?

Thanks.

Dan

Figured it out myself -- I had the panel to be popped up inside another table, so the modal was acting "inside" that cell. Moved it to the bottom of the page and it works great.

Dan

Modal Popup not working in page inside Master Page

I followed the how-to example to create a page with modal popup and it works fine. However when put the same code in a page which is inside a master page, it seems not able to pick up the class attributes from style sheet which is located in root of the web. Is there any workarounds for this?

SLICan:

I followed the how-to example to create a page with modal popup and it works fine. However when put the same code in a page which is inside a master page, it seems not able to pick up the class attributes from style sheet which is located in root of the web. Is there any workarounds for this?

A liitle bit better now, after I made a copy of the style sheet from root to the folder where the aspx page resides, now I can see the requesting page dim-out and the pop up appears on the screen under two different scenarios:

(1) If I used default value(-1) for X, Y, left bottom portion of the pop up appears on the top right corner of the requesting page and button inside the popup is clickable.

(2) If I changed value of X, Y to something else, entire pop up appears in the center of the screen but is dim-out too. In addtion, if I specified drop shadow to true, then the shadow appears on the top right corner of the screen.

Can anyone help?


SLICan:

SLICan:

I followed the how-to example to create a page with modal popup and it works fine. However when put the same code in a page which is inside a master page, it seems not able to pick up the class attributes from style sheet which is located in root of the web. Is there any workarounds for this?

A liitle bit better now, after I made a copy of the style sheet from root to the folder where the aspx page resides, now I can see the requesting page dim-out and the pop up appears on the screen under two different scenarios:

(1) If I used default value(-1) for X, Y, left bottom portion of the pop up appears on the top right corner of the requesting page and button inside the popup is clickable.

(2) If I changed value of X, Y to something else, entire pop up appears in the center of the screen but is dim-out too. In addtion, if I specified drop shadow to true, then the shadow appears on the top right corner of the screen.

Can anyone help?

It's been discussed inhttp://www.codeplex.com/AtlasControlToolkit/WorkItem/View.aspx?WorkItemId=2939 but I don't understand exactly what need to be done. Can someone elaborate it?


I got this issue addressed. What I did was: (1) download AJAX contol toolkit with source, (2) change ModalPopupBehavior.js, (3) rebuild AJAX control toolkit and (4) reload the dll to my project.

Modal Popup Locks Up After Codeplex Upgrade

My modal popup quit working after I updated the Atlas Control Toolkit to60731 Production - 7/31/2006. Yes I'm at the latest version of Atlas also. My modal popup worked before, with the exception of the drowdownlist still being active and not grayed out. I was hoping that the newer version would fix this. Now when I click on the image control the dropdownlist controls disappear and thats it. Any help would be great....

Hi James,

In the latest update to the Toolkit the ModalPopup was extended to hide elements like<select> when it was displayed so they would not show through the transparent overlay (due to a bug in IE). It's supposed to be shown again as soon as the modal popup is completed. If that's not happening for you, could you provide more details about your situation?

Thanks,
Ted

I figured it out. My panel was inside a div tag. I was using this div tag to hide the panel like this<divstyle="display: none">. I Removed the div tag and added the style to the panel like this <asp:PanelID="PanelDate"runat="server"CssClass="modalPopup"style="display:none">. I do not know if this is a new but because it use to work the other way. Any how thanks for replying back.

modal popup problem

hi, im having a problem on this ajax toolkit, i tried to play around the sample website of modal popup, and its working great..but then, when i tried to put the codes inside my page, it doesn't work. i placed it inside the tabs (with hand coded values) and tried to run it, the values went blank, and the link does not appear. i placed it outside, the wholepage went blank.whats seems to be the problem? is it ok for me to put it inside another ajax control like tabs?if yes, how can i achieve this? here is my code by the way

this is inside the tabs

1<cc1:TabContainer ID="Tabs" runat="server" Height="500" ScrollBars="Auto">23 <cc1:TabPanel runat="Server" ID="Panel3" HeaderText="Payslip" >4 <ContentTemplate>5 Email: <asp:TextBox ID="emailText" runat="server" />6 <br /><br />7 <asp:Button ID="Button2" runat="Server" Text="Save" />8 <br /><br />910 <asp:LinkButton ID="LinkButton1" runat="server" Text="Click here to change the paragraph style" />1112 <asp:Panel ID="Panel1" runat="server" Style="display: none" CssClass="modalPopup">13 <asp:Panel ID="Panel3" runat="server" Style="cursor: move;background-color:#DDDDDD;border:solid 1px Gray;color:Black">14 <div>15 <p>Choose the paragraph style you would like:</p>16 </div>17 </asp:Panel>18 <div>19 <p>20 <input type="radio" name="Radio" id="RadioA" checked="checked"21 onclick="styleToSelect = 'sampleStyleA';" />22 <label for="RadioA" class="sampleStyleA"23 style="padding: 3px;">Sample paragraph text</label>24 </p>25 <p>26 <input type="radio" name="Radio" id="RadioB"27 onclick="styleToSelect = 'sampleStyleB';" />28 <label for="RadioB" class="sampleStyleB"29 style="padding: 3px;">Sample paragraph text</label>30 </p>31 <p>32 <input type="radio" name="Radio" id="RadioC"33 onclick="styleToSelect = 'sampleStyleC';" />34 <label for="RadioC" class="sampleStyleC"35 style="padding: 3px;">Sample paragraph text</label>36 </p>37 <p>38 <input type="radio" name="Radio" id="RadioD"39 onclick="styleToSelect = 'sampleStyleD';" />40 <label for="RadioD" class="sampleStyleD"41 style="padding: 3px;">Sample paragraph text</label>42 </p>43 <p style="text-align: center;">44 <asp:Button ID="OkButton" runat="server" Text="OK" />45 <asp:Button ID="CancelButton" runat="server" Text="Cancel" />46 </p>47 </div>48 </asp:Panel>4950 <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server"51 TargetControlID="LinkButton1"52 PopupControlID="Panel1"53 BackgroundCssClass="modalBackground"54 OkControlID="OkButton"55 CancelControlID="CancelButton"56 DropShadow="true"57 PopupDragHandleControlID="Panel3" />5859 Hit Save to cause a full postback.60 </ContentTemplate>61 </cc1:TabPanel>6263 <cc1:TabPanel runat="Server" ID="TabPanel1" HeaderText="Email" >64 <ContentTemplate>65 Email: <asp:TextBox ID="TextBox1" runat="server" />66 <br /><br />67 <asp:Button ID="Button4" runat="Server" Text="Save" />68 <br /><br />69 Hit Save to cause a full postback.70 </ContentTemplate>71 </cc1:TabPanel>7273 <cc1:TabPanel runat="Server" ID="TabPanel2" HeaderText="Email" >74 <ContentTemplate>75 Email: <asp:TextBox ID="TextBox2" runat="server" />76 <br /><br />77 <asp:Button ID="Button5" runat="Server" Text="Save" />78 <br /><br />79 Hit Save to cause a full postback.80 </ContentTemplate>81 </cc1:TabPanel>8283 <cc1:TabPanel runat="Server" ID="TabPanel3" HeaderText="Email" >84 <ContentTemplate>85 Email: <asp:TextBox ID="TextBox3" runat="server" />86 <br /><br />87 <asp:Button ID="Button6" runat="Server" Text="Save" />88 <br /><br />89 Hit Save to cause a full postback.90 </ContentTemplate>91 </cc1:TabPanel>92 </cc1:TabContainer>

Hi,

Please try to remove theDropShadow="true" in the ModalPopupExtender.

Saturday, March 24, 2012

Modal Popup questions...

Hi there, i am using the modal popup and a couple of things i am trying to do arent quite working.

I have the a panel for my modal popup and an update panel within the panel...i am planning to have a multiview inside this updatepanel but...

1. How can i make the TargetControl still post back (to do some binding on the panel and get the correct view.).
2. I have the OK button on the panel posting back which is fine, i have removed the OKButton property, when not in an update panel the whole page posts back and page reset...however i dont want the whole page to post back...only the panel. So how can i clear the background style of modal popup so things are clickable again?
I can see my other updatepanels refreshing as i want when OK is clicked and the modal popup panel goes away but the background style stays...

Thanks

Steve

I think if i can remove the background style from js that will be number 2 done....any ideas?

for number 1:
i added some js to force postback

var postBack =new Sys.WebForms.PostBackAction();

postBack.set_target("ctl00_MainContentHolder_btnAccAdd");

postBack.set_eventArgument('');

postBack.performAction();

but the modal panel disappears and the background style is still there...although i was just hoping for the update panel within the modal panel to postback, wasnt expecting it to affect the modal panel.


Hi Steve,

It's not quite as simple as changing the background style. What we do is place a transparent div on top of all your controls (making them unclickable) as well as hide certain controls (like drop down lists) that show through this transparent div.

I really don't understand what you're asking here though. Why is your OK button (the thing that should close the modal popup) trying to update the popup instead? Perhaps you could provide a little more background information.

Thanks,
Ted

Hi Ted, thanks for posting.

Apologies for taking a long time to reply...i have been away for a couple of days (however i thought i activated email notification...clearly not!)

I have been having a play with the js code and taken some/added my own to do what i want to do.... before Atlas control kit i really knew diddley squat about js so its great to be able to learn from your stuff... :-)
What i meant by my OK button...i wanted the ok button to postback as if it were a normal button so it could update other updatepanels on the page (behind the background div), the only time it would postback was to postback the whole page and so rendering the popup as display=none again.
I also wanted serveral buttons on the page to popup the same modal panel showing different index on the multiview...thats why i wanted the TargetControl to post back.

Now i have my own js file...i have a couple of probelms
i am trying to get the drop shadow to work, i have copied the exact code from the toolkit but i get an object required error, i have this at the top of my file, Type.registerNamespace('AtlasControlToolkit'); is there something else I need to do for this code
_dropShadowBehavior = new AtlasControlToolkit.DropShadowBehavior(); to work??


Thanks
Steve


Hi Steve,

I think for your OK button the answer is to wrap it in anUpdatePanel. Any server side handler for it will still fire, and any updates you do to other content in otherUpdatePanels will be applied as well (i.e. if you update one of them, you're actually updating all of them). To get several buttons to open the sameModalPopup and have the contents of that popup determined by the button that launched it is a little tricker. The easiest solution is to create seperate popups. A slightly harder solution (but with less duplicated markup) would be to have each button's onclick handler prepare any expected content in the ModalPopup. I'm not terribly sure if you can get away with this using aMultiView though because it might not dump out all the markup for its views to the client. The slightly-harder-but-most-appropriate-for-your-situation solution is as follows:
1. Put an<asp:Button ... /> on your form withStyle='display: none;' to create a hidden button that gets sent to the client
2. Use that hidden button as the target control for yourModalPopup
3. Set anID="SomeID" on yourModalPopupProperties
4. Create regular server side handlers for all the buttons you want to launch the popup (making sure they're wrapped in anUpdatePanel of course)
5. In each of those server side handlers, get theMultiView all setup for that button
6. UseRegisterStartupScript to force yourModalPopup to display (using something like$object('SomeID')._show();)
There are examples of step 6 in otherforum posts, and we're also looking at ways to make it a lot easier to show/hide aModalPopup from the server for an upcoming release.

As for theType.registerNamespace('...') blowing up, that sounds like the "Atlas" libraries haven't been included first. Are you including your custom script at the top of the page? If so, the proper way to include a custom "Atlas" script like that is to add a reference as a child of yourScriptManager.

Thanks,
Ted


Hi Steve,

There are a lot of people trying to do the same thing withModalPopup, so I thought I'd create a sample (since those steps 1-6 aren't the clearest things in the world to follow). Unfortunately after talking with David (theModalPopup expert... and author, for that matter), the approach I described doesn't really work when you're inside anUpdatePanel. TheRegisterStartupScript code you send down will be run before everything's been set up properly... so to get it working we'll use the same approach but not actually show the popup until theUpdatePanel says it's done with the partial postback (I actually left in the old approach too, should anyone looking at this want to use it without anUpdatePanel - it's the script that is sent down ifScriptManager.IsInPartialRenderMode == false) by hooking into itspropertyChanged event. Here's a full example showing what to do:

<%@. 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"><script runat="server"> private void Button1_OnClick(object sender, EventArgs args) { Content.Text = "I was setup by Button1!"; ShowModalPopup(); } private void Button2_OnClick(object sender, EventArgs args) { Content.Text = "I was setup by Button2!"; ShowModalPopup(); } private void ShowModalPopup() { ModalPopupProperties popup = MyModalExtender.GetTargetProperties(Target); if (popup != null) { string script = ScriptManager.IsInPartialRenderingMode ? string.Format("showModalPopup('{0}', '{1}');", ScriptManager.PageRequestManagerID, popup.ID) : string.Format("function pageLoad() {{ var modal = $object('{0}'); if (modal) {{ modal._show(); }} }}", popup.ID); Page.ClientScript.RegisterStartupScript(typeof(ModalPopupExtender), "open", script, true); } }</script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>ModalPopup Demo</title> <style type="text/css"> .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> <script language="javascript" type="text/javascript"> var showPopupHandler = null; function showModalPopup(pageRequestManagerID, popupID) { var pageRequestManager = $object(pageRequestManagerID); if (pageRequestManager) { var onUpdatePanelPropertyChanged = function(sender, eventArgs) { if ((eventArgs.get_propertyName() == "inPostBack") && !pageRequestManager.get_inPostBack()) { var modal = $object(popupID); if (modal) modal._show(); pageRequestManager.propertyChanged.remove(showPopupHandler); showPopupHandler = null; } }; showPopupHandler = Function.createDelegate(this, onUpdatePanelPropertyChanged); pageRequestManager.propertyChanged.add(showPopupHandler); } } </script> <atlas:ScriptManager ID="ScriptManager" runat="server" EnablePartialRendering="true" /> <atlas:UpdatePanel ID="Update" runat="server" Mode="Always"> <ContentTemplate> <asp:Panel ID="Popup" runat="server" CssClass="modalPopup" style="display: none"> <asp:Label ID="Content" runat="server" Text="Original Content" /><br /> <asp:Button ID="OK" runat="Server" Text="OK" /> <asp:Button ID="Cancel" runat="Server" Text="Cancel" /> </asp:Panel> <asp:Button ID="Target" runat="server" style="display: none" /> <asp:Button ID="Button1" runat="server" Text="Button 1" OnClick="Button1_OnClick" /><br /> <asp:Button ID="Button2" runat="server" Text="Button 2" OnClick="Button2_OnClick" /><br /> <atlasToolkit:ModalPopupExtender ID="MyModalExtender" runat="server"> <atlasToolkit:ModalPopupProperties ID="MyPopup" TargetControlID="Target" PopupControlID="Popup" BackgroundCssClass="modalBackground" DropShadow="true" OkControlID="Ok" CancelControlID="Cancel" /> </atlasToolkit:ModalPopupExtender> </ContentTemplate> </atlas:UpdatePanel></div></form></body></html>
Again, we're looking at making this a LOT easier with updates in our next release.

Thanks,
Ted


I get this error on the line containing this information.

Page.ClientScript.RegisterStartupScript(typeof(ModalPopupExtender),"open", script,true)

This is the error message.

Error 'ModalPopupExtender' is a type and cannot be used as an expression. c:\inetpub\wwwroot\XX\SecurityTest.aspx.vb 25 60

Any ideas?
Thanks


Here you go Greg

Page.ClientScript.RegisterStartupScript(ModalPopupExtender.GetType,"open", script,True)


Thanks Michael worked perfectly.

And thanks Ted for the example you are a life saver.

-Greg


Thanks Ted.

Thats just what i was after....thanks for the time put in to resolve this.

Again apologies for the delay...my email notification clearly isn't working.

Steve


Is it possible to keep the modal popup open when clicking 'ok'

I have a validation control in the popup panel and would like to display the error message in the modal popup if a textbox value is not ok.

The user will then be able to correct the input.

thanks


Hi everyone,

Thenewest release of the Toolkit (now available on CodePlex) allows you to show/hide from the server using the following:

 ModalPopupProperties popup = MyModalExtender.GetTargetProperties(MyControl);if (popup !=null) popup.Show();// Or call popup.Hide();

Thanks,
Ted


Hi RolfN,

I'd recommend you just have a seperate button (possibly hidden usingstyle='visibility: hidden;') as your OK button and then just a regular button with "OK" as its text. You can then call.click() on the real button client side or.Hide() on yourModalPopupProperties server side.

Thanks,
Ted

Hi!

Scenario:
A user choose a row in gridview and gets details from det row in a formview in modalpopup.

I tried to put the codelines above in my code like this:

protectedvoid gridview_SelectedIndexChanged(object sender,EventArgs e)
{
ModalPopupProperties popup = ModalPopupExtender1.GetTargetProperties(up1);
if (popup !=null)
popup.Show();// Or call popup.Hide();
}
Up1 is a updatepanel that surrounds the gridview.

Problem is that the modal popup triggers on every event on the gridview.
eg. when I sort.

thanks


Hi santon,

I don't think this is a bug because sorting does change the selected index. For an example of how to useModalPopup in aGridView, take a look at David'sblog post.

Thanks,
Ted

Modal window with update panel stops working after its shown and hidden once

I'm having some trouble with the modal window tool. It behaves perfectly the first time i show it, and the first time I hide it, then although the updatepanel postback behaviour still works (and the text field in the example below is still updated) the modal window doesn't fire the onOkScript or hide as it does the firsttime.

Does anyone have any ideas?

<div><asp:LinkButtonID="lbCommunityProfile"runat="server">Community Profile</asp:LinkButton></div><atlas:UpdatePanelID="updatePanel2"runat="server"Mode="Always"><ContentTemplate><asp:LabelID="lTest"runat="server"Text="NoneSet"></asp:Label></ContentTemplate></atlas:UpdatePanel><atlasToolkit:ModalPopupExtenderID="ModalPopupExtender1"runat="server"><atlasToolkit:ModalPopupPropertiesTargetControlID="lbCommunityProfile"PopupControlID="Panel1"BackgroundCssClass="modalBackground"DropShadow="true"OkControlID="OkButton"onOkScript="__doPostBack('ctl00$ContentPlaceHolder$lbCommunityProfile','');alert('go');"CancelControlID="CancelButton"/></atlasToolkit:ModalPopupExtender><asp:PanelID="Panel1"CssClass="modalPopup"runat="server"><atlas:UpdatePanelID="updatePanel1"runat="server"Mode="Conditional"><ContentTemplate>

This is panel 1

<asp:TextBoxID="tbTest"runat="server"></asp:TextBox><asp:ButtonID="OkButton"runat="server"Text="OK"OnClick="OkButton_Click"UseSubmitBehavior="false"></asp:Button><asp:ButtonID="CancelButton"runat="server"Text="Cancel"></asp:Button></ContentTemplate></atlas:UpdatePanel></asp:Panel>

and in the aspx.cs file

protectedvoid OkButton_Click(object sender,EventArgs e)

{

string str = tbTest.Text;

lTest.Text =

"set" + tbTest.Text +"end";

}

Also just wondering what the javascript is to close a modal window. I understand you can use the ok and cancel buttons. I'd like to have a x in the top right of my window and have that close.


Is this with the June CTP of Atlas?
yes the most recent ctp

yes the july ctp


The June CTP is currently (this may change very soon) the most recent Atlas release. It has a problem whereby UpdatePanel updates under Firefox break all extenders. It sounds like you're hitting this problem. Atlas is aware of it and should have a new release out soon to correct the problem. Thanks for your patience!

Just wondering if any progress has been made on this topic?


The July CTP of Atlas fixes the problem mentioned above.
I am experiencing this problem with the July CTP. Appears to notnecessarilybe fixed. I've got a lot of other things goin on in the same page... I'm going to try and issolate the issue.

Wednesday, March 21, 2012

modalpopup & OnClick

I’ve been experimenting with AJAX for our Weather Web Site and I ran into a road block. I'm working with the modalpopup and hovermenu controls. I have an imagebutton that when clicked, opens the modalpopup. However, it also has an onClick call to a method in the C# code. Unfortunately, this method is never called because of the modalpopup.

Here’s the code where I create the button:

<asp:ImageButtonID="fireweatherten"runat="server"ImageUrl="images/bullseye.jpg"Height="18"Width="21"OnClick="fireweatherten_Click"/>

Here’s the code where I create the modalpopup:

<cc1:ModalPopupExtenderID="MPE1"runat="server">

<cc1:ModalPopupPropertiesTargetControlID="fireweatherten"PopupControlID="weather"CancelControlID="close"BackgroundCssClass="modalBackground"DropShadow="true"/>

</cc1:ModalPopupExtender>

Here’s the code where I create the hovermenu:

<cc1:HoverMenuExtenderID="HME1"runat="server">

<cc1:HoverMenuPropertiesTargetControlID="fireweatherten"HoverCssClass="popupHover"PopupControlID="popupMenuTen"PopupPosition="Bottom"PopDelay="25"/>

</cc1:HoverMenuExtender>

Basically, when the button is pushed, it should call the method (fireweatherten_Click) and the dataset from this call should be displayed on the modalpopup panel. If I delete the modalpopup code, the method is called and runs perfectly (it just doesn’t have anywhere to display the data). However, if I leave the modalpopup code, the method is never called and I get a blank panel displayed. Any help would be appreciated.

Thanks,

Luis

I think this post may help:http://forums.asp.net/ShowPost.aspx?PostID=1379165

David,

Thanks for the reply, but I'm actually trying to activate a click event for the same button that launches the modalpopup; not the click event for a button on the modalpopup. Let me explain...I am trying to allow users to fill in search information in various fields in a panel. When they click the search button, I need to take these field values and search my database. Then, rather than opening a new page to display the search results, I want to display them in the modalpopup.

Unfortunately, when I click the search button, the "onsearch_click" event in the code behind my page is never called. Instead, the modalpopup displays a blank results page. If I delete the modalpopup extender, my "onsearch_click" is called with no problem. So my current issue deals with calling a usual asp:button onclick event before the modalpopup is displayed. I've seen other questions about this so far in other groups, but not many answers yet. Any ideas?

Thanks,

Luis


Here is what I did. I added another button and htmlinputhidden.

<asp:Button ID="btnPopup1" runat="server" Text="Popup" OnClientClick="javascript:PopupOrder(); return true;" /><input type="hidden" runat="server" id="hidOrderFlag" value="0" /><input type="button" id="btnPopup2" runat="server" style="display:none;" /><cc1:ModalPopupExtenderID="ModalPopupExtender1" TargetControlID="btnPopupOrder" PopupControlID="pnlOrder" runat="server" BackgroundCssClass="modalBackground" ></cc1:ModalPopupExtender>
 <script type="text/javascript">function PopupOrder(){ setInterval('Popup()', 100);}function Popup(str){flag = document.getElementById('hidOrderFlag');if (flag){if (flag.value == '1'){document.getElementById('btnPopup2').click();flag.value = '0';}}}</script>

Code Behind:

Protected Sub btnPopup1_Click(ByVal senderAs Object,ByVal eAs System.EventArgs)Handles btnPopup1.Click'show grouped materials 'Do something to populate data to controls in modal popup hidOrderFlag.Value ="1"End Sub

Hope it helps.


Here is what I did. I added another button and htmlinputhidden.

<asp:Button ID="btnPopup1" runat="server" Text="Popup" OnClientClick="javascript:PopupOrder(); return true;" /><input type="hidden" runat="server" id="hidOrderFlag" value="0" /><input type="button" id="btnPopup2" runat="server" style="display:none;" /><cc1:ModalPopupExtenderID="ModalPopupExtender1" TargetControlID="btnPopup2" PopupControlID="pnl" runat="server" BackgroundCssClass="modalBackground" ></cc1:ModalPopupExtender>
 <script type="text/javascript">function PopupOrder(){ setInterval('Popup()', 100);}function Popup(str){flag = document.getElementById('hidOrderFlag');if (flag){if (flag.value == '1'){document.getElementById('btnPopup2').click();flag.value = '0';}}}</script>

Code Behind:

Protected Sub btnPopup1_Click(ByVal senderAs Object,ByVal eAs System.EventArgs)Handles btnPopup1.Click
 'Do something to populate data to controls in modal popup hidOrderFlag.Value ="1"End Sub

Hope it helps.


Thanks...I'll try this.

Luis

modalPopup _show() and $object(modalPopupExtndr).set_OnOkScript(script()) not working with

Over the last few days I have upgraded to the beta 1 and the latest ajaxControlToolkit...Now my modalPopup no longer works and I have been trying to figure a work around for the last day or so. I am using the code located athttp://www.geekzilla.co.uk/ViewDAAE6AAB-0369-45C2-BE78-B8E6F876B4F4.htm but now that <atlasToolkit:ModalPopupProperties no longer exists I am at ends trying to call the _show() method using the $object('modalPopupExtndr')._show() b/c i get a null error. I will post my exact code if needed, but it is a basic modalPopup...any ideas?


Thanks,
Greg

Quote from the migration guide... (http://blogs.msdn.com/sburke/archive/2006/10/20/atlas-control-toolkit-ajax-control-toolkit-migration-guide.aspx)

The$('...') alias fordocument.getElementById('...') has been changed to$get('...'). The$object('...') alias forSys.Application.findControl('...') has also been changed to$find('...'). See PopupControlBehavior.js:52.

It looks like you should try $find('modalPopupExtndr')._show()

Good Luck.


Referenced here too...

http://ajax.asp.net/ajaxtoolkit/Walkthrough/AtlasToAspNetAjax.aspx


Thanks for the reply but I think the problem is deeper than just changing it from object to find. I didn't change object to find b/c in the AspNet Ajax CTP to Beta Whitepaper doc I quote this from it: "In the CTP release, you could use the $object('GoShopping') construct to reference a component created as a result of xml-script. The Value-add release will continue to support this alias." Since I am using the Value-add I figured I would not need to change ojbect to find. However changing object to find did help solve one of my issues. The above quote can be found at this link:http://ajax.asp.net/files/AspNet_AJAX_CTP_to_Beta_Whitepaper.doc

Here is my code and it is erroring in the ShowMessageBox javaScript function on the $object('MsgBoxExtndrProps')._show(); call and I tried using find but that didnt work either. notice though that $object('MsgBoxExtndrProps')._hide(); works fine when I want to close the modalPopup...any ideas??:

<div id="MsgBoxDialog" class="MessageBox" style='display: none;'>
<div id="MsgBoxDialogHeader" class="PopupDialogHeader">
<img id="MsgBoxDialogCloser" class="PopupDialogCloser" alt="Close" onclick="$object('MsgBoxExtndrProps')._hide();"
src="http://pics.10026.com/?src=../Images/Closer.jpg" />
<span id="MsgBoxDialogTitle" class="PopupDialogTitle"></span>
</div>
<div id="MsgBoxDialogContent" class="MessageBoxContent">
<div id="MsgBoxQuestion" class="MessageBoxQuestion">
</div>
<div id="msgBoxButtons" class="MessageBoxButtons">
<input id="btnConfirm" type="button" value="Yes" />
<input id="btnNoConfirm" type="button" value="Cancel" />
</div>
</div>
</div>
<div style='display: none; visibility: hidden;'>
<asp:Button runat="server" ID="btnHidden" />
</div>
<ajaxToolkit:ModalPopupExtender
ID="MsgBoxExtndr" runat="server"
TargetControlID="btnHidden" PopupControlID="MsgBoxDialog"
BackgroundCssClass="modalBackground" DropShadow="true"
OkControlID="btnConfirm" OnOkScript="onOk()"
CancelControlID="btnNoConfirm" BehaviorID="MsgBoxExtndrProps">
</ajaxToolkit:ModalPopupExtender>

<script type="text/javascript">

var msgBoxQuestion; // content of the tskDlgDiv
var msgBoxTitle; // Title of the task dialog

InitMsgBox();

function InitMsgBox()
{
msgBoxQuestion = new Sys.Preview.UI.Label($get("MsgBoxQuestion"));
msgBoxQuestion.initialize();

msgBoxTitle = new Sys.Preview.UI.Label($get("MsgBoxDialogTitle"));
msgBoxTitle.initialize();
}

/*
When the user is about to make a significant change
this is used as a confirmation...if they answer yes, then
the command param is executed.
*/
function ShowMessageBox(title, question, command)
{
msgBoxTitle.set_text(title); // set the title of the messageBox
msgBoxQuestion.set_text(question); // Ask the question to the user
$find('MsgBoxExtndrProps').set_OnOkScript(command); // If they answer yes, execute this command
$object('MsgBoxExtndrProps')._show(); // try find or object and it does not work...however $object('MsgBoxExtndrProps')._hide(); works fine??
}
function onOk() { return true; }
</script>


Try this...

I changed this line...

$object('MsgBoxExtndrProps')._show();

to...

var popUp = $find('MsgBoxExtndrProps');
popUp.show();

and it popped the window.


Bravo Todd...It worked like a champ.

I just made it $find('MsgBoxExtndrProps').show(); and it worked without creating the extra var. It is strange how the _hide() works but the _show() doesn't...strange.

ModalPopup and ASP:Panel

Hi

I've used a modalpopup to display an asp:panel which is working fine. The problem is the panel briefly flashes on the page then disappears. I don't want this. I can gewt rid of this effect if I set the panel visible property to false but then the popup wont work, if it's true then it does work.

Can anyone tell me why or how to get around it

Cheers
Jon

Hello Jon,

I am having the same problem with other Toolkit controls. It seems to be a small thing but it gets annoying! There must be something simple to stop this behaviour.

The only comparison between us is the panel. I wonder if it is something to do with the panel and the toolkit. If i find anything then I will let you know.

Sorry I am not replying with an answer but I think it is good to find someone else with the same problem.


Hello John,

I have found the answer for my problem so hopefully it will help you. I had a thought that i hadn't seen this behaviour in the toolkit live samples so had a look at the sample website code for my specific component and it looks like you need to put the following into your panels CSS or in the style:

<asp:panel id="panTest"style="display:none; visibility:hidden;"

It has worked from me and now I cannot see an annoying flash :)

I hope it works for you.


Hello again,

Actually you cannot add it to a stylesheet. It has to be added directly to the panel on the page for it to work. I added it to the stylesheet and it would not show the panel at all.


I was not able to get it to work when style includes visibility:hidden

<asp:Panelrunat="server"ID="Panel1"CssClass="modalPopup"style="display:none;visibility:hidden;">

But this worked

<asp:Panelrunat="server"ID="Panel1"CssClass="modalPopup"style="display:none;">


Thanks Guys! Had the same problem and this solved it.


Thanks! I have solved it!