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

Tabstrips issue of Scrolling in IE 8.0

8 Answers 103 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Manishkumar
Top achievements
Rank 1
Manishkumar asked on 07 Jan 2011, 02:58 PM
Hi 
We are are using Telerik Tabstrip but the Scrolling appears in IE 6.0 but not in IE 8.0
Can you please fix these issue ASAP.
Since we are having Production GoLive verysoon and system is being halted in UAT

8 Answers, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 10 Jan 2011, 10:47 AM
Hello Manishkumar,

Which version of the controls exactly you're using? Do you receive any javascript errors? We need more details in order to reproduce the issue.

All the best,
Yana
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
Manishkumar
Top achievements
Rank 1
answered on 10 Jan 2011, 03:09 PM
Telerik version control = 2009.02.0826.20
IE 8.0 version 8.0.6001.18702

We dont recive any JavaScript error.
0
Helen
Telerik team
answered on 10 Jan 2011, 04:46 PM
Hello Manishkumar,

Could you please send us a sample page or a live url of the problem to examine it locally?

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.
0
Manishkumar
Top achievements
Rank 1
answered on 12 Jan 2011, 08:30 AM

hi;
As requested please find sample project for the issue reported ealier

We are using Telerik dll File version 2009.02.0826.20
please use this version DLL.

Telerik dll is not uploaded in sample project kindly
use the above version of DLL

please find the sample code snnipet for Aspx
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

<%

 

@ Page Language="C#" AutoEventWireup="true" CodeFile="Home.aspx.cs" Inherits="Home" %>

 

 

 

 

<!

 

 

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

 

 

 

 

<%

 

--<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>--%>

 

 

<%

 

@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

 

 

 

 

 

<

 

 

html xmlns="http://www.w3.org/1999/xhtml">

 

<

 

 

head id="Head1" runat="server">

 

 

 

 

 

 

 

<script type="text/javascript">

 

 

 

 

 

 

 

function addTab() {

 

 

 

// Adds the tab to the Tabs Collection of the selected tab

 

 

 

 

 

selectedTab.get_tabs().add(tab);

tab.set_text(

 

"Child Tab " + selectedTab.get_tabs().get_count());

 

}

 

 

function removeTab() {

 

 

 

//Removes the selected tab from the Tabs Collection of the tabstrip

 

 

 

 

 

tabStrip.get_tabs().remove(selectedTab);

}

 

 

function disableTab() {

 

 

 

//Disables the selected tab

 

 

 

 

 

selectedTab.set_enabled(

 

false);

 

}

 

 

var combo = null;

 

 

 

function CloseActiveToolTip() {

 

 

 

// var tooltip = Telerik.Web.UI.RadToolTip.getCurrent();

 

 

 

 

 

 

 

// if (tooltip) tooltip.hide();

 

 

 

 

 

}

 

 

function OnClientHide(sender, args) {

 

 

 

// if (combo) {

 

 

 

 

 

 

 

// $find(combo.id).hideDropDown();

 

 

 

 

 

}

 

 

 

</script>

 

 

 

 

 

 

 

<style type="text/css">

 

 

 

 

 

 

 

.section

 

 

 

 

 

{

 

 

clear: both;

 

 

 

overflow: auto; /*clear the floats*/

 

 

 

 

 

 

 

padding: 10px;

 

}

 

 

</style>

 

</

 

 

head>

 

<

 

 

body class="BODY">

 

 

 

 

 

 

 

<form runat="server" id="mainForm" method="post">

 

 

 

 

 

 

 

<telerik:RadScriptManager ID="ScriptManager" runat="server" />

 

 

 

 

 

 

 

<script type="text/javascript">

 

 

 

 

 

//<![CDATA[

 

 

 

 

 

 

function checkgdatachange()

 

{ }

 

 

function addTab() {

 

 

 

var tabStrip = $find("<%= RadTabStrip1.ClientID %>");

 

 

 

var selectedTab = tabStrip.get_selectedTab();

 

tabStrip.trackChanges();

 

 

var tab = new Telerik.Web.UI.RadTab();

 

 

 

//tab.set_text("Section Tab " + selectedTab.get_tabs().get_count());

 

 

 

 

 

 

 

 

 

// tab.set_text("Section Tab " + document.getElementById('hdnLastTabIndex').value);

// tab.set_pageViewID("RadPageView7");

// tabStrip.get_tabs().add(tab)

 

 

 

 

 

 

//selectedTab.get_tabs().add(tab);

 

 

 

 

 

 

 

// var ObjNewRadPageView = new Telerik.Web.UI.RadPageView();

 

 

 

 

 

 

 

//

 

 

 

 

 

 

 

// ObjNewRadPageView = ObjRadPageView;

 

 

 

 

 

 

 

// debugger;

 

 

 

 

 

tabStrip.commitChanges();

 

}

 

 

