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

[Solved] grind in multipage SaveScrollPosition is not working when i clicked another tab

2 Answers 169 Views

TabStrip

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

Hyoung woo Lee asked on 20 Jan 2010, 03:25 AM

Hi. I put one grid on multipage . And I set SaveScrollPosition property to true to save scroll position. But If i clicked another tab and click the tab contains grid. Grid's Scroll position goes back to top position even if i scrolled down to bottom of vertical scroll bar.
Please Let me know if i got wrong direction to use radtab strip. I am totally novice using asp.net ajax controls.
My aspx code is below :

    
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml" > 
        
            <head runat="server">  
        
                <title></title>  
        
                  <style type="text/css">  
        
                    .pageView  
        
                    {  
        
                        border: 1px solid #898c95;  
        
                        margin-top: -1px;  
        
                        height: 381px;  
        
                    }  
        
                </style> 
        
                <script type="text/javascript">  
        
                  function pageLoad() {  
        
                  }  
        
                </script> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                <div> 
        
                      <script type="text/javascript">  
        
                          function onTabSelecting(sender, args) {  
        
                              if (args.get_tab().get_pageViewID()) {  
        
                                  args.get_tab().set_postBack(false);  
        
                              }  
        
                          }  
        
                    </script> 
        
                    <telerik:RadScriptManager ID="ScriptManager" runat="server" /> 
        
                    <telerik:RadAjaxLoadingPanel runat="server" ID="LoadingPanel1">  
        
                    </telerik:RadAjaxLoadingPanel> 
        
                     <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" UpdatePanelRenderMode="Inline">  
        
                        <AjaxSettings> 
        
                            <telerik:AjaxSetting AjaxControlID="RadTabStrip1">  
        
                                <UpdatedControls> 
        
                                    <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" /> 
        
                                    <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="LoadingPanel1" UpdatePanelRenderMode="Inline" /> 
        
                                </UpdatedControls> 
        
                            </telerik:AjaxSetting> 
        
                            <telerik:AjaxSetting AjaxControlID="RadMultiPage1"  > 
        
                                <UpdatedControls> 
        
                                    <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="LoadingPanel1" UpdatePanelRenderMode="Inline" /> 
        
                                </UpdatedControls> 
        
                            </telerik:AjaxSetting> 
        
                        </AjaxSettings> 
        
                    </telerik:RadAjaxManager> 
        
                    <table> 
        
                        <tr> 
        
                            <td> 
        
                                 <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1"  OnClientTabSelecting="onTabSelecting" 
        
                                    SelectedIndex="0" > 
        
                                    <Tabs> 
        
                                        <telerik:RadTab runat="server" Text="user">                             
        
                                        </telerik:RadTab> 
        
                                        <telerik:RadTab runat="server" Text="group" Selected="True">                           
        
                                        </telerik:RadTab> 
        
                                    </Tabs> 
        
                                </telerik:RadTabStrip>        
        
                                    <telerik:RadMultiPage ID="RadMultiPage1" CssClass="pageView"   
        
                                        runat="server" SelectedIndex="0"   
        
                                     onpageviewcreated="RadMultiPage1_PageViewCreated1" oninit="RadMultiPage1_Init"   
        
                                        > 
        
                                     <telerik:RadPageView ID="RadPageView1"  Width="400" Height="400" runat="server">  
        
                                         <telerik:RadGrid ID="RadGrid1"   onprerender="RadGrid1_PreRender"  Width="400px" AllowSorting="True" AllowMultiRowSelection="True" AllowPaging="false"  GridLines="None" 
        
             runat="server">  
        
                                             <MasterTableView> 
        
                                                 <RowIndicatorColumn> 
        
                                                     <HeaderStyle Width="20px" /> 
        
                                                 </RowIndicatorColumn> 
        
                                                 <ExpandCollapseColumn> 
        
                                                     <HeaderStyle Width="20px" /> 
        
                                                 </ExpandCollapseColumn> 
        
                                             </MasterTableView> 
        
                                             <ClientSettings> 
        
                                                <Scrolling AllowScroll="True" ScrollHeight="400" UseStaticHeaders="True" SaveScrollPosition="True">  
        
                                                </Scrolling> 
        
                                                <Selecting AllowRowSelect="true" /> 
        
                                            </ClientSettings> 
        
                                         </telerik:RadGrid> 
        
                                     </telerik:RadPageView> 
        
                                      <telerik:RadPageView ID="RadPageView2"  Width="400" Height="400" runat="server">  
        
                                          <ul> 
        
                                            <li> 
        
                                            <label>Name:</label> John Smith</li> 
        
                                            </ul> 
        
                                     </telerik:RadPageView> 
        
                                 </telerik:RadMultiPage> 
        
                            </td> 
        
                            <td> 
        
                                form Area   
        
                               </td> 
        
                        </tr> 
        
                    </table> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

PS : In Addition , pageviewcreated event never fire though i put onpageviewcreated="RadMultiPage1_PageViewCreated1" on code
in RadMultiPage

Regards,
Eum

2 Answers, 1 is accepted

answered on 20 Jan 2010, 01:35 PM

Hi,

I've just encountered the same problem :-)
SaveScrollPosition deals with postbacks (as it is stated in the documentation) - therefore it doesn't work when switching tabs.
I've found some workaround:

    
            <telerik:RadGrid ...  
        
              <ClientSettings> 
        
                <ClientEvents OnRowSelected="EXJS.Grid.rowSelectedHandler" OnScroll="onScroll" /> 
        
              </ClientSettings>

    
            var topScroll;  
        
            function onScroll(sender, eventArgs)   
        
            {  
        
              topScroll = eventArgs.get_scrollTop();  
        
            }

    
            <telerik:RadTabStrip ... OnClientTabSelected="onTabSelected">

    
            function onTabSelected(sender, Args)   
        
            {  
        
              var scrollArea = document.getElementById("gridMain_GridData");  
        
              scrollArea.scrollTop = topScroll;  
        
            }

In other words: catch scrolling and restore it when switch tabs.

And what is the official Telerik's solution?

Regards
Tomasz