CalendarExtender: popup

Showing posts with label popup. Show all posts

Monday, March 26, 2012

Call Server Side Function before showing Modal Popup

I m showing Modal Popup on click of Edit Link Button of Datagrid.

Now when Link button is clicked I want to show the values of that particular row in Modal Popup.

This has to be done at server side as it would be updation of row and it has dropdown which has to be filled at server side..

So plz help ..

Below i m attaching the code:

<%@dotnet.itags.org.PageLanguage="VB"AutoEventWireup="false"CodeFile="ModalPopUp_In_Datagrid.aspx.vb"Inherits="ModalPopUp_In_Datagrid" %>

<%@dotnet.itags.org.RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="cc1" %>

<!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>Untitled Page</title>

<scripttype="text/javascript"language="javascript">

function shopModalPopup(employeeID){

//show the ModalPopupExtender

$get("<%=Label1.ClientID %>").value = employeeID;returnfalse;

}

</script>

<styletype="text/css">

.modalBackground

{

background-color:#000;

-moz-opacity:0.7;

opacity:.70;filter:alpha(opacity=70);

}

</style>

</head>

<body>

<formid="form1"runat="server">

<div>

<asp:ScriptManagerID="ScriptManager1"runat="server">

</asp:ScriptManager>

</div>

<asp:PanelID="Panel1"runat="server"Height="50px"Width="125px">

<asp:GridViewID="GV1"runat="server"AutoGenerateColumns="False"DataKeyNames="RID">

<asp:BoundFieldDataField="rid"HeaderText="rid"/>

<asp:BoundFieldDataField="name"HeaderText="Name"/>

<asp:TemplateField>

<cc1:ModalPopupExtender ID="ModalPopupExtender2" runat="server" PopupControlID="popupPanel"
OkControlID="btnOk" CancelControlID="btnCancel" BackgroundCssClass="modalBackground" TargetControlID="lnkPopup">
</cc1:ModalPopupExtender>

<asp:LinkButtonrunat="server"Text="Popup"CommandName="EditRow"CausesValidation="false"ID="lnkPopup"OnCommand="lnkPopup_Command"></asp:LinkButton>

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

</asp:Panel>

<asp:PanelID="popupPanel"runat="server"Height="50px"Width="125px">

Click To Display Authors Name:

<asp:LabelID="Label1"runat="server"></asp:Label>

<br/>

<asp:ButtonID="btnOk"runat="server"Text="OK"/>

<asp:ButtonID="btnCancel"runat="server"Text="Cancel"/>

</asp:Panel>

<br/>

</form>

</body>

</html>

Hi Varun,

Please don't attach a hidden Control(visible= false) to your ModalPopupExtender or it won't work because no Dom element generate to the client. Also don't put $get function before ScriptManager. Here is the sample , please pay attention to the "Bold" part.

<%@. Page Language="VB" %><%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> Sub fill_values() Label1.Text = "a" End Sub Protected Sub GV1_RowCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) If e.CommandName = "EditRow" Then fill_values() ModalPopupExtender2.Show() End If End Sub</script><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title>Untitled Page</title> <style type="text/css"> .modalBackground { background-color:Gray; filter:alpha(opacity=70); opacity:0.7; } .modalPopup { background-color:#FFD9D5; border-width:3px; border-style:solid; border-color:Gray; padding:3px; width:250px; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px"> <asp:GridView ID="GV1" runat="server" AutoGenerateColumns="False" DataKeyNames="EmployeeID" DataSourceID="SqlDataSource1" AllowPaging="True" onrowcommand="GV1_RowCommand" > <Columns> <asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" /> <asp:BoundField DataField="LastName" HeaderText="LastName" /> <asp:BoundField DataField="FirstName" HeaderText="FirstName" /> <asp:BoundField DataField="Title" HeaderText="Title" /> <asp:TemplateField> <ItemTemplate> <asp:LinkButton runat="server" Text="Popup" CommandName="EditRow" CausesValidation="false" ID="lnkPopup"></asp:LinkButton> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NORTHWNDConnectionString%>" SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [Title] FROM [Employees]"></asp:SqlDataSource> </asp:Panel> <asp:Panel ID="popupPanel" runat="server" CssClass="modalPopup" Height="200px" Width="200px" style="display:none"> Click To Display Authors Name: <asp:Label ID="Label1" runat="server"></asp:Label> <asp:Button ID="btnShowAuthorName" runat="server" Text="Show Author's Name" OnClientClick="getName(); return false;"></asp:Button><br /> <asp:Label ID="lblAuthorsName" runat="server" BackColor="Beige" ForeColor="Red"></asp:Label> <br /> <br /> <asp:Button ID="btnOk" runat="server" Text="OK" /> <asp:Button ID="btnCancel" runat="server" Text="Cancel" /> </asp:Panel><cc1:ModalPopupExtender ID="ModalPopupExtender2" runat="server" PopupControlID="popupPanel" BackgroundCssClass="modalBackground" TargetControlID="Label2" CancelControlID="btnCancel" OkControlID="btnOk"> </cc1:ModalPopupExtender> <div style="display:none"> <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label></div> <script type="text/javascript" language="javascript">function getName(){ var labelValue = $get("<%=Label1.ClientID%>").innerHTML; } </script> </form></body></html>

Best regards,

Jonathan

Hi Varun,

Here is another sample which won't postback when click to show the ModalPopupExtender.

<%@. Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<script runat="server"
protected void Page_Load(object sender, EventArgs e)
{
//Attach a Javascript funtion to the LinkButton.
LinkButton myLinkButton;
for (int i = 0; i < GridView1.Rows.Count; i++)
{
myLinkButton = (LinkButton)GridView1.Rows[i].Cells[4].FindControl("LinkButton1");
myLinkButton.Attributes.Add("onclick", "shopModalPopup('" + GridView1.Rows[i].Cells[0].Text + "');return false;");
}
}
</script
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style>
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}