// function disableTab() {

 

 

 

 

 

 

 

// var persistChanges = $get(" CheckBox1.ClientID ").checked;

 

 

 

 

 

 

 

// var tabStrip = $find("RadTabStrip3.ClientID");

 

 

 

 

 

 

 

// var selectedTab = tabStrip.get_selectedTab();

 

 

 

 

 

 

 

// if (!selectedTab) {

 

 

 

 

 

 

 

// alert("Please select a tab first");

 

 

 

 

 

 

 

// return false;

 

 

 

 

 

 

 

// }

 

 

 

 

 

 

 

// if (persistChanges)

 

 

 

 

 

 

 

// tabStrip.trackChanges();

 

 

 

 

 

 

 

// selectedTab.set_enabled(false);

 

 

 

 

 

 

 

// selectedTab.set_selected(false);

 

 

 

 

 

 

 

// if (persistChanges)

 

 

 

 

 

 

 

// tabStrip.commitChanges();

 

 

 

 

 

 

 

// return false;

 

 

 

 

 

 

 

// }

 

 

 

 

 

 

 

//]]>

 

 

 

 

</script>

 

 

 

 

 

 

 

<table cellpadding="0" cellspacing="0" style="width: 100%">

 

 

 

 

 

 

 

<tr>

 

 

 

 

 

 

 

<td>

 

 

 

 

 

 

 

 

</td>

 

 

 

 

 

 

 

</tr>

 

 

 

 

 

 

 

<tr>

 

 

 

 

 

 

 

<td bgcolor="#ffffcc" height="2">

 

 

 

 

 

 

 

</td>

 

 

 

 

 

 

 

</tr>

 

 

 

 

 

 

 

<tr>

 

 

 

 

 

 

 

<td bgcolor="#f6f6f6">

 

 

 

 

 

 

 

<table border="0" cellpadding="0" cellspacing="0" width="100%">

 

 

 

 

 

 

 

<tr>

 

 

 

 

 

 

 

<td width="75%">

 

 

 

 

 

 

 

 

 

 

</td>

 

 

 

 

 

 

 

 

</tr>

 

 

 

 

 

 

 

</table>

 

 

 

 

 

 

 

</td>

 

 

 

 

 

 

 

</tr>

 

 

 

 

 

 

 

<tr>

 

 

 

 

 

 

 

<td align="left" colspan="3">

 

 

 

 

 

 

 

<div id="divSection" class="divSection">

 

 

 

 

 

 

 

<table width="100%" border="0" cellpadding="0" cellspacing="0">

 

 

 

 

 

 

 

<tr>

 

 

 

 

 

 

 

<td>

 

 

 

 

 

<%

 

-- <telerik:RadTabStrip ID="RadTabStrip4" runat="server" MultiPageID="RadMultiPage1"

 

SelectedIndex="0" CssClass="tabStrip" ScrollButtonsPosition="Right">

<Tabs>

<telerik:RadTab Text="General" Width="15%" Selected="true" PageViewID="RadPageView1">

</telerik:RadTab>

<telerik:RadTab Text="CheckList Sec1" Width="15%" PageViewID="RadPageView3">

</telerik:RadTab>

<telerik:RadTab Text="Report link" Width="15%" PageViewID="RadPageView4">

</telerik:RadTab>

<telerik:RadTab Text="Sample Tab4" Width="15%" PageViewID="RadPageView2">

</telerik:RadTab>

<telerik:RadTab Text="Sample Tab5" Width="15%" PageViewID="RadPageView5">

</telerik:RadTab>

<telerik:RadTab Text="Sample Tab6" Width="15%" PageViewID="RadPageView6">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>--

 

 

%>

 

 

 

<table>

 

 

 

 

 

 

 

<tr>

 

 

 

 

 

 

 

<td align="left">

 

 

 

 

 

 

 

<telerik:RadTabStrip runat="server" ID="RadTabStrip1" Style="float: left" SelectedIndex="0"

 

 

 

 

 

 

 

