Scrolling with "ButtonsOver" in ajaxToolkit:TabPanel with IE

2 posts, 0 answers
  1. petter rakinen
    petter rakinen avatar
    1 posts
    Member since:
    Aug 2009

    Posted 25 Mar 2010 Link to this post

    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  
    {  
    height143px;   
    width610px;  
    }  
     
    .rrClipRegion  
    {  
    overflowhidden;   
    width610px;   
    height143px;   
    positionrelative;  
    }  
     
    .rrItemsList  
    {  
    left: 0px/* dynamicaly changed on 'MouseOver' */ 
    top0px;   
    width3660px/* dynamicaly computed */ 
    height32px;  /* dynamicaly computed */ 
    positionrelative;  
    }  
    </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
  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 30 Mar 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top