Clear gridview results from screen and display progress update message during full postback

See more:

C#

ASP.NET

Javascript

WebForms

, +

Hello guys,
Does anyone have any suggestions for immediately clearing previous gridview results from the screen and displaying a processing message when performing button click event as full postback?

ASP.NET 4.5 C# Webforms site with master page.
I'm using the fileupload control which requires a full postback. The asyncfileupload control is not a good fit for my project.

Asyncpostback breaks fileupload.
I'm able to get the processing message to display by pointing OnClientClick to a javascript function. I'm able to get the gridview results to clear by creating a hidden button and using javascript to perform the click also from OnClientClick.
However, I cannot get these two javascript commands to run together. The gridview does clear, but I only see the processing message for a split second before it disappears even when the main button click event is still running in the background. I have tried both sleep and settimeout between the two javascript commands, but that prevents the processing message from displaying at all. Below is what I have been experimenting with, any help is appreciated. Thanks!

Hidden button click event to clear gridview.

protected void clearGridView_Click(object sender, EventArgs e)
        {
            this.resultsGridView.DataSource = null;
            this.resultsGridView.DataBind();
        }

GridView update panel

<asp:UpdatePanel ID="gridviewUpdatePanel" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <asp:button runat="server" id="clearGridView" class="hiddenSendButton" onclick="clearGridView_Click" style="visibility:hidden" />
            <div class="row">
                <div class="span12 pagination-centered">
                    <asp:GridView ID="resultsGridView" runat="server" GridLines="None" AllowPaging="false" CssClass="table table-hover table-striped" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt" AllowSorting="true" OnSorting="resultsGridView_Sorting"></asp:GridView>
                </div>
            </div>
        </ContentTemplate>
        <triggers>
            <asp:AsyncPostBackTrigger ControlID="clearGridView" />
        </triggers>
    </asp:UpdatePanel>

Execute button

<asp:UpdatePanel ID="executeUpdatePanel" runat="server" UpdateMode="Conditional">
                    <ContentTemplate>
                        <div  runat="server" id="executeDiv" class="control-group">
                            <label class="control-label"></label>
                            <div class="controls">
                                <asp:Button id="executeButton" runat="server" text="Execute" OnClick="executeButton_Click" OnClientClick="ShowProgress();" name="executeButton" class="btn btn-primary"/>
                            </div>
                        </div>
                    </ContentTemplate>
                    <Triggers>
                        <asp:PostBackTrigger ControlID="executeButton" />
                    </Triggers>
                </asp:UpdatePanel>

Javascript

<script type="text/javascript">
    function ShowProgress() {
        document.getElementById('<%= clearGridView.ClientID %>').click();
        //sleep(500)
        //setTimeout(check, 1000);
        document.getElementById('<% Response.Write(processingUpdateProgress.ClientID); %>').style.display = "inline";
    }
</script>

Progress Update panel

<pre lang="HTML">
    <div class="row">
        <div class="span12 pagination-centered">
            <asp:UpdateProgress ID="processingUpdateProgress" AssociatedUpdatePanelID="executeUpdatePanel" runat="server">
                <ProgressTemplate>
                    <img alt="progressing" src="../Content/Images/processing.gif" />
                    Processing...
                </ProgressTemplate>
            </asp:UpdateProgress>
        </div>
    </div>