MultiPageID="RadMultiPage1" ScrollButtonsPosition="Right" OnClientTabSelecting="checkgdatachange" ScrollChildren="true">

 

 

 

 

 

 

 

</telerik:RadTabStrip>

 

 

 

 

 

 

 

</td>

 

 

 

 

 

 

 

<td align="right">

 

 

 

 

 

 

 

<asp:Button ID="Button2" runat="server" Text="AddTab"

 

 

 

 

 

 

 

OnClick="gettabDetails_clicked" />

 

 

 

 

 

 

 

</td>

 

 

 

 

 

 

 

</tr>

 

 

 

 

 

 

 

</table>

 

 

 

 

 

 

 

<telerik:RadMultiPage ID="RadMultiPage1" runat="server" CssClass="multiPage" ScrollBars="Auto" OnPageViewCreated="RadMultiPage1_PageViewCreated">

 

 

 

 

 

 

 

<telerik:RadPageView ID="RadPageView1" runat="server" Selected="true">

 

 

 

 

 

 

 

 

</telerik:RadPageView>

 

 

 

 

 

 

 

<telerik:RadPageView ID="RadPageView2" runat="server" ScrollBars="Auto">

 

 

 

 

 

 

 

 

</telerik:RadPageView>

 

 

 

 

 

 

 

<telerik:RadPageView ID="RadPageView3" runat="server">

 

 

 

 

 

 

 

 

</telerik:RadPageView>

 

 

 

 

 

 

 

<telerik:RadPageView ID="RadPageView4" runat="server">

 

 

 

 

 

 

 

 

</telerik:RadPageView>

 

 

 

 

 

 

 

 

<telerik:RadPageView ID="RadPageViewDemo" runat="server">

 

 

 

 

 

 

 

 

</telerik:RadPageView>

 

 

 

 

 

 

 

</telerik:RadMultiPage>

 

 

 

 

 

 

 

</td>

 

 

 

 

 

 

 

</tr>

 

 

 

 

 

 

 

</table>

 

 

 

 

 

 

 

</div>

 

 

 

 

 

 

 

<telerik:RadFormDecorator runat="server" ID="RadFormDecorator1" DecoratedControls="Textarea" />

 

 

 

 

 

 

 

</td>

 

 

 

 

 

 

 

</tr>

 

 

 

 

 

 

 

<tr>

 

 

 

 

 

 

 

<td height="23" colspan="3">

 

 

 

 

 

 

 

<table cellpadding="0" cellspacing="0" border="0" width="100%">

 

 

 

 

 

 

 

<tr>

 

 

 

 

 

 

 

<td width="2%">

 

 

 

 

 

 

 

</td>

 

 

 

 

 

 

 

<td>

 

 

 

 

 

 

 

 

</td>

 

 

 

 

 

 

 

</tr>

 

 

 

 

 

 

 

<tr>

 

 

 

 

 

 

 

<td>

 

 

 

 

 

 

 

<telerik:RadToolTipManager runat="server" ID="RadToolTipManager1" RelativeTo="Element"

 

 

 

 

 

 

 

Width="250px" Height="200px" Animation="Resize" HideEvent="ManualClose" Skin="Office2007"

 

 

 

 

 

 

 

OnAjaxUpdate="OnAjaxUpdate" OnClientHide="OnClientHide" RenderInPageRoot="true"

 

 

 

 

 

 

 

AnimationDuration="200" EnableShadow="true" Position="TopRight">

 

 

 

 

 

 

 

</telerik:RadToolTipManager>

 

 

 

 

 

 

 

<telerik:RadToolTipManager runat="server" ID="RadToolTipManager2" RelativeTo="Element"

 

 

 

 

 

 

 

Width="250px" Height="200px" Animation="Resize" Skin="WebBlue" OnAjaxUpdate="OnAjaxUpdate"

 

 

 

 

 

 

 

OnClientHide="OnClientHide" RenderInPageRoot="true" AnimationDuration="200" EnableShadow="true"

 

 

 

 

 

 

 

Position="TopRight">

 

 

 

 

 

 

 

</telerik:RadToolTipManager>

 

 

 

 

 

 

 

</td>

 

 

 

 

 

 

 

</tr>

 

 

 

 

 

 

 

</table>

 

 

 

 

 

 

 

</td>

 

 

 

 

 

 

 

</tr>

 

 

 

 

 

 

 

<tr>

 

 

 

 

 

 

 

