This is a migrated thread and some comments may be shown as answers.

Proper way to setup ajax for multiple grids?

4 Answers 71 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Angie
Top achievements
Rank 1
Angie asked on 04 Aug 2008, 06:46 PM

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.

4 Answers, 1 is accepted

Sort by
0
Veli
Telerik team
answered on 05 Aug 2008, 08:04 AM
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.
0
Angie
Top achievements
Rank 1
answered on 05 Aug 2008, 10:08 PM

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.
0
Veli
Telerik team
answered on 06 Aug 2008, 10:53 AM
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.
0
Angie
Top achievements
Rank 1
answered on 07 Aug 2008, 03:56 PM
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
Tags
Ajax
Asked by
Angie
Top achievements
Rank 1
Answers by
Veli
Telerik team
Angie
Top achievements
Rank 1
Share this question
or