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