Problems with Partial Page rendering on initial page load

1. Checkbox list - Items get selected on page load based on selected values in Session object.
2. Submit button
3. GridView - The parameters for the query come from the selected values in Session object. It is bound to an ObjectDataSource (BL layer).
4. Update Panel - The GridView is inside the UpdatePanel and is triggered on Click event of the Submit button.
5. UpdatePanelAnimationExtender to show 'loading' animation.

On Page Load
1. The Checkbox gets populated
2. The GridView query is populated based on the parameters from Session object.

On Submit
1. The user checks a couple of more items and hits submit.
2. The Session object gets updated with the new selected values.
3. The GridView query is executed.
4. The UpdatePanel gets triggered on the Submit button click action.
5. The UpdatePanelAnimationExtender triggers the javascript and displays the loading gif.

The problem is that I am not able to successfully implement the partial rendering technique on Page Load. The Page Loads completely only after the GridView is loaded.

How can I :
1. Load everything except the GridView on initial page load
2. Trigger the GriView load and show the animation.

Any help is appreciated.

Here's the code snippet for all the aspx object:

<asp:CheckBoxList ID="chkClientList" runat="server" AutoPostBack="False" DataSourceID="ObjectDataSource1"
                DataTextField="Client_Acct" DataValueField="Client_Acct"
                RepeatColumns="10" RepeatDirection="Horizontal"
                OnSelectedIndexChanged="chkClientList_SelectedIndexChanged"
                OnDataBound="chkClientList_DataBound">
            </asp:CheckBoxList>


    <div style="overflow:scroll;height:85%;border:1px solid;width:" id="divGrid">
       <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:GridView ID="GridView1" runat="server" DataSourceID="ObjectDataSource3"
                    AllowPaging="True" AllowSorting="True" SkinID="gridView">
                </asp:GridView>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="btnSearch" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>
    </div>




  <asp:ObjectDataSource ID="ObjectDataSource3" runat="server"
        SelectMethod="GetData" TypeName="DataBL">
        <SelectParameters>
            <asp:SessionParameter Name="sessionData" SessionField="SESSION_SESSIONDATA"
                Type="Object" />
        </SelectParameters>
    </asp:ObjectDataSource>


   <cc1:UpdatePanelAnimationExtender ID="upae" BehaviorID="animation" runat="server" TargetControlID="updatePanel1">
        <Animations>
            <OnUpdating>
                <Parallel duration="0">
                    <%-- place the update progress div over the gridview control --%>
                    <ScriptAction Script="onUpdating();" />
                    <FadeOut MinimumOpacity=".5" />
                 </Parallel>
            </OnUpdating>
            <OnUpdated>
                <Parallel duration="0">
                    <%--find the update progress div and place it over the gridview control--%>
                    <ScriptAction Script="onUpdated();" />
                    <FadeIn MinimumOpacity=".5" />
                </Parallel>
            </OnUpdated>
        </Animations>
    </cc1:UpdatePanelAnimationExtender>
    <div id="updateProgressDiv" style="display:none; position:absolute;">
        <span style="color:#fff; margin:3px">
            <asp:UpdateProgress ID="UpdateProgress2" runat="server">
                <ProgressTemplate>
                    <asp:Image ID="Image2" runat="server" ImageUrl="~/Images/loader.gif" />
                        Loading...
                </ProgressTemplate>
            </asp:UpdateProgress>
        </span>
    </div>

Thanks

Re: Problems with Partial Page rendering on initial page load

Anyone with any ideas? I am sure this is a common scenario. I want to load the whole page except the GridView. The GridView needs to be populated asynchronously using the UpdatePanel.

How do I do it in Page Load?

Thanks

Re: Problems with Partial Page rendering on initial page load

I triggere a javascript button click on Page Load, and manually bind the data source on the button click event. But that seems to screw up the postback events. It is calling the databind twice now.

Appreciate any help. I am stuck on this one pretty badly.

Thanks

Re: Problems with Partial Page rendering on initial page load

Is the GridView read-only? If so, you could use this web service deferred loading technique to do it pretty easily.

Re: Problems with Partial Page rendering on initial page load

Hi gt1329a ,

Thanks for the reply. I have around 20 pages in my application that use GridViews. They all contain dynamic data. Some of them are editable, some are read-only and some are selectable. I want to apply a common approach to partially render all these pages.

I got the partial rendering working using this technique.

http://encosia.com/2007/07/13/easily-refresh-an-updatepanel-using-javascript/

Used __doPosBack(updatePanel1, '') in the Page_Load event. Then I removed the DataSourceID from GridView control and added an onLoad event handler to the UpdatePanel.

The OnLoad method then manually binds the Grid to DataSource if there is a postback.

The problem is that now it does not display the Progress bar while it is running the async request. I am totally lost as to why should that happen. I do see the progress bar when I manually click the submit button.

Any ideas?

Thanks

HPDotnet

Re: Problems with Partial Page rendering on initial page load

What kind of progress bar are you using?

Re: Problems with Partial Page rendering on initial page load

I am using UpdateProgress in conjunction with the UpdatePanelAnimationExtender. Here's the code snippet:

