I have a Gridview within an UpdatePanel that shows some data from my Database. When you click on an edit button, it opens up a detailsView within a ModalPopupextender. When you enter in data in the textBoxes in this detailView and click “update”, the Database is updated but the popup does not hide. Then, when I close it manually by clicking “close”, the gridView does not refresh unless I refresh the page. I was able to get this to work before, but after spending a week staring at this problem, I decided to ask you guys to see what I am doing wrong.
Here’s some code! (Note: a lot of this is an adaptation of a tutorial I found)
<asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="gvReservations" runat="server" CssClass="datagrid" DataKeyNames="dateSubmit"
AutoGenerateColumns="false" AllowPaging="true" AllowSorting="true" PageSize="10"
DataSourceID="mainTable" Width="95%" OnRowUpdated="gvReservation_RowUpdated" OnRowDataBound="OnRowDataBound" OnSelectedIndexChanged="GvReservations_SelectedIndexChanged">
<Columns>
<asp:BoundField DataField="dateSubmit" HeaderText="Date Submitted" SortExpression="dateSubmit"
ReadOnly="true" />
<asp:BoundField DataField="lName" HeaderText="Name" SortExpression="lName" ReadOnly="true" />
<asp:BoundField DataField="startTime" HeaderText="Start Time" SortExpression="startTime"
ReadOnly="true" />
<asp:BoundField DataField="endTime" HeaderText="End Time" SortExpression="endTime"
ReadOnly="true" />
<asp:BoundField DataField="labName" HeaderText="Lab" SortExpression="labName" ReadOnly="true" />
<asp:BoundField DataField="class" HeaderText="Class" SortExpression="class" ReadOnly="true" />
<asp:BoundField DataField="term" HeaderText="Semester" SortExpression="term" ReadOnly="true" />
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="btnViewDetails" runat="server" Text="more" CommandName="Select" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Panel ID="pnlPopup" runat="server" CssClass="detail" Width="500px" Style="display: none;">
<asp:UpdatePanel ID="updPnlReservationDetail" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="btnShowPopup" runat="server" Style="display: none" />
<ajaxToolkit:ModalPopupExtender ID="mdlPopup" runat="server" TargetControlID="btnShowPopup"
PopupControlID="pnlPopup" CancelControlID="btnClose" BackgroundCssClass="modalBackground" />
<asp:DetailsView ID="dvReservationDetail" runat="server" DataSourceID="SqlDetail"
OnDataBound="ReservationDetail_DataBound" CssClass="detailgrid" GridLines="None" DefaultMode="Edit" AutoGenerateRows="false"
Visible="false" Width="100%" OnItemUpdating="ReservationDetail_Updating" OnItemUpdated="ReservationDetail_Updated">
<Fields>
<asp:TemplateField HeaderText="ID">
<EditItemTemplate>
<asp:TextBox ID="tbID" runat="server" Text='<%# Bind("id") %>' ReadOnly="true" />
</EditItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="LabName" DataField="labName" />
<asp:BoundField HeaderText="DateSubmitted" DataField="dateSubmit" />
<asp:TemplateField HeaderText="Start Time">
<EditItemTemplate>
<asp:TextBox ID="startTime" runat="server" Text='<%# Bind("startTime") %>' />
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="End Time">
<EditItemTemplate>
<asp:TextBox ID="endTime" runat="server" Text='<%# Bind("endTime") %>' />
</EditItemTemplate>
</asp:TemplateField>
<asp:CommandField ShowEditButton="true" />
</Fields>
</asp:DetailsView>
<div class="footer">
<asp:LinkButton ID="btnClose" runat="server" Text="Close" CausesValidation="false" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
These are the events where I thought it would close the popup and update the gridView
protected void ReservationDetail_Updated(object sender, DetailsViewUpdatedEventArgs e)
{
if (this.Page.IsValid)
{
// move the data back to the data object
// this.dvReservationDetail.UpdateItem(false);
dvReservationDetail.Visible = false;
// hide the modal popup
mdlPopup.Hide();
// refresh the grid
this.gvReservations.DataBind();
this.updatePanel.Update();
}
}
Thanks for the help!
try to use single update panel on page
place all controls inside it.