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 TargetControlID set to a control from within a DataGrid?

Can someone please tell me how to set the ModalPopupExtender TargetControlID property to an ImageButton control that is part of a template column of a DataGrid? The designer doesn't allow me to set it to the required control, and when I set it in the .aspx source I get a run-time error.

Thanks...

Hi,

Would you please post some code,so I can reproduce the problem and resolve it more quickly?

Thanks

A bit too much code to post. I have an ImageButton inside an DataGrid template column. The DataGrid is in a table. Outside the table I have a Panel and ModalPopupExtender, but I can't set it's TargetControlID to the ImageButton. I can set it to other ImageButtons in the table.

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