PostBack Whole Page Using GridView Itemtemplate Control Inside UpdatePanel

Introduction

When we try to Postback whole page with postback control under GridView inside UpdatePanel, we get some trouble. In this tip, I am going to give the solution for this. This is to make a page postback work for the control click event even a control is in gridview inside update panel.

Background

As we know, UpdatePanel performs a partial-page update that means refresh selected part of the page instead of refreshing the whole page.

By default, any postback control inside UpdatePanel causes asynchronous postback. We can also configure other control on the page to refresh UpdatePanel using triggers. Triggers have 2 child node as:

1.<asp:AsyncPostBackTrigger ControlID="string" EventName="string"/>

2.<asp:PostBackTrigger ControlID="string"/>

Using this Code

When we try to Postback whole page with postback control under GridView inside UpdatePanel, we get some trouble. Let us have one button inside GridView under UpdatePanel and a label in invisible mode outside UpdatePanel in which we want to display the value of GridView column and make it visible after button click. For this, we have to create OnClick of that button.

<asp:ScriptManager ID="src" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="Panel1" runat="server">
     <ContentTemplate>
         <asp:GridView ID="Grid1" 
         runat="server" AutoGenerateColumns="false">
             <Columns>
                <asp:BoundField DataField="Name" HeaderText="Name" />
                <asp:TemplateField HeaderText="Postback Page">
                  <ItemTemplate>
                    <asp:Button ID="buttonid" 
                    Text="Click Me" 
                    runat="server" onclick="buttonid_Click" />
                  </ItemTemplate>
                </asp:TemplateField>
              </Columns>
          </asp:GridView>
      </ContentTemplate>
</asp:UpdatePanel>
<asp:Label ID="tbl" runat="server"></asp:Label>

It gets executed, but not showing the result we need. So what do we do next, let us add trigger with PostBack.

<Triggers>
    <asp:PostBackTrigger ControlID="buttonid" />
</Triggers>

But it will show error (because the control is inside GridView).

" A control with ID "buttonid" could not be found for the trigger in UpdatePanel 'UpdatePanel1' " .

Points of Interest

So what we need to do is add control to trigger collection in code behind. For this, we need to registerpostback of that control like:

protected void registerpostback()
{
    foreach(GridviewRow gr in Grid1.Rows) // Grid1 -- Gridview ID
      {
          Button b =gr.FindControl("buttonid") as Button;                                                         this.src.RegisterPostBackControl(b); // src -- ScriptManager ID
      }
}

Call this function on page_load():

protected void Page_Load(object sender, EventArgs e)
        {
            if(!IsPostBack)
            {
                //Bind your Grid..
            }
            this.registerpostback();
        }