<td bgcolor="#FFFFFF" height="23">

 

 

 

 

 

 

 

<br>

 

 

 

 

 

 

 

<table cellpadding="0" cellspacing="0" class="style1" border="0">

 

 

 

 

 

 

 

<tr>

 

 

 

 

 

 

 

<td colspan="6" height="1" bgcolor="gray">

 

 

 

 

 

 

 

</td>

 

 

 

 

 

 

 

</tr>

 

 

 

 

 

 

 

<tr>

 

 

 

 

 

 

 

 

 

<td width="21%">

 

 

 

 

 

 

 

 

 

 

</td>

 

 

 

 

 

 

 

</tr>

 

 

 

 

 

 

 

</table>

 

 

 

 

 

 

 

</td>

 

 

 

 

 

 

 

</tr>

 

 

 

 

 

 

 

</table>

 

 

 

 

 

 

 

<asp:HiddenField id="hdnLastTabIndex" runat="server" />

 

 

 

 

 

 

 

</form>

 

</

 

 

body>

 

</

 

 

html>

 

 

 

 

------------------------------------------------------------------------------------------------------------------------------
.cs code snnipet
----------------------------------------------------------------------------------------------------------------------------

using

 

 

System;

 

using

 

 

System.Collections.Generic;

 

using

 

 

System.Linq;

 

using

 

 

System.Web;

 

using

 

 

System.Web.UI;

 

using

 

 

System.Web.UI.WebControls;

 

using

 

 

Telerik.Web.UI;

 

public

 

 

partial class Home : System.Web.UI.Page

 

