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

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

2 Answers 92 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Hyoung woo Lee
Top achievements
Rank 1
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

Sort by
0
Tomasz M.Lipiński
Top achievements
Rank 1
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
0
Yana
Telerik team
answered on 25 Jan 2010, 11:25 AM
Hello,

Please use this workaround until we research this issue deeper.

Kind regards,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Tags
TabStrip
Asked by
Hyoung woo Lee
Top achievements
Rank 1
Answers by
Tomasz M.Lipiński
Top achievements
Rank 1
Yana
Telerik team
Share this question
or