Search code examples
c#asp.netgridviewasp.net-ajaxupdatepanel

Update Panel is not working in Edit Button in Gridview inside UserControl


In my Usercontrol page, update panel is not working in gridview. I used the following methods but nothing worked. Can any one please help me out.

Method 1:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
<div id="gvClaimMasterDiv" runat="server" style="overflow: auto; height: 550px; margin: 0 auto; width:950px; border: 1px thin blue">
    <asp:GridView ID="gvClaimMaster" runat="server"  AllowSorting="True"  ShowFooter="True" GridLines="Vertical" Width="950px"
            Font-Size="Small" Font-Names="Calibri" CellPadding="4" AutoGenerateColumns="False" EmptyDataText="No Records Found" ForeColor="#333333"
            OnSelectedIndexChanged="gvClaimMaster_SelectedIndexChanged" DataKeyNames="ClaimMasterId, AllocationId"
            OnRowDataBound="gvClaimMaster_RowDataBound" OnRowEditing="gvClaimMaster_RowEditing" OnRowCancelingEdit="gvClaimMaster_RowCancelingEdit"
            OnRowUpdating="gvClaimMaster_RowUpdating" OnDataBound="gvClaimMaster_DataBound"      >
<Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:ImageButton ID="EditBtn" CommandName="Edit" runat="server" 
                            ImageUrl="~/Img1/edit.gif" ToolTip="Edit Chart# / Claim#" Height="20px" Width="20px" />
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:ImageButton ID="UpdateBtn" CommandName="Update" runat="server"
                            ImageUrl="~/Img1/save.gif" ToolTip="Save" Height="20px" Width="20px" />
                        <asp:ImageButton ID="CancelBtn" CommandName="Cancel" runat="server"
                            ImageUrl="~/Img1/cancel.gif" ToolTip="Cancel" Height="20px" Width="20px" />
                    </EditItemTemplate>
                </asp:TemplateField>

</Columns>

        </asp:GridView>
    <p></p>
    </div>
        </ContentTemplate>
    </asp:UpdatePanel>

Method: 2

I used the UpdateMode="Conditional" like below

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<Triggers>
    <asp:AsyncPostBackTrigger ControlID="gvClaimMaster" />
</Triggers>

Method: 3

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="gvClaimMaster" EventName="RowEditing" />
    </Triggers>

Method: 4 Changed the UpdateMode into Always and removed the Triggers

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always" ChildrenAsTriggers="true">

Method: 5 Given the update panel inside the ItemTemplate

            <ItemTemplate>
                <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="EditBtn" EventName="Click" />
                    </Triggers>
                    <ContentTemplate>
                <asp:ImageButton ID="EditBtn" CommandName="Edit" runat="server" 
                    ImageUrl="~/Img1/edit.gif" ToolTip="Edit Chart# / Claim#" Height="20px" Width="20px" />
                        </ContentTemplate>
                    </asp:UpdatePanel>
            </ItemTemplate>

Solution

  • Finally I have identified the issue - Conflicts between ASP.NET AJAX UpdatePanels & jQuery functions. Thanks to Hajan Selmani and his post.

    ModalPopupExtender blocks the UpdatePanel function. So I removed the popup script from aspx page and added it in the codebehind in Page_Load as below

    ClientScript.RegisterClientScriptInclude(this.GetType(), "myScript", "Style/gvAJAX/popup.js");