My Tabstrip behaves very strange when i change the tab´s position in client side and start a postback.
I thought first that my code causes this behavior, then I created a new page, which contains a Tabstrip and Two buttons. The first button changes the position of the tabs and the other button causes just a postback.
I created in the TabStrip 4 Tabs:
Tabs Position
==== =======
Tab1 0
Tab2 1
Tab3 2
Tab4 3
When I select the tab4 and click on the Button “Change Position” the Tab4 has to change his position from 3 to 1 and has to be selected. Well all that works just fine. But when I start a Postback through the Button “Postback”, then the selected index increases automatically and the next tab (tab3) will be selected.
Can you please tell me what causes this behavior?
Markup code:
===========
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RadTabStrip.aspx.cs" Inherits="GadgetShop.RadTabStrip" %> <%@ 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> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="SchripManager1" runat="server"> </asp:ScriptManager> <telerik:RadScriptBlock ID="ScriptBlick1" runat="server"> <script type="text/javascript"> function changePos() { var RadTabStrip1 = $find('<%= RadTabStrip1.ClientID %>'); RadTabStrip1.trackChanges(); var tabs = RadTabStrip1.get_tabs(); var tab = tabs.getItem(3); tabs.remove(tab); tabs.insert(1, tab); tab.set_selected(true); RadTabStrip1.commitChanges(); } </script> </telerik:RadScriptBlock> <div> </div> <telerik:RadTabStrip ID="RadTabStrip1" runat="server"> <Tabs> <telerik:RadTab runat="server" Text="Tab1"> </telerik:RadTab> <telerik:RadTab runat="server" Text="Tab2"> </telerik:RadTab> <telerik:RadTab runat="server" Text="Tab3"> </telerik:RadTab> <telerik:RadTab runat="server" Text="Tab4"> </telerik:RadTab> </Tabs> </telerik:RadTabStrip> <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Postback" /> <p> <input id="Button2" type="button" value="Change Position" onclick="javascript:changePos();" /></p> </form> </body> </html>
Server-side code:
==============
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace GadgetShop { public partial class RadTabStrip : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void Button1_Click(object sender, EventArgs e) { } } }
Any help will be appreciated
Ingo
3 Answers, 1 is accepted
Can you tell us which versions of RadControls for ASP.NET AJAX are you using and in which browser occurs this behavior?
Regards,
Kamen Bundev
the Telerik team
Rank 1
I am using the telerik version "2010 3.1317.35" and it occurs in both browsers "IE8" and "Firefox 3.6".
I am posting some picture too, which shows the steps how this error occurs.
Regards,
Ingo
Thank you for the screenshots. We were able to reproduce the issue locally and I forwarded it to our development team for further investigation.
In the meantime you may try the following workaround:
protected void Page_Load(object sender, EventArgs e) { if (Page.IsPostBack) { RadTabStrip1.ClientChanges[1].Item.Selected = true; } }Hope it helps.
Regards,
Helen
the Telerik team