Use UpdatePanel with GridView

Question

I have a masterpage with a sidebar that conatians an accordion control for site navigation. On one of my child forms I have added a GridView inside an UpdatePanel. This user starts a job via a button click. This job writes to a database table and I'll like to see this updates presented via the Grid view. I've added a timer control with an ontick event that executes GridView.DataBind.

The GridView data is refreshed on each tick (2 seconds), the problem is that the whole page (including the master page) received a postback - causing the selected panel of my accordion control to be reset.

I've not used the UpdatePanel control before but I'd hoped that this prevent the full page postback. I guess I've configured something incorrectly. I've pasted the div containing the Panel and GridView below. Could anyone tell me what I've done wrong?

Thanks

Rob.

<div id="statusGrid">
    <u>Job Status</u>
    <br />
    <asp:UpdatePanel ID="StatusUpdatePanel" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <asp:GridView ID="grdJobStatus" runat="server" DataSourceId="sqlJobStatus">
                <FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" />
                <HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" />
                <PagerStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" HorizontalAlign="Right" />
                <RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" />
                <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="#F7F7F7" />
            </asp:GridView>
            <asp:SqlDataSource ID="sqlJobStatus" runat="server" ConnectionString="<%$ ConnectionStrings:ARC_CTRLConnectionString %>">
            </asp:SqlDataSource>
        </ContentTemplate>
    </asp:UpdatePanel>


    <asp:Label ID="lblBODIJobMsg" runat="server"></asp:Label>
</div>

Answer 1

Only the elements inside the UpdatePanel will be updated on a partial postback - were you expecting lblBODIJobMsg to be updated?

See also what @ck said about other changes from you code-behind.

You might also want to check other javascript and ASP.Net elements on the page. I've had occasions where the whole page would postback due to a DropDownList that was in an `UpdatePanel.

Where is your timer? depending on how you implemented it, it might post the whole page. Perhaps it needs to be inside the UpdatePanel too?

Answer 2

The Page_Load event is fired as part of the AJAX postback. If this has any side-affecting changes then the whole page will be reloaded.

Answer 3

In your page_load you need to check for IsPostBack. Something like this

protected void Page_Load(object sender, EventArgs e)
{
   if(IsPostBack) return;
   //do first-time load stuff here
}

Also, where is the button that starts the job? It should be inside your update panel as well.

Answer 4

The timer does not have to be in the update panel, it could also be set as a trigger for the update panel even if it's outside. Such as:

<Triggers>
      <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />

</Triggers>