{

 

 

 

 

protected void Page_Load(object sender, EventArgs e)

 

{

 

 

 

if (!Page.IsPostBack)

 

{

hdnLastTabIndex.Value =

 

"5";

 

FillTabStrip(RadTabStrip1);

 

 

 

// EventLogConsole1.LoggedEvents.Clear();

 

}

}

 

 

protected void OnAjaxUpdate(object sender, ToolTipUpdateEventArgs args)

 

{

 

 

this.UpdateToolTip(args.Value, args.UpdatePanel);

 

}

 

 

protected void gettabDetails_clicked(object sender, EventArgs e)

 

{

 

RadPageView pageView =

 

new RadPageView();

 

pageView.ID =

 

"RadPageView" + (RadTabStrip1.Tabs.Count + 1);

 

 

 

 

//string userControlName = pageView.ID + "CS.ascx";

 

 

 

//Control userControl = Page.LoadControl("UserControls/Grid.ascx");

 

 

 

//userControl.ID = pageView.ID + "_userControl";

 

 

 

//pageView.Controls.Add(userControl);

 

 

RadMultiPage1.PageViews.Add(pageView);

RadTab tab =

 

new RadTab();

 

hdnLastTabIndex.Value = (

 

Convert.ToInt32(hdnLastTabIndex.Value) + 1).ToString();

 

 

 

// tab = RadTabStrip1.Tabs[Convert.ToInt32(hdnLastTabIndex.Value) -1 ];

 

tab.PageViewID =

 

"RadPageView" + RadTabStrip1.Tabs.Count + 1;

 

tab.Text =

 

"TelerikTab " + hdnLastTabIndex.Value;

 

RadTabStrip1.Tabs.Add(tab);

}

 

 

protected void RadMultiPage1_PageViewCreated(object sender, RadMultiPageEventArgs e)

 

{

 

 

// if (string.IsNullOrEmpty(hdnLastTabIndex.Value))

 

{

 

 

//if (Convert.ToInt32(hdnLastTabIndex.Value) > 6)

 

{

 

 

string userControlName = e.PageView.ID + "CS.ascx";

 

 

 

//Control userControl = Page.LoadControl("UserControls/Grid.ascx");

 

 

 

//userControl.ID = e.PageView.ID + "_userControl";

 

 

 

//e.PageView.Controls.Add(userControl);

 

}

}

}

 

 

private void UpdateToolTip(string elementID, UpdatePanel panel)

 

{

 

 

Control ctrl = Page.LoadControl("WebUserControl.ascx");

 

panel.ContentTemplateContainer.Controls.Add(ctrl);

 

 

// WebUserControl details = (WebUserControl)ctrl;

 

 

 

//details.ProductID = elementID;

 

 

}

 

 

private void FillTabStrip(RadTabStrip tabStrip)

 

{

tabStrip.Tabs.Clear();

 

RadPageView pageView =

 

new RadPageView();

 

 

 

for (int i = 0; i < 5; i++)

 

{

RadTab tab =

 

new RadTab();

 

tabStrip.Tabs.Add(tab);

 

 

switch (i)

 

{

 

 

case 0:

 

tab.Text =

 

"TelerikTab1";

 

tab.PageViewID =

 

"RadPageView1";

 

 

 

 

break;

 

 

 

case 1:

 

tab.Text =

 

"TelerikTab2";

 

tab.PageViewID =

 

"RadPageView2";

 

 

 

break;

 

 

 

case 2:

 

tab.Text =

 

"TelerikTab3";

 

tab.PageViewID =

 

"RadPageView3";

 

 

 

break;

 

 

 

case 3:

 

tab.Text =

 

"TelerikTab4";

 

tab.PageViewID =

 

"RadPageView4";

 

 

 

break;

 

 

 

case 4:

 

 

{

 

pageView.ID =

 

"RadPageView" + (RadTabStrip1.Tabs.Count + 1);

 

 

 

//string userControlName = pageView.ID + "CS.ascx";

 

 

 

//Control userControl = Page.LoadControl("UserControls/Grid.ascx");

 

 

 

//userControl.ID = pageView.ID + "_userControl";

 

 

 

//pageView.Controls.Add(userControl);

 

RadMultiPage1.PageViews.Add(pageView);

 

 

 

// tab = RadTabStrip1.Tabs[Convert.ToInt32(hdnLastTabIndex.Value) -1 ];

 

tab.PageViewID =

 

"RadPageView" + RadTabStrip1.Tabs.Count + 1;

 

tab.Text =

 

"TelerikTab" + hdnLastTabIndex.Value;

 

RadTabStrip1.Tabs.Add(tab);

 

 

break;

 

}

 

 

default:

 

 

 

break;

 

}

}

}

 

 

 

 

protected void Button1_Click(object sender, EventArgs e)

 

{

DescribeTabStrip(RadTabStrip1);

 

}

 

 

private void DescribeTabStrip(RadTabStrip tabStrip)

 

{

 

 

foreach (ClientOperation<RadTab> operation in tabStrip.ClientChanges)

 

{

RadTab tab = operation.Item;

 

 

//switch (operation.Type)

 

 

 

//{

 

 

 

// case ClientOperationType.Insert:

 

 

 

// EventLogConsole1.LoggedEvents.Add( "Added tab with text: \"" + tab.Text + "\"" + Environment.NewLine );

 

 

 

// break;

 

 

 

// case ClientOperationType.Remove:

 

 

 

// EventLogConsole1.LoggedEvents.Add( "Removed tab with text: \"" + tab.Text + "\"" + Environment.NewLine );

 

 

 

// break;

 

 

 

// case ClientOperationType.Update:

 

 

 

// UpdateClientOperation<RadTab> update = operation as UpdateClientOperation<RadTab>;

 

 

 

// EventLogConsole1.LoggedEvents.Add( "The \"" + update.PropertyName + "\" property of the \"" + tab.Text + "\" tab was updated." + Environment.NewLine);

 

 

 

// break;

 

 

 

//}

 

}

}

}

------------------------------------------------------------------------------------------------------------------------------------------------
0
Manishkumar
Top achievements
Rank 1
answered on 13 Jan 2011, 06:54 AM
Hi;
As requested we posted the sample code with the issue yesterday.
Awaiting for response.
we will be highly thankful if you can try to send the response ASAP
0
Manishkumar
Top achievements
Rank 1
answered on 13 Jan 2011, 07:32 AM
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Home.aspx.cs" Inherits="Home" %>
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%--<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>--%>
   
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
   
<head id="Head1" runat="server">
    <script type="text/javascript">
        function addTab() {
  
            // Adds the tab to the Tabs Collection of the selected tab
            selectedTab.get_tabs().add(tab);
            tab.set_text("Child Tab " + selectedTab.get_tabs().get_count());
  
  
  
        }
  
        function removeTab() {
  
            //Removes the selected tab from the Tabs Collection of the tabstrip
            tabStrip.get_tabs().remove(selectedTab);
  
        }
  
        function disableTab() {
  
            //Disables the selected tab
            selectedTab.set_enabled(false);
  
        }
        var combo = null;
        function CloseActiveToolTip() {
            //            var tooltip = Telerik.Web.UI.RadToolTip.getCurrent();
            //            if (tooltip) tooltip.hide();
        }
  
        function OnClientHide(sender, args) {
            //            if (combo) {
            //                $find(combo.id).hideDropDown();
        }
          
    </script>
    <style type="text/css">
        .section
        {
            clear: both;
            overflow: auto; /*clear the floats*/
            padding: 10px;
        }
    </style>
