Chris McGrath
Top achievements
Rank 1
Rank 1
Chris McGrath
asked on 09 Feb 2011, 05:12 PM
Hi, this seems very obvious but I haven't found any answer so far.
I have multiple tabs that have enough content in them to require scrolling. When I scroll down in a tab, then change to another tab, when I come back to the first tab I am positioned back to the top of the page. My assumption is that this is just showing and hiding divs (or whatever) in the browser and that bringing a different tab to the top would leave the position alone. I would expect this to be default behavior.
Is there a property I can set to do this or do I have to write code to save my position each time? As a side note, is this just showing and hiding panels or is it doing a postback each time I change tabs?
Thanks!
I have multiple tabs that have enough content in them to require scrolling. When I scroll down in a tab, then change to another tab, when I come back to the first tab I am positioned back to the top of the page. My assumption is that this is just showing and hiding divs (or whatever) in the browser and that bringing a different tab to the top would leave the position alone. I would expect this to be default behavior.
Is there a property I can set to do this or do I have to write code to save my position each time? As a side note, is this just showing and hiding panels or is it doing a postback each time I change tabs?
Thanks!
7 Answers, 1 is accepted
0
Hello Chris,
Normally, there won't be a postback as shown in the First Look demo. However, in some implementations there could be a postback, for example the Load on Demand RadPageView demo.
If you make a postback, then simply set <%@ Page MaintainScrollPositionOnPostback="true"...> for your page.
All the best,
Peter
the Telerik team
Normally, there won't be a postback as shown in the First Look demo. However, in some implementations there could be a postback, for example the Load on Demand RadPageView demo.
If you make a postback, then simply set <%@ Page MaintainScrollPositionOnPostback="true"...> for your page.
All the best,
Peter
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
Chris McGrath
Top achievements
Rank 1
Rank 1
answered on 13 Feb 2011, 12:50 AM
So is there a way to maintain the scroll position in the tabs without using a postback? I much prefer the default behavior except that switching tabs puts me at the top again each time.
0
Hi Chris,
Could you please send us the code of your implementation so we can test it locally?
Greetings,
Peter
the Telerik team
Could you please send us the code of your implementation so we can test it locally?
Greetings,
Peter
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
Chris McGrath
Top achievements
Rank 1
Rank 1
answered on 14 Feb 2011, 06:48 PM
Sure, here is a sample that demonstrates the behavior. If you scroll down in the multipage view, change to the other tab, then change back, it will have put you back to the top again.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %><%@ 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>Untitled Page</title></head><body> <form id="form1" runat="server"> <div> <telerik:RadScriptManager ID="RadScriptManager1" runat="server" /> <telerik:RadTabStrip ID="TabStrip" MultiPageID="MultiPage" SelectedIndex="0" runat="server"> <Tabs> <telerik:RadTab Text="View 1" PageViewID="View1" /> <telerik:RadTab Text="View 2" PageViewID="View2" /> </Tabs> </telerik:RadTabStrip> <telerik:RadMultiPage ID="MultiPage" runat="server" SelectedIndex="0" BorderWidth="1" ScrollBars="Vertical" Height="200"> <telerik:RadPageView ID="View1" runat="server"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </telerik:RadPageView> <telerik:RadPageView ID="View2" runat="server"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </telerik:RadPageView> </telerik:RadMultiPage> </div> </form></body></html>0
Accepted
Hello Chris,
Thank you for the sample. Please, try the following javascript solution and let me know how it goes:
Regards,
Peter
the Telerik team
Thank you for the sample. Please, try the following javascript solution and let me know how it goes:
<script type="text/javascript"> function OnClientTabSelected(sender, args) { args.get_tab().get_pageView().get_element().scrollTop = args.get_tab().get_attributes().getAttribute("scrollTopPosition"); } function OnClientTabUnSelected(sender, args) { args.get_tab().get_attributes().setAttribute("scrollTopPosition", args.get_tab().get_pageView().get_element().scrollTop); } </script> <telerik:RadTabStrip ID="TabStrip" MultiPageID="MultiPage" SelectedIndex="0" runat="server" OnClientTabSelected="OnClientTabSelected" OnClientTabUnSelected="OnClientTabUnSelected">Regards,
Peter
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
Chris McGrath
Top achievements
Rank 1
Rank 1
answered on 15 Feb 2011, 04:55 PM
Thanks, that worked perfectly.
However, I am very surprised that this kind of solution is necessary to get tabs to work in a fashion that we are all used to. Load up any browser, open a few tabs, scroll around and then switch back and forth and you remain in the same position in your tabs. This has been standard tab behavior on every interface I've ever seen. I strongly suggest that you update the control with a property to allow this behavior and set it to default to doing so. I think most people expect tabs to work in this manner.
Thanks again,
Chris
However, I am very surprised that this kind of solution is necessary to get tabs to work in a fashion that we are all used to. Load up any browser, open a few tabs, scroll around and then switch back and forth and you remain in the same position in your tabs. This has been standard tab behavior on every interface I've ever seen. I strongly suggest that you update the control with a property to allow this behavior and set it to default to doing so. I think most people expect tabs to work in this manner.
Thanks again,
Chris
0
Your point is well taken, Chris. We will consider providing this behavior by default. Thanks for the suggestion.
Greetings,
Peter
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.