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

Error occurs when the tab position has been changed in Client side

3 Answers 182 Views

TabStrip

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

Ingo Buck asked on 28 Jan 2011, 12:07 PM

Hello,

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

answered on 02 Feb 2011, 04:58 PM

FF-1.PNG

FF-2.PNG

FF-3.PNG

hi Kamen,
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

answered on 04 Feb 2011, 01:44 PM

Hello 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

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.