</head>
<body class="BODY">
    <form runat="server" id="mainForm" method="post">
    <telerik:RadScriptManager ID="ScriptManager" runat="server" />
    <script type="text/javascript">
        //<![CDATA[
        function checkgdatachange()
        { }
  
        function addTab() {
  
  
            var tabStrip = $find("<%= RadTabStrip1.ClientID %>");
            var selectedTab = tabStrip.get_selectedTab();
  
            tabStrip.trackChanges();
  
            var tab = new Telerik.Web.UI.RadTab();
            //tab.set_text("Section Tab " + selectedTab.get_tabs().get_count());
             
//            tab.set_text("Section Tab " + document.getElementById('hdnLastTabIndex').value);
//            tab.set_pageViewID("RadPageView7");
//            tabStrip.get_tabs().add(tab)
            //selectedTab.get_tabs().add(tab);
            //            var ObjNewRadPageView = new Telerik.Web.UI.RadPageView();
            //            
            //            ObjNewRadPageView = ObjRadPageView;
            //            debugger;
            tabStrip.commitChanges();
  
  
              
        }
  
  
        //        function disableTab() {
        //            var persistChanges = $get(" CheckBox1.ClientID ").checked;
  
        //            var tabStrip = $find("RadTabStrip3.ClientID");
        //            var selectedTab = tabStrip.get_selectedTab();
        //            if (!selectedTab) {
        //                alert("Please select a tab first");
        //                return false;
        //            }
  
        //            if (persistChanges)
        //                tabStrip.trackChanges();
  
        //            selectedTab.set_enabled(false);
        //            selectedTab.set_selected(false);
  
        //            if (persistChanges)
        //                tabStrip.commitChanges();
  
        //            return false;
        //        }
        //]]>
    </script>
    <table cellpadding="0" cellspacing="0" style="width: 100%">
        <tr>
            <td>
                  
            </td>
        </tr>
        <tr>
            <td bgcolor="#ffffcc" height="2">
            </td>
        </tr>
        <tr>
            <td bgcolor="#f6f6f6">
                <table border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                        <td width="75%">
                             
                                
                             
                        </td>
                         
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td align="left" colspan="3">
                <div id="divSection" class="divSection">
                    <table width="100%" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td>
                                                            <%-- <telerik:RadTabStrip ID="RadTabStrip4" runat="server" MultiPageID="RadMultiPage1"
                                    SelectedIndex="0" CssClass="tabStrip" ScrollButtonsPosition="Right">
                                    <Tabs>
                                        <telerik:RadTab Text="General" Width="15%" Selected="true" PageViewID="RadPageView1">
                                        </telerik:RadTab>
                                        <telerik:RadTab Text="CheckList Sec1" Width="15%" PageViewID="RadPageView3">
                                        </telerik:RadTab>
                                        <telerik:RadTab Text="Report link" Width="15%" PageViewID="RadPageView4">
                                        </telerik:RadTab>
                                        <telerik:RadTab Text="Sample Tab4" Width="15%" PageViewID="RadPageView2">
                                        </telerik:RadTab>
                                        <telerik:RadTab Text="Sample Tab5" Width="15%" PageViewID="RadPageView5">
                                        </telerik:RadTab>
                                        <telerik:RadTab Text="Sample Tab6" Width="15%" PageViewID="RadPageView6">
                                        </telerik:RadTab>
                                    </Tabs>
                                </telerik:RadTabStrip>--%>
                                <table>
                                    <tr>
                                        <td align="left">
                                            <telerik:RadTabStrip runat="server" ID="RadTabStrip1" Style="float: left" SelectedIndex="0"
                                                MultiPageID="RadMultiPage1" ScrollButtonsPosition="Right"   OnClientTabSelecting="checkgdatachange" ScrollChildren="true">
                                            </telerik:RadTabStrip>
                                        </td>
                                        <td align="right">
                                            <asp:Button ID="Button2" runat="server"   Text="AddTab"
                                                OnClick="gettabDetails_clicked"  />
                                        </td>
                                         <td align="right">
                                            <asp:TextBox ID="txtdata" runat="server">
                                            </asp:TextBox>
                                        </td>
                                         <td align="right">
                                            <asp:Button ID="Button1" runat="server"   Text="GotoTab"
                                                OnClick="Button1_Click"  />
                                        </td>
                                    </tr>
                                </table>
                                <telerik:RadMultiPage ID="RadMultiPage1" runat="server" CssClass="multiPage" ScrollBars="Auto" OnPageViewCreated="RadMultiPage1_PageViewCreated">
                                    <telerik:RadPageView ID="RadPageView1" runat="server" Selected="true">
                                           
                                    </telerik:RadPageView>
                                    <telerik:RadPageView ID="RadPageView2" runat="server" ScrollBars="Auto">
                                      
                                    </telerik:RadPageView>
                                    <telerik:RadPageView ID="RadPageView3" runat="server">
                                          
                                    </telerik:RadPageView>
                                    <telerik:RadPageView ID="RadPageView4" runat="server">
                                           
                                    </telerik:RadPageView>
                                     
                                    <telerik:RadPageView ID="RadPageViewDemo" runat="server">
                                          
                                    </telerik:RadPageView>
                                </telerik:RadMultiPage>
                            </td>
                        </tr>
                    </table>
                </div>
                <telerik:RadFormDecorator runat="server" ID="RadFormDecorator1" DecoratedControls="Textarea" />
            </td>
        </tr>
        <tr>
            <td height="23" colspan="3">
                <table cellpadding="0" cellspacing="0" border="0" width="100%">
                    <tr>
                        <td width="2%">
                        </td>
                        <td>
                               
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <telerik:RadToolTipManager runat="server" ID="RadToolTipManager1" RelativeTo="Element"
                                Width="250px" Height="200px" Animation="Resize" HideEvent="ManualClose" Skin="Office2007"
                                OnAjaxUpdate="OnAjaxUpdate" OnClientHide="OnClientHide" RenderInPageRoot="true"
                                AnimationDuration="200" EnableShadow="true" Position="TopRight">
                            </telerik:RadToolTipManager>
                            <telerik:RadToolTipManager runat="server" ID="RadToolTipManager2" RelativeTo="Element"
                                Width="250px" Height="200px" Animation="Resize" Skin="WebBlue" OnAjaxUpdate="OnAjaxUpdate"
                                OnClientHide="OnClientHide" RenderInPageRoot="true" AnimationDuration="200" EnableShadow="true"
                                Position="TopRight">
                            </telerik:RadToolTipManager>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td bgcolor="#FFFFFF" height="23">
                <br>
                <table cellpadding="0" cellspacing="0" class="style1" border="0">
                    <tr>
                        <td colspan="6" height="1" bgcolor="gray">
                        </td>
                    </tr>
                    <tr>
                          
                           
                        <td width="21%">
                               
                            
                               
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <asp:HiddenField id="hdnLastTabIndex" runat="server" />
    </form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
  
