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

Yet another bug in RadTabStrip?

4 Answers 74 Views

TabStrip

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

John asked on 11 Jul 2011, 08:45 AM

Still persisting in trying to get these tabs to work, building the tabstrip up after the page has loaded. Here's the latest issue:

If the TabString is in a container with restricted width, and ScrollChildren is set to "true", if tabs are added using tabList.insert() then the scrolling doesn't work properly.

Using IE8 but I don't think it's browser related - if you add tabs using the "add" function instead it works as expected.

Here's some code that demonstrates the problem:

<div style="background-color: #cccccc; width: 500px; height: 50px; border: 1px solid black;">

<telerik:radtabstrip id="rts2" runat="server" ScrollChildren="true">

<tabs>

<telerik:radtab text="First Tab" value="First Tab" />

</tabs>

</telerik:radtabstrip>

</div>

<input type="button" value="Insert Tab" onclick="onInsertTab()" />

<script type="text/javascript" language="javascript">

function onInsertTab() {

var tabStrip = $find('rts2');

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

tab.set_text("Inserted Tab");

var tabList = tabStrip.get_tabs();

// change the call below to "tabList.add(tab)" and it all works ok

tabList.insert(0, tab);

}

</script>

4 Answers, 1 is accepted

answered on 11 Jul 2011, 09:43 AM

Now have a workaround that partially fixes this problem.

I stepped through the code in the "add" function, found how it was updating the scroll bar and copied that into my code, thus:

function onInsertTab() {

var tabStrip = $find('rts2');

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

tab.set_text("Inserted Tab");

var tabList = tabStrip.get_tabs();

tabList.insert(0, tab);

if (tabList._parent) {

if (tabList._parent._scroller) {

tabList._parent._scroller.repaint();

}

else {

var a = tabList._parent;

var c = tabList._tabStrip;

setTimeout(function () { if (a._scrollChildren && !a._scroller) { if (c._tabContainerRequiresScrolling(a)) { a._initScrolling(); } } });

}

Whilst it makes my code look a clumsy mess, this seems to work for the instances when the "add" function would have worked. However the "add" function has issues of its own which I'll put in a separate thread...