Modal Popup awith datagrid

I m using Button click to show Datagrid.

When Button is clicked Modal popup appears showing updating as status for 4 secs..and side by side in server side Datagrid is filled.

Now the issue is that Modal up Appears for 4 sec but Datagrid is not displayed.

Query for Fetching the data from Database is running Fine and do bind the data to Data grid but grid is not displayed.

I have update Panel where i put Button (To be clicked),Update Progress and Modal Popup

I have not put Datagrid in Update Panel.

Can this be problem??

Yes you might be right. Try by putting the DataGrid inside the UpdatePanel. And for more details can you post your code, so that it will be easy to diagnolise the problem.

Hi Varun,

In your situation, when click on the Button which is inside the UpdatePanel , it will post all the elements back to the server and returns all to the client but only refresh the content which is inside the UpdatePanel. So you should put the DataGrid inside the UpdatePanel. My suggestion is when updating shows UpdateProgress and when it finished ,we force the ModalPopupExtender to be shown.The DataGrid is moved into the Panel which is associated with ModalPopupExtender.

For example:

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

function EndRequestHandler(sender, args){
$find("ModalPopupExtender's BehaviorID").show();

}

Best regards,

Jonathan

modal popup and update panel

hi there, i have a login button that when it is clicked, the modal popup will trigger and was able to logon to the system. the page has two link buttons, when i click on the 2nd link, the update panel will display the items assiciated with that link, and when i click on the 1st link, the update panel will display the items associated to the 1st link, its lakie i have a tabs..the problem is, when i added the modal popup on that page, and clicked on the 2nd link, it will not display the items of that link, i mean, it will not trigger any event at all...but when i remove the modal popup extender on that link, it will toggle..what am i missing here??please help.

thank you .

Can you show me some code so that I can reproduce it?

Modal Popup events?

Okay I call a modal popup in my page and then reposition the popup to appear over the elemnt clicked using the $get, getlocation and setLocation in the AJAX library - however inside my modal popup I have an update panel that updates the contents based on selecting a link button in the popup - when the popup returns the new content it automatically recenters itself like it reinitalizes

My question is is there a event or method that I cna use to repostion my popup after this happens or is there a way to prevent it from doing this?

TIA

The update panel should be inside the modal popup not embedding it so that only that markup(the link button and the content) is refreshed and the entire modal popup is not re-rendered. Could you post a small code snippet that demonstrates what you are doing?

the update panel is inside the modal popup (it doesnt work otherwise i found) when the content in side that update panel is refresehed the modal popup is not rerendered (that i can see) but it moves to its centered position

my code to move the modal popup is this javascript

1<script>2function pageLoad()3{4 var popup = $find('dnn_LOGIN1_ModalPopupExtender');5popup.add_shown(SetFocus);6}7function SetFocus()8{9var login_button = $get('dnn_LOGIN1_hypLogin');10var loginscreen = $get('dnn_LOGIN1_Panel1');11var position = Sys.UI.DomElement.getLocation(login_button);12Sys.UI.DomElement.setLocation(loginscreen,position.x-170,position.y+12);13$get('dnn_LOGIN1_txtUsername').focus();14}15</script>

(is that enough?)

TIA

Modal Popup Extender - Setting Focus

Hi,

I have HostModalPopup.aspx webform with a ShowModalWindow button (When clicked shows a Modal Popup Window) and there are some text boxes after the button.

The Modal Pop Up window has 3 controls: a text box field, a submit button and a close button.

1) When the Modal Popup window is shown, I would like to be able to setfocus to the textbox. I thought I should be able to do this with document.getElementById('TextBox1').focus() on some event that gets triggered when the modal popup window is made visible, but I could not find any such DHTML event.

2) The taborder/tabindex of the controls in HostModalPopup.aspx, once the ShowModalWindow is opened and closed, no longer works. If I set the focus to one of the textboxes and hit tab the cursor goes to address bar instead of going to a textbox with next tabindex. I am using AJAX Control Kit verion 1.0.10606.0

Any help is greatly appreciated.

- Surya

Use ScriptManager1.SetFocus(TextBox1)

http://www.asp.net/AJAX/Documentation/Live/mref/O_T_System_Web_UI_ScriptManager_SetFocus.aspx

http://msdn2.microsoft.com/en-us/e04ah0f4

Thank you guys!

The ScriptManager.SetFocus did it for the first issue.

-Surya

Modal Popup Extender and Page Refresh ?

I use Modal Popup Extender and there are two buttons, login button and cancel button...Everytime any of the buttons are clicked whole page is refreshed. I want to stop that for cancel button, but don't know how that will work for login as I want some underlying events to happen when that is clicked.

How can I achieve the above functionality ?

Wrap the modalpopup in an updatepanel to take advantage of partial postbacks. You can also assign the cancel button as the cancelcontrolid of the modalpopup so that it will close the popup using JS without a postback.

Modal popup is not modal

Hi!

My modal popup doesnt seem to be modal: see the code below. Everything works fine, but when popup appears link behind still can be clicked... What's missing?

<%@dotnet.itags.org. Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><%@dotnet.itags.org. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="AjaxToolkit" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <div> <asp:Button ID="btnShowPopup" Text="ShowPopup" runat="server" /> <a href="http://www.google.com">Some link</a> <br /> <div id="divPopup" runat="server" style="background-color:Silver; width:500px; height:300px;"> <div id="divHeader" runat="server" style="background-color:Lime"> Header </div> <br /> Some popup content <br /> <asp:Button runat="server" ID="btnOK" Text="OK" /> </div> </div> <AjaxToolkit:ModalPopupExtender runat="server" ID="extPopup" TargetControlID="btnShowPopup" PopupControlID="divPopup" OkControlID="btnOK" PopupDragHandleControlID="divHeader" /> </form></body></html>

PawelRoman:

My modal popup doesnt seem to be modal: see the code below. Everything works fine, but when popup appears link behind still can be clicked... What's missing?

So your issue isn't with anything pertaining to the ModalPopupExtender, but rather with your CSS. Basically, you don't have any CSS. You need to set theBackgroundCssClass attribute on the ModalPopupExtender. Then, you'll need to add that CssClass using inline CSS or using a stylesheet. The CssClass must contain a background definition (background-color or background-image).

Modal popup in tabs

Hi Im trying to use a modal popup in my project.

Im generating a bunch of control on my form and some of them (buttons) when clicked should open a modalpopup and on okclick store some info in a db

the problem Im having is that when I am not in the tab with the button that will make the popup open, I see the popup, but when im inside the right tab popup disapear and I can't seem to make it appear.

second problem Im having is that I can't seem to find a way for having multiple button to open the same popup.

hmm Now the modal popup is always shown. maybe its a properpy of the target control or of the popup?
Here is the code

<ajaxToolkit:ModalPopupExtenderID="MPE"runat="server"

BackgroundCssClass="modalBackground"

TargetControlID="test"

PopupControlID="PanelAddLine"

DropShadow="true"

OkControlID="SavePrice"

CancelControlID="CancelButton"

>

</ajaxToolkit:ModalPopupExtender>

<asp:PanelID="PanelAddLine"runat="server"CssClass="modal">

Enter the number of Days<br/>

<asp:TextBoxID="TextBoxNbDays"runat="server"></asp:TextBox><br/>

<asp:ButtonID="SavePrice"runat="server"OnClick="SavePrice_Click"Text="Add"OnClientClick="AfterAdd()"/>

</asp:Panel>

<asp:HiddenFieldrunat="server"ID="test"Value="a"Visible="false"/>

well im not sure about the tabbing problem because im to busy right now to try to replicate it myselft, but i think i know whats going on with the problem you have trying to open the same modal popup from different buttons. The targetControlID for a modal popup lets you set a button to open the popup, but because you want more then one button to you should do the following
* Create a hidden field and assign its ID as the targetControlID for the modal popup
* Now for each button you have that you want to open the modalPopup, create an eventhandler for the button with this code inside(example further down)

modalPopup1.Show();

* to programmatically add the event for the button do this

myButton.Click += new EventHandler(this.myButton_Click);

* and then write the click function that will be called due to the above code

private void myButton_Click(object sender, EventArgs e)
{
modalPopup1.Show();
}

thats weird, i guess i cant be much more help, i love doing stuff programatically in C# to im not great with the aspx file sytax when stuff like this happens :(

could it be just a question of css?

Do I have to set special value to my css to make the modal popup work.

Can a master page could possibly be reason for this

Wookie:

hmm Now the modal popup is always shown.

I think you need to call MPE.Hide(); in the server side click event handler of the save button.

Also, don't specify OkControlID="SavePrice"

ModalPopup add rows to datagrid

I am trying to have a ModalPopupExtender when a button is clicked on the main page. On the popup, a user can enter a couple of peices of information and click the add button. I have that part working, but I am trying to make it more dynamic. Does anyone know how to make it so:

1) The popup doesn't disppear after clicking the add button, so the user can add more than one row without having to click the button on the main page

2) The datagrid is updated withwout postback

I have tried using the UpdatePanel, but I keep geeting an error message: An extender can't be in a different UpdatePanel than the control it extends.

Here is my code from the page:

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

</asp:ScriptManager>

<table><tr><td><asp:ButtonID="ButtonAddItem"runat="server"Text="Button"/></td></tr>

<tr><td>

<asp:DataGridID="DataGridTemplate"runat="server"AutoGenerateColumns=falseDataKeyField="ItemID"BorderStyle=NoneBorderWidth=0>

<Columns>

<asp:BoundColumnDataField="ItemDescr"></asp:BoundColumn>

<asp:BoundColumnDataField="TimeFrame"></asp:BoundColumn>

</Columns>

</asp:DataGrid>

</td></tr></table>

<asp:PanelID="PanelAddTemplateItem"runat="server"style="display:none;"CssClass="modalPopup">

<table>

<tr><tdcolspan=2>Add Line Item</td></tr>

<tr><td>Line Item:</td><td><asp:TextBoxID="TextBoxAddTemplate"runat="server"TextMode=MultiLine></asp:TextBox></td></tr>

<tr><td>Time Frame:</td><td><asp:TextBoxID="TextBoxAddTemplateTime"runat="server"></asp:TextBox></td></tr>

<tr><tdcolspan=2><asp:LabelID="LabelAddTemplate"runat="server"></asp:Label></td></tr>

<tr><td><asp:ButtonID="ButtonAddTemplate"runat="server"Text="Add"/></td><td><asp:ButtonID="ButtonAddTemplateOK"runat=serverText="finished"/></td></tr>

</table>

</asp:Panel>

<ajaxToolkit:ModalPopupExtenderID="ModalPopupExtenderAddTemplateLine"runat="server"TargetControlID="ButtonAddItem"PopupControlID="PanelAddTemplateItem"CancelControlID="ButtonAddTemplateOK"BackgroundCssClass="modalBackground"DropShadow=true>

</ajaxToolkit:ModalPopupExtender>

I was able to figure out my first problem by putting the updatepanel inside the asp:panel that the modalpopupextender displays. However, I still cannot seem to figure out how to update the datagrid. Is it possible to update the grid on-screen without a postback? Thanks!

Hi Briancostea,

I think you should add another UpdatePanel to your page and remove the DataGrid into the newly added UpdatePanel.So now there are two UpdatePanels. When we add new records, one UpdatePanel will be postback and add data to Database or somewhere else and next the another UpdatePanel will be refreshed. To refresh the UpdatePanel's content , please use add these code to your page.

 <script type="text/javascript" language="javascript"> var eventButton; Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler); Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); function BeginRequestHandler(sender, args){ eventButton=args.get_postBackElement().id } function EndRequestHandler(sender, args){ if(eventButton =="Button1" ){ //refresh UpdatePanel2 by using __doPostBack() state. } } </script>

I hope this help.

Best regards,

Jonathan