public partial class Home : System.Web.UI.Page
{
      
      
        protected void Page_Load(object sender, EventArgs e)
        {
             
            if (!Page.IsPostBack)
            {
                hdnLastTabIndex.Value = "5";
                FillTabStrip(RadTabStrip1);
               
               // EventLogConsole1.LoggedEvents.Clear();
            }
        }
        protected void OnAjaxUpdate(object sender, ToolTipUpdateEventArgs args)
        {
            this.UpdateToolTip(args.Value, args.UpdatePanel);
        }
  
        protected void gettabDetails_clicked(object sender, EventArgs e)
        {
             
            RadPageView pageView = new RadPageView();
            pageView.ID = "RadPageView" + (RadTabStrip1.Tabs.Count + 1);
              
            //string userControlName = pageView.ID + "CS.ascx";
            //Control userControl = Page.LoadControl("UserControls/Grid.ascx");
            //userControl.ID = pageView.ID + "_userControl";
            //pageView.Controls.Add(userControl);
             
            RadMultiPage1.PageViews.Add(pageView);
  
           RadTab tab = new RadTab();
           hdnLastTabIndex.Value = (Convert.ToInt32(hdnLastTabIndex.Value) + 1).ToString();
          // tab = RadTabStrip1.Tabs[Convert.ToInt32(hdnLastTabIndex.Value) -1 ];
           tab.PageViewID = "RadPageView" + RadTabStrip1.Tabs.Count + 1;
           tab.Text = "TelerikTab " + hdnLastTabIndex.Value;
           RadTabStrip1.Tabs.Add(tab);
        }
        protected void RadMultiPage1_PageViewCreated(object sender, RadMultiPageEventArgs e)
        {
           // if (string.IsNullOrEmpty(hdnLastTabIndex.Value))
            {
                //if (Convert.ToInt32(hdnLastTabIndex.Value) > 6)
                {
                    string userControlName = e.PageView.ID + "CS.ascx";
  
                    //Control userControl = Page.LoadControl("UserControls/Grid.ascx");
                    //userControl.ID = e.PageView.ID + "_userControl";
  
                    //e.PageView.Controls.Add(userControl);
                }
            }
        }
  
