[Solved] Scrolling with "ButtonsOver" in ajaxToolkit:TabPanel with IE

[petter rakinen]

Hello,
I have several issues (CSS and javascript) when I use RadRotator in a TabPanel.
I use TabContainer from the Ajax Toolkit (and I would like to keep it).
The RadRotator works as exepected in the first TabPanel, but hidden in the second.
I fixed it with some JS and CSS:

<script language="javascript">
var div_IE_Fix = document.getElementById('rrInTheSecondTabPanel');
div_IE_Fix.style.visibility = 'visible';
div_IE_Fix.className = 'RadRotator RadRotator_Default rrNoBorder';
</script>

<style type="text/css">
.rrRelativeWrapper
{
height: 143px;
width: 610px;
}

.rrClipRegion
{
overflow: hidden;
width: 610px;
height: 143px;
position: relative;
}

.rrItemsList
{
left: 0px; /* dynamicaly changed on 'MouseOver' */
top: 0px;
width: 3660px; /* dynamicaly computed */
height: 32px;  /* dynamicaly computed */
position: relative;
}
</style>

Her my relevant HTML

    <ajaxToolkit:TabContainer ID="TabContainer" runat="server" ActiveTabIndex="0">

    <ajaxToolkit:TabPanel ID="tp_10" runat="server" HeaderText="TabPanel 1">
        <ContentTemplate>
        <div class="SlideShow_Misc_Wrapper">
        <asp:Image ID="SSArrowLeft_tp_10" ImageUrl="~/images/SSArrowLeft_on.png"  AlternateText="right" runat="server" CssClass="SSArrowLeft" />
        <div class="SlideShow_Misc_Content">
            <telerik:RadRotator ID="rr_tp_10" runat="server" DataSourceID="xdsTab1" Width="610" Height="143" FrameDuration="1" RotatorType="ButtonsOver">
            <ItemTemplate>
            <div class="SlideShowElement">
                <div style="height:40px; overflow:hidden;"><%#XPath("Description")%></div>
            </div>
            </ItemTemplate>
            <ControlButtons LeftButtonID="SSArrowLeft_tp_10" RightButtonID="SSArrowRight_tp_10" />
         </telerik:RadRotator>
         <asp:XmlDataSource ID="xdsTab1" XPath="XML/stuff" runat="server"></asp:XmlDataSource>
         </div>
         <asp:Image ID="SSArrowRight_tp_10" ImageUrl="~/images/SSArrowRight_on.png"  AlternateText="right" runat="server" CssClass="SSArrowRight" />
         </div>
        </ContentTemplate>
    </ajaxToolkit:TabPanel>

    <ajaxToolkit:TabPanel ID="tp_11" runat="server" HeaderText="TabPanel 2">
        <ContentTemplate>
        <div class="SlideShow_Misc_Wrapper">
        <asp:Image ID="SSArrowLeft_tp_11" ImageUrl="~/images/SSArrowLeft_on.png"  AlternateText="right" runat="server" CssClass="SSArrowLeft" />
        <div class="SlideShow_Misc_Content">
            <telerik:RadRotator ID="rr_tp_11" runat="server" DataSourceID="xdsTab2" Width="610" Height="143" FrameDuration="1" RotatorType="ButtonsOver">
            <ItemTemplate>
            <div class="SlideShowElement">
                <div style="height:40px; overflow:hidden;"><%#XPath("Description")%></div>
            </div>
            </ItemTemplate>
            <ControlButtons LeftButtonID="SSArrowLeft_tp_11" RightButtonID="SSArrowRight_tp_11" />
         </telerik:RadRotator>
         <asp:XmlDataSource ID="xdsTab2" XPath="XML/stuff" runat="server"></asp:XmlDataSource>
         </div>
         <asp:Image ID="SSArrowRight_tp_11" ImageUrl="~/images/SSArrowRight_on.png"  AlternateText="right" runat="server" CssClass="SSArrowRight" />
         </div>
        </ContentTemplate>
    </ajaxToolkit:TabPanel>

Is it possible to overwrite the 'MouseOver' effect in JS to get it works as it should be?

Thanks for any suggestions

Regards

[Pero]

Hi Petter,

Since the rotator has been residing in an invisible (display: none) parent, you need to call the rotator's repaint() method, when the second tab is clicked. Please note that, a little timeout is needed before the repaint is called - to allow enough time for the rotator to recalculate its dimensions. This is the code you need to execute when the invisible tab is clicked:

<ajaxToolkit:TabPanel ID="tp_11" runat="server" HeaderText="TabPanel 2" OnClientClick="OnClientClick">
......................

<script type="text/javascript">

    //var div_IE_Fix = rotator.get_element();
    //div_IE_Fix.style.visibility = 'visible';
    //div_IE_Fix.className = 'RadRotator RadRotator_Default rrNoBorder';
    function OnClientClick(panel, args)
    {
        var rotator = $find("<%=rr_tp_11.ClientID %>");
        setTimeout(function() { rotator.repaint(); }, 10);
    }
</script>

Kind regards,
Pero
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.