Proper way to setup ajax for multiple grids?

[Angie]

I have a single radgrid in a control, which I want to display on the same page three times, as follows:

    <UC:MySubscriptionGrid ID="MySubscriptionGrid" runat="server" subType="T"  />
    <br />
    <UC:MySubscriptionGrid ID="MySubscriptionGrid1" runat="server" subType="U"  />
    <br />
    <UC:MySubscriptionGrid ID="MySubscriptionGrid2" runat="server" subType="F"  />

 I have the ajax manager on the master page, and then the radajaxproxy on the MySubscriptionGrid control itself as follows:

<telerik:RadAjaxManagerProxy ID="AjaxManagerProxy1" runat="server">
 <AjaxSettings>
         <telerik:AjaxSetting AjaxControlID="RadGrid_Subs">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid_Subs"   />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="btnSubPanelMinus">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="pSubscriptions"  />
                    <telerik:AjaxUpdatedControl ControlID="pButton"  />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="btnSubPanelPlus">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="pSubscriptions" LoadingPanelID="RadAjaxLoadingPanelSubscriptions"  />
                    <telerik:AjaxUpdatedControl ControlID="pButton" LoadingPanelID="RadAjaxLoadingPanelSubscriptions" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManagerProxy>

This works ok, except when I click off to a different page then click the back button.  After clicking the back button, the Paging and Sorting images on the grid are missing.  In Firefox, I get the dread "Invalid Viewstate" error.  Is there a different way I should be setting this up?

With standard Microsoft ajax, I would just wrap an update panel around each instance of the control.  I tried something similar with the RadAjax panel, but that does not seem to work.

Any suggestions?

Thanks.

[Veli]

Hello Angie,

The error you are getting does not seem to come from the AJAX settings. At the worst with improper AJAX, you would not have your grids ajaxified. This error seems to indicate that RadGrid's viewstate is disabled. Please check this out.

Regards,
Veli
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Angie]

Hi, thanks for replying.  Well, I guess I figured it was an Ajax issue, because when I remove the Ajax settings, the state of the radgrid (sorting,paging,etc) is preserved after clicking the back button.  Viewstate is enabled on all controls.

I think it has something to do with the panel I have wrapped around the RadGrid.  When the page is loaded, visible=false on the panel where the grid resides.  When the user clicks the Expand button, the grid becomes visible.  Then the problems occur when I click away and then come back.  The panel defaults back to closed, and the navigation images are missing  The buttons themselves still work.  (Except in firefox).

If I load the page with visible=true on the panel, I don't have these problems, but that doesn't fit my requirements.

Panel/Grid Code:

  <asp:Panel runat="server" ID="pSubscriptions" EnableViewState="true">
          <telerik:RadGrid ID="RadGrid_Subs" runat="server"
        OnNeedDataSource="RadGrid_Subs_NeedDataSource"
        OnSortCommand="RadGrid_Subs_SortCommand"
        OnItemCommand="RadGrid_Subs_ItemCommand"
        OnItemDataBound="RadGrid_Subs_ItemDataBound"
        AllowSorting="True"
        AutoGenerateColumns="False" Skin="Office2007" CssClass="Custom"   EnableViewState="true">

        <MasterTableView Name="Master" AllowFilteringByColumn="false" DataKeyNames="subID" AllowPaging="true" AllowCustomPaging="true"  >
            <ItemStyle HorizontalAlign="Center" />
            <AlternatingItemStyle HorizontalAlign="Center" />
            <HeaderStyle HorizontalAlign="Center"  ForeColor="#666666"  />
            <PagerStyle Mode="NextPrevAndNumeric"  Position="TopAndBottom" PagerTextFormat="Page: {4}  Displaying items {2} to {3} of {5}, page {0} of {1}"  CssClass="MBLinkU2" />
            <Columns>
            <telerik:GridTemplateColumn SortExpression="linklabel" UniqueName="linklabel" ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="200px" >
            <ItemTemplate>
                               <%# BuildLink(DataBinder.Eval(Container.DataItem, "linkID"), DataBinder.Eval(Container.DataItem, "linkLabel"), DataBinder.Eval(Container.DataItem, "forumID"), DataBinder.Eval(Container.DataItem, "isCase"))%>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn HeaderText="Latest Post" SortExpression="subject" UniqueName="subject" ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="300px"  >
                        <ItemTemplate>
                            <%# BuildPostLink(DataBinder.Eval(Container.DataItem, "topicID"), DataBinder.Eval(Container.DataItem, "subject"), DataBinder.Eval(Container.DataItem, "forumID"), DataBinder.Eval(Container.DataItem, "replyID"), DataBinder.Eval(Container.DataItem, "isCase"),DataBinder.Eval(Container.DataItem, "displayName"))%>
                                      <div class="Blurb"><%# GetMessage(DataBinder.Eval(Container.DataItem,"message"))%> </div>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridBoundColumn DataField="lastPostDate" DataType="System.DateTime"  HeaderText="Last Post Date" SortExpression="lastPostDate" AllowSorting="true" UniqueName="lastPostDate" ItemStyle-Width="120px"  />
                    <telerik:GridTemplateColumn HeaderText="Email" SortExpression="goEmail" UniqueName="goEmail" ItemStyle-Width="60px" >
                        <ItemTemplate>
                            <input type="checkbox" ID="ckEmail" runat="server" value=<%# DataBinder.Eval(Container.DataItem, "subID")%> checked=<%# DataBinder.Eval(Container.DataItem,"goEmail") %>  onclick="SetSendEmailFlag(this); return false;" />
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn ItemStyle-CssClass="MBLinkU" >
                        <ItemTemplate>
                        <asp:LinkButton ID="btnUnsubscribe" Text="Unsubscribe" runat="server" CommandName="unsubscribe" CommandArgument=<%#Eval("subID") %> />
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>

</asp:Panel>

Proxy Code: (btnSubPanelPlus and btnSubPanelMinus are the expand/collapse buttons for the panel)

<telerik:RadAjaxManagerProxy ID="AjaxManagerProxy1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadGrid_Subs">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid_Subs"   />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="btnSubPanelMinus">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="pSubscriptions"  />
                <telerik:AjaxUpdatedControl ControlID="pButton"  />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="btnSubPanelPlus">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="pSubscriptions" LoadingPanelID="RadAjaxLoadingPanelSubscriptions"  />
                <telerik:AjaxUpdatedControl ControlID="pButton" LoadingPanelID="RadAjaxLoadingPanelSubscriptions" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
 </telerik:RadAjaxManagerProxy>

Any ideas?  Thanks.

[Veli]

Hi Angie,

In this case I believe this has something to do with the panel, being visible="false" and not generating any html, not being properly ajaxified. Can you, please, try loading the panel every time with visible="true" and, for example, attaching a client script to the onload event of the body, where to set the panel's style to display = "none". This way, you will still be generating HTML for RadGrid, and, hopefully RadAjax settings will be applied.

Best wishes,
Veli
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Angie]

Hi Veli!  You know, I always forget about that whole visible=false vs display:none thing.   From reading around the site I ended up trying a few different things.  Like leaving the panel visible and just setting the grid to not visible, or setting the grid to display:none, but that didn't work out to well. 

The thought of it actually having to have HTML is what helps the most. 

I ended up just wrapping a panel within a panel and conducting all hide/show operations through the nested panel.  This seems to work well, so I'll leave it at that.

Thanks for your help!

-Angie