<div style="overflow:scroll;height:85%;border:1px solid;" id="divGrid">
       <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:GridView ID="GridView1" runat="server"
                    AllowPaging="True" AllowSorting="True" SkinID="gridView" OnDataBound="GridView1_OnDataBound" DataSourceID="ObjectDataSource3">
                    <Columns>
                        <asp:TemplateField HeaderText="Select">
                        <HeaderTemplate>
                            <asp:CheckBox ID="chkBoxHeader" runat="server" />
                         </HeaderTemplate>
                            <ItemTemplate>
                               <asp:CheckBox ID="chkBoxRow" runat="server" />
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
                <asp:Literal  ID="CheckBoxIDsArray" runat="server" ></asp:Literal>
                <input type="hidden" id="hdnSelChkBoxIDs" name="hdnSelChkBoxIDs" value="<%=selectedHdnString %>"/>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="btnSearch" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>
    </div>




  <cc1:UpdatePanelAnimationExtender ID="upae" BehaviorID="animation" runat="server" TargetControlID="updatePanel1">
        <Animations>
            <OnUpdating>
                <Parallel duration="0">
                    <%-- place the update progress div over the gridview control --%>
                    <ScriptAction Script="onUpdating();" />
                    <FadeOut MinimumOpacity=".5" />
                 </Parallel>
            </OnUpdating>
            <OnUpdated>
                <Parallel duration="0">
                    <%--find the update progress div and place it over the gridview control--%>
                    <ScriptAction Script="onUpdated();" />
                    <FadeIn MinimumOpacity=".5" />
                </Parallel>
            </OnUpdated>
        </Animations>
    </cc1:UpdatePanelAnimationExtender>
    <div id="updateProgressDiv" style="display:none; position:absolute;">
        <span style="color:#fff; margin:3px">
            <asp:UpdateProgress ID="UpdateProgress2" runat="server">
                <ProgressTemplate>
                    <asp:Image ID="Image2" runat="server" ImageUrl="~/Images/loader.gif" />
                        Loading...
                </ProgressTemplate>
            </asp:UpdateProgress>
        </span>
    </div>

Re: Problems with Partial Page rendering on initial page load

Sorry, here is the correct code snippet:

<div style="overflow:scroll;height:85%;border:1px solid;" id="divGrid">
       <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" OnLoad="UpdatePanel1_OnLoad">
            <ContentTemplate>
                <asp:GridView ID="GridView1" runat="server"
                    AllowPaging="True" AllowSorting="True" SkinID="gridView" OnDataBound="GridView1_OnDataBound">
                    <Columns>
                        <asp:TemplateField HeaderText="Select">
                        <HeaderTemplate>
                            <asp:CheckBox ID="chkBoxHeader" runat="server" />
                         </HeaderTemplate>
                            <ItemTemplate>
                               <asp:CheckBox ID="chkBoxRow" runat="server" />
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
                <asp:Literal  ID="CheckBoxIDsArray" runat="server" ></asp:Literal>
                <input type="hidden" id="hdnSelChkBoxIDs" name="hdnSelChkBoxIDs" value="<%=selectedHdnString %>"/>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="btnSearch" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>
    </div>


  <cc1:UpdatePanelAnimationExtender ID="upae" BehaviorID="animation" runat="server" TargetControlID="updatePanel1">
        <Animations>
            <OnUpdating>
                <Parallel duration="0">
                    <%-- place the update progress div over the gridview control --%>
                    <ScriptAction Script="onUpdating();" />
                    <FadeOut MinimumOpacity=".5" />
                 </Parallel>
            </OnUpdating>
            <OnUpdated>
                <Parallel duration="0">
                    <%--find the update progress div and place it over the gridview control--%>
                    <ScriptAction Script="onUpdated();" />
                    <FadeIn MinimumOpacity=".5" />
                </Parallel>
            </OnUpdated>
        </Animations>
    </cc1:UpdatePanelAnimationExtender>
    <div id="updateProgressDiv" style="display:none; position:absolute;">
        <span style="color:#fff; margin:3px">
            <asp:UpdateProgress ID="UpdateProgress2" runat="server">
                <ProgressTemplate>
                    <asp:Image ID="Image2" runat="server" ImageUrl="~/Images/loader.gif" />
                        Loading...
                </ProgressTemplate>
            </asp:UpdateProgress>
        </span>
    </div>

Re: Problems with Partial Page rendering on initial page load

When I trigger the UpdatePanel by clicking Submit button, I see the progress bar anmation.

But when the UpdatePanel is triggered using __doPostBack , I don't see the animation. It doesn't even call the javascript functions.

Am I doing anything wrong with the UpdatePanelAnimationExtender??

Re: Problems with Partial Page rendering on initial page load

Anyone there? Please help.

Why is the progress bar animation not triggered when the page does the __doPostBack? I see the animation when I manually click the submit button.

Please help!

Re: Problems with Partial Page rendering on initial page load

Sorry for the late response.

If I were doing it, I would definitely do it similar to how it's done in my deferred content loading post. If you use a "fake" loading indicator that is hidden immediately after the page loads, during the __doPostBack, you don't have to rely on more complex mechanisms that are intended for user triggered actions.

Re: Problems with Partial Page rendering on initial page load

Thanks a lot gt1329a !

I used the CSS technique to display and hide the progress bar as shown in one of your articles - http://encosia.com/2007/01/16/css-style-as-ajax-progress-indicator/

Got rid of the UpdateProgressAnimationExtender.

I am still using the UpdatePanel instead of the recommended web service way as mentioned in your deferred content loading article. I will give it a shot too!

Thanks again! Really appreciate it!

Re: Problems with Partial Page rendering on initial page load

Glad I could help.

Since you have some GridViews that aren't read-only, you should probably avoid the deferred content loading method that I posted about. It's a good solution for read-only grids, but if you need the GridView to be able to trigger and handle postbacks, it won't work for you.