.modalPopup {
background-color:#FFD9D5;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
width:250px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="EmployeeID"
DataSourceID="SqlDataSource1">
<Columns>
<asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" InsertVisible="False"
ReadOnly="True" SortExpression="EmployeeID" ItemStyle-Width="0" />
<asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" />
<asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" />
<asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" />
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server">Click On Me</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NORTHWNDConnectionString%>"
SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [Title] FROM [Employees]">
</asp:SqlDataSource>
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Height="200px" Width="300px" style="display:none">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
EmployeeID:<asp:TextBox ID="tbEmployeeID" runat="server"></asp:TextBox> <br/>
Reason:<asp:TextBox ID="tbReason" runat="server"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="btnCancel" runat="server" Text="Cancel" />
</asp:Panel>
<div style="display: none">
<asp:Button ID="Button1" runat="server" Text="Button" /></div>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button1"
PopupControlID="Panel1" CancelControlID="btnCancel" BackgroundCssClass="modalBackground">
</ajaxToolkit:ModalPopupExtender>
<script type="text/javascript" language="javascript">
function shopModalPopup(employeeID){
//show the ModalPopupExtender
$get("<%=tbEmployeeID.ClientID%>").value = employeeID;
$get("<%=tbReason.ClientID%>").value ="";
$find("<%=ModalPopupExtender1.ClientID%>").show();
}
</script>
</form>
</body>
</html>

Best regards,

Jonathan

Call Modal Popup from Javascript

Is it possible to call the Modal Popup from the client side (javascript)? If so what is the code required to do this?Got my answer here: http://damianblog.com/2007/02/28/calling-extenders-from-js/

Hey Chris,

I wrote about this quite some time ago.

Heres a link

http://blogs.msdn.com/phaniraj/archive/2007/02/20/show-and-hide-modalpopupextender-from-javascript.aspx

Hope this helps

Saturday, March 24, 2012

call Function after modalPopup

I need some advice on how to call functions after a modalPopup is shown.

I am using the modalpopup1.show() method to show the popup window. However, the prolem I am having is the popup is not visible until it reaches the end of the routine.

example: The Button1.Click event calls the modalpopup1.show() method:

Private Sub Button1_Click(ByVal Sender... etc... .etc...)
DoSomeThings()

modalPopup1.Show() -- a textbox is filled based on what the user selects from the modalPopup Window, and that value is sent to a function

DoSomeMoreThings(textBox.text)

Sub

The problem is that the DoSomeMoreThings(string) function is called before the ModalPopup window appears, so when the DoSomeMOreThings() Function is called, the textbox is empty (The textbox is filled by the value selected by the user in the modalpopup)

How i get the popupt to show, get the value and then continue?

Thanks

Not sure if this will help you or not, but you can use JavaScript's setTimeout(...) to delay the call to "DoSomeMoreThings"

-Damien

Hi,

Put a button 'Continue' in your modal popup. Let user hit this button after he complete input for textBox.text. Then in OnClick event of 'Continue' button call your function.

Maybe I mis-understand, but I don't think so because I need the modalPopup to pop, get the user selection and then procede to the DoSomeMoreThings.

One think I thought of was to call the function from the client. But i'm not sure how to call a function in the code behind page from the client. Is this possible?

Just to clarify: The application does not stop at the modalPopup.show() method and wait for a response.

So, lets say i've got three button in the ModalPopup window: Button1, Button2, Button3.

If you click Button1, then, back in the main page, the textbox fills with Button1. Etc... for Button2, Button3.

Then, a function is called to set the text of a label to what you selected:

ModalPopup.Show()

GetLabelText(TextBox1.text)

Sub GetlabelText(ByVal str as String)
label1.text = "You Selected " & Str
End Sub

What is happening is when I run it, and say, click button 1, the page displays Button1 in the textbox, and the Label says "You Selected ". How can I make it wait after the modalPopup.Show() until the user makes a selection, before continuing on to GetLabelText()?

I'm sorry, but I really don't understand what you are trying to do. Can't you just call ModalPopup.Show() on the onchange or onblur of the TextBox?

-Damien

Or do it as Viktar suggested, call GetLabelText method in the onclick event handler of Button1, 2, 3.

I've run into this, and worked around it, by putting the content of the modal popup inside an updatepanel, and forcing a .Update() on it before you DoSomeMoreThings(textbox.text).. That way, you will get the new textbox value.

call codebehind onclick function from modal popup

My modal popup extender pops up an asp:panel that has a couple asp:textbox'es and an OK asp:button that I designate as the OKControlID. I've implemented a javascript function called OnOK() that's designated as the OnOkScript in my control extender, and also implemented a Button_Click function for the OK Button in my page codehind. How do I get the codebehind function to get called. My code calls the onOK script and stops.

Thanks!

Short answer:

You can't. The behavior adds a handler for the click event of the button which executes the OnOkScript(). This prevents a postback from occurring, and a postback is what you need to occur in order to call your code behind function.

Long answer: If you use the property "EnablePageMethods='true'" in your script manager, and assign [WebMethod] attribute to your codebehind, you can call that codebehind method from your JS OnOK function.

LSU:

Tried leaving a message for you on your listed website, but it

doesn't allow anonymous comments, and I didn't want to have to

an MPE.show in my code behind trying to get the MPE to

display as a result of running code, (not a button click) and

get a runtime error.."cmdDelete already has a data item registered."

VS2005 Pro has no problem with the code..am I using it out of

context?..what am I doing wrong?..

Thanks..

LSU.Net:
Short answer:
You can't. The behavior adds a handler for the click event of the button which executes the OnOkScript(). This prevents a postback from occurring, and a postback is what you need to occur in order to call your code behind function.
Long answer: If you use the property "EnablePageMethods='true'" in your script manager, and assign [WebMethod] attribute to your codebehind, you can call that codebehind method from your JS OnOK function.

Haha! Both answers looked "short" to me. Big Smile
It may not work for the poster's case since the CodeBehind is a WebMethod hence static method which is independent from the page object concept and so if there're reference to the page's objects in the code-behind it'll fail. For the original poster, you may have to "cheat" your way to get it to work. Please see this threadhttp://forums.asp.net/thread/1669503.aspx . I hope there'll be support from AJAX client side or we may have to extend the ModalPopup extender. Big Smile

G20:

Thanks for your input ! I haven't had time to read /absorb the details of the

link yet, but will today. George Bernard Shaw said:

"Science is always wrong. It never answers one question without asking

10 more."

Themodal.hide works fine from the code behind.

Themodal.Show is syntactically acceptable in the code behind,

but doesn't. Why? Where is it used? What is it supposed to do?

.Show works fine in my VB / Access apps (ha ha!)

Seriously, I've been looking for a comprehensive source for

the props & methods of AJAX controls..with examples, like

MSDN would be awesome. Then I could be self -reliant.

Any help there?

yeah i have the same problem as you.

I need to fire/call the modalpopup when there is a textchanged event in a textbox.

I have tried everything i can think of jscript wise.

I also dont' get why the modalpopupextender1.show() isn't working...

If you get this figured out could you please post it ? Ill do the same if i can figure it out.

Thanks

CalendarExtenter in a modal popup shows transparent

Hello,

i try to use a calendar extender inside a panle that is shown as a modal dialog using a modal popup extender. When the calendar pops up the displayed caledar is shown transparent (it has no background) and no animations are shown when switching between months.

Using the same outside a modal popup shows the calendar as usual.

Is a caledarextender not supposed to be used inside a modal popup?

Thanks in advance,

Ralf

This sounds like an issue we were having.

When you run the page, check the HTML source for a tag that looks like this:

If there is no reference made to WebResource, try putting another CalendarExtender control outside of the panel. This should force ASP.NET to add the reference.

Let me know what happens,
FB

I've looked at over a dozen suggestions to fix this issue. Finally you have the one that works. You are great! Thanks!

CalendarExtender: Popup does not go over elements with overflow:hidden

I've run into a problem whereby the calendar will not appear over html elements with overflow:hidden applied to them. This occurs in FireFox and Opera

Here's the code to replicate it:

<!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>Untitled Page</title> <style type="text/css"> div.row { background-color: #f7f7f7; margin: 0 0 10px 0; overflow: hidden; padding: 4px 0; zoom: 1; } div.row span { float: left; text-align: left; width: 200px; } div.row .controlGroup { width: 300px; float: left; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <div class="row"> <asp:Label ID="Label1" Text="Date" runat="server" /> <div class="controlGroup"> <asp:TextBox ID="DateTextBox" runat="server" /> <ajaxToolkit:CalendarExtender ID="CalendarExtender1" TargetControlID="DateTextBox" runat="server" /> </div> </div> <div class="row"> <asp:Label ID="Label2" Text="Text" runat="server" /> <div class="controlGroup"> <asp:TextBox ID="Test6TextBox" runat="server" /> </div> </div> </form></body></html>

Bump, can anyone help on this one, i've tried setting the z-index on the ajax calendar to no avail.

I've managed to fix this issue in Opera with the following, still doesn't show correctly in FireFox though

.ajax__calendar div
{
z-index: 100;
}

Can anyone help on this one, still can't get the Calendar to display correctly in FireFox
Last bump!
This problem also exists on the AutoCompleteExtender

Wednesday, March 21, 2012

CalendarExtender positioning problem in wide gridview

Hey all, I place a textbox and a calendarextender within an edititemtemplate of a gridview. Everything works fine, but the calendar popup always appears in the same place regardless of the column. In other words, I have 23 columns in a gridview. If I have calendar extenders in there for columns 3, 9, and 23 the popups always appear at the same place instead of right next to their associated textbox. I can't figure out how to get them to stay put. There's no funky CSS issues here. I'm not absolute positioning anything. Thoughts?

Behold an example:

<asp:TemplateFieldHeaderText="Offload"SortExpression="OFFLOAD"HeaderStyle-BackColor="#87CEEB">

ItemTemplate>

<asp:LabelID="lblOFFLOAD"runat="server"Text='<%#Bind("OFFLOAD","{0:d}")%>'Width="70px"/></ItemTemplate><EditItemTemplate><asp:TextBoxID="txtOFFLOAD"runat="server"Text='<%#Bind("OFFLOAD","{0:d}")%>' /><cc1:CalendarExtenderID="CalOFFLOAD"runat="server"TargetControlID="txtOFFLOAD"/></EditItemTemplate></asp:TemplateField>Anyone? Help!
Anyone? Help! Please? :)

It seems I'm having the same problem you are. I guess we are the only ones with this problem because I can't seem to find an answer anywhere and no one has a solution. If you can find out anything please post a reply with the solution and I will do the same.

Thanks,

Mike

CalendarExtender popup out of position in IE7

Here is the object with its CalendarExtender attached:

When i click on the textbox the calendar pops up high up on the page. This seems to only happen when the page has a scroll bar. I have tried setting the PopupPosition to no avail. I also tried the stylesheet approach:

.CalendarExtender

{

z-index :1001;

}

to no avail as well. When i check this in FireFox all is well.

Any help would be appreciated.

Thanks!

That's pretty odd. I have an idea that there's some broken tag in the html somewhere though. Check the page for invalid HTML in Visual Studio as well as in the browser. IE handles broken tables in an... interesting... manner.

No broken HTML that i can see. This is a page with 6 AJAX tabs on it. All the other tabs work fine, dont have to scroll to see all information, even the date field at the top of this "contacts" tabs works properly.

I am having this problem on a gridview as well. if the gridview requires scrolling and the control to be updated is a little more than a page down and is clicked the calendar pops up on the top of the screen. grrrr... this isnt really a deal breaker for the application, i'm just a stickler for detail.

I feel your pain... I'm just the same when it comes to details...

Try removing the styling from the td to see if that has any affect.

Also, I'd like to see a test like this without a table. Just text & paragraph tags that take up a few pages with textbox's & calendarextenders scattered throughout. I wonder if you'd see this problem without the table. Gridviews also render as tables, so this would be a good experiment.

Also try on a page with _nothing_ else. Stick a really long gridview on a simple ASPX page and put a calendarextender in it to see if you have the same problem.

What version of the toolkit are you using?

Taking out the formatting did nothing. Same thing without table and only <p> tags. *sigh

i am thinking this is just something weird with IE7.

Toolkit version 10920.

Well on the upside this isn't your fault.

Yea that's a real pain. It's obviously an IE7/AJAX Toolkit quirk. I suppose you could a) put up with it b) use a third party control c) submit a bug & wait d) see if you can fix the bug yourself and submit a patch ;)