        private void UpdateToolTip(string elementID, UpdatePanel panel)
        {
  
            Control ctrl = Page.LoadControl("WebUserControl.ascx");
            panel.ContentTemplateContainer.Controls.Add(ctrl);
         //   WebUserControl details = (WebUserControl)ctrl;
            //details.ProductID = elementID;
              
        }
  
  
        private void FillTabStrip(RadTabStrip tabStrip)
        {
            tabStrip.Tabs.Clear();
             
            RadPageView pageView = new RadPageView();
  
            for (int i = 0; i < 5; i++)
            {
                RadTab tab = new RadTab();
                tabStrip.Tabs.Add(tab);
                switch (i)
                {
                    case 0:
                        tab.Text = "TelerikTab1";
                        tab.PageViewID = "RadPageView1";
                         
                        break;
                    case 1:
                        tab.Text = "TelerikTab2";
                        tab.PageViewID = "RadPageView2";
                        break;
                    case 2:
                        tab.Text = "TelerikTab3";
                        tab.PageViewID = "RadPageView3";
                        break;
                    case 3:
                        tab.Text = "TelerikTab4";
                        tab.PageViewID = "RadPageView4";
                        break;
                    case 4:
                                              
                        {
  
                             
                            pageView.ID = "RadPageView" + (RadTabStrip1.Tabs.Count + 1);
  
                            //string userControlName = pageView.ID + "CS.ascx";
                            //Control userControl = Page.LoadControl("UserControls/Grid.ascx");
                            //userControl.ID = pageView.ID + "_userControl";
                            //pageView.Controls.Add(userControl);
  
                            RadMultiPage1.PageViews.Add(pageView);
  
                           
                            // tab = RadTabStrip1.Tabs[Convert.ToInt32(hdnLastTabIndex.Value) -1 ];
                            tab.PageViewID = "RadPageView" + RadTabStrip1.Tabs.Count + 1;
                            tab.Text = "TelerikTab" + hdnLastTabIndex.Value;
                            RadTabStrip1.Tabs.Add(tab);
                            break;
                        }
                    default:
                        break;
                }
            }
        }
          
          
        protected void Button1_Click(object sender, EventArgs e)
        {
            Control cntrl = this.Form.FindControl(txtdata.Text);
            RadPageView pageView = new RadPageView();
            RadTab tab = new RadTab();
            tab = RadTabStrip1.FindTabByText(txtdata.Text);
            tab.Selected = true;
  
            //pageView = (RadPageView)(cntrl);
            //pageView.Enabled = true;
  
            //pageView.Selected = true;
             
            
        }
  
        
    }

hi;
please find the code snnppet as requested.
0
Manishkumar
Top achievements
Rank 1
answered on 17 Jan 2011, 06:58 AM
Hi;
we are Awaiting for the reply.
Our Production Go-live is being delayed due to this issue
 can you please reply ASAP..
0
Yana
Telerik team
answered on 17 Jan 2011, 03:12 PM
Hi Manishkumar,

The reason for this issue is that you've placed the tabstrip in a table and tables are handled differently by different browsers. In order to use scrolling in your case you should set Width property to the tabstrip in pixels:

<telerik:RadTabStrip runat="server" ID="RadTabStrip1" Style="float: left" SelectedIndex="0"
    MultiPageID="RadMultiPage1" ScrollButtonsPosition="Right"  
    OnClientTabSelecting="checkgdatachange" Width="600px"
    ScrollChildren="true" >
</telerik:RadTabStrip>


Kind regards,
Yana
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.
Tags
TabStrip
Asked by
Manishkumar
Top achievements
Rank 1
Answers by
Yana
Telerik team
Manishkumar
Top achievements
Rank 1
Helen
Telerik team
Share this question
or