Hi!
Complicated title, but is what it is. I'm creating tabs from client side that when pass the visible area area scrollable. The problem is that from the 2nd time towards, the same event for a particular tab (e.g., button event) should select the corresponding tab previously dynamically created in the client side and show the tab. I can easily select and show the content of the chosen tab by an exterior event, but it looks that using the scrollIntoView() method is messing all up.
My results, when selecting a tab from a client event of a button, for instance, where (with some variations):
IE8:
The tabs is selected, but the tab bar goes to a look-like random position (sometimes the selected tab is not in the visible part).
IE8 with compatibility mode to IE7:
When selecting a non-visible at the moment tab, only on the right of the visible area, the tab bar don't scroll to the selected one be visible.
FF:
Like IE8, all messed up.
The code:
<head runat="server"> |
<title></title> |
<script type="text/javascript"> |
function SelecTabIndex(_index) { |
var _rts = $find("RadTabStrip1"); |
var _tab = _rts.get_tabs().getTab(_index); |
_tab.scrollIntoView(); |
_tab.select(); |
} |
function CreateDynamicTabs() { |
var names = new Array("Advanced", "Automatic Updates", "Remote", "General", "Computer Name", "Hardware", "System Restore"); |
var _rts = $find("RadTabStrip1"); |
if (!_rts) |
_rts = RadTabStrip1; |
var _tab; |
for (x in names) { |
_tab = new Telerik.Web.UI.RadTab(); |
_tab.set_text(names[x]); |
_rts.get_tabs().add(_tab); |
} |
_tab.select(); |
_rts._resize(); // to make the scroll buttons appear |
return; |
} |
</script> |
</head> |
<body> |
<form id="form1" runat="server"> |
<telerik:RadScriptManager ID="RadScriptManager1" runat="server"> |
</telerik:RadScriptManager> |
<div> |
<input id="Button8" type="button" value="Create Dynamic Tabs" onclick="CreateDynamicTabs()"/><br /> |
<input id="Button1" type="button" value="Advanced" onclick="SelecTabIndex(0);" /> |
<input id="Button2" type="button" value="Automatic Updates" onclick="SelecTabIndex(1);" /> |
<input id="Button3" type="button" value="Remote" onclick="SelecTabIndex(2)" /> |
<input id="Button4" type="button" value="General" onclick="SelecTabIndex(3);" /> |
<input id="Button5" type="button" value="Computer Name" onclick="SelecTabIndex(4)" /> |
<input id="Button6" type="button" value="Hardware" onclick="SelecTabIndex(5)" /> |
<input id="Button7" type="button" value="System Restore" onclick="SelecTabIndex(6)" /> |
<telerik:RadTabStrip ID="RadTabStrip1" runat="server" Width="400px" ScrollChildren="True" |
ScrollButtonsPosition="Middle" Height="26px"> |
</telerik:RadTabStrip> |
</div> |
</form> |
</body> |
</html> |
Using static/hardcoded tabs the results where:
IE8:
When selecting tabs that aren't on the instant visible area of the Tab Bar, it shows some random area of the Tab Bar.
IE8 with compability to IE7:
Seems to work fine. :-)
FF:
Same as IE8.
Code (with some variations):
<head runat="server"> |
<title></title> |
<script type="text/javascript"> |
function SelecTabIndex(_index) { |
var _rts = $find("RadTabStrip1"); |
var _tab = _rts.get_tabs().getTab(_index); |
_tab.scrollIntoView(); |
_tab.select(); |
} |
</script> |
</head> |
<body> |
<form id="form1" runat="server"> |
<telerik:RadScriptManager ID="RadScriptManager1" runat="server"> |
</telerik:RadScriptManager> |
<div> |
<input id="Button1" type="button" value="Advanced" onclick="SelecTabIndex(0);" /> |
<input id="Button2" type="button" value="Automatic Updates" onclick="SelecTabIndex(1);" /> |
<input id="Button3" type="button" value="Remote" onclick="SelecTabIndex(2)" /> |
<input id="Button4" type="button" value="General" onclick="SelecTabIndex(3);" /> |
<input id="Button5" type="button" value="Computer Name" onclick="SelecTabIndex(4)" /> |
<input id="Button6" type="button" value="Hardware" onclick="SelecTabIndex(5)" /> |
<input id="Button7" type="button" value="System Restore" onclick="SelecTabIndex(6)" /> |
<telerik:RadTabStrip ID="RadTabStrip1" runat="server" Width="400px" ScrollChildren="True" |
ScrollButtonsPosition="Middle" Height="26px"> |
<Tabs> |
<telerik:RadTab Text="Advanced" Value="2"> |
</telerik:RadTab> |
<telerik:RadTab Text="Automatic Updates" Value="1"> |
</telerik:RadTab> |
<telerik:RadTab Text="Remote" Value="3"> |
</telerik:RadTab> |
<telerik:RadTab Text="General" Value="4"> |
</telerik:RadTab> |
<telerik:RadTab Text="Computer Name" Value="5"> |
</telerik:RadTab> |
<telerik:RadTab Text="Hardware" Selected="True" Value="6"> |
</telerik:RadTab> |
<telerik:RadTab Text="System Restore" Value="7"> |
</telerik:RadTab> |
</Tabs> |
</telerik:RadTabStrip> |
</div> |
</form> |
</body> |
</html> |
Hope you can help me. It's very important, for me, to achieve the described.
Regards,
Rodrigo S.