scrollchildren in raddock not visible in UI for ASP.NET AJAX TabStrip

Robert Lampe

13 posts

Member since:
Jan 2010

Posted 03 May 2010 Link to this post

Hi,

I've some problem with a tabstrip at a raddock. When i remove the raddock from the radzone, the visibility of the scroller will be messed up. If the scroller is not visible, I have to reset the raddock to the radzone and then drag it out of the zone again to see / hide the scroller.

I have no idea what I do wrong:)?

Thank you,
Robert

Yana

Admin

5032 posts

Posted 06 May 2010 Link to this post

Hi Robert Lampe,

Could you please paste some sample here so we can test the scenario? Thanks

Kind regards,
Yana
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.

Robert Lampe

13 posts

Member since:
Jan 2010

Posted 06 May 2010 Link to this post

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="TabStripTest.aspx.cs" Inherits="TabStripTest" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html> 
        
            <head id="Head1" runat="server"> 
        
                <title></title> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                <asp:ScriptManager ID="ScriptManager1" EnableScriptGlobalization="true" runat="server" /> 
        
                <telerik:RadDockLayout runat="server" ID="RadDockLayout1"> 
        
                    <telerik:RadDockZone ID="RadDockZone1" runat="server" Orientation="Vertical"> 
        
                        <telerik:RadDock ID="RadDock1" runat="server" EnableAnimation="true" EnableRoundedCorners="true" 
        
                            Resizable="true"> 
        
                            <ContentTemplate> 
        
                                <telerik:RadTabStrip ID="RadTabStrip2" runat="server" ScrollChildren="true" SelectedIndex="0" 
        
                                    ReorderTabsOnSelect="true"> 
        
                                    <Tabs> 
        
                                        <telerik:RadTab Text="Long Name" /> 
        
                                        <telerik:RadTab Text="Long Name" /> 
        
                                        <telerik:RadTab Text="Long Name" /> 
        
                                        <telerik:RadTab Text="Long Name" /> 
        
                                        <telerik:RadTab Text="Long Name" /> 
        
                                        <telerik:RadTab Text="Long Name" /> 
        
                                        <telerik:RadTab Text="Long Name" /> 
        
                                    </Tabs> 
        
                                </telerik:RadTabStrip> 
        
                            </ContentTemplate> 
        
                        </telerik:RadDock> 
        
                    </telerik:RadDockZone> 
        
                </telerik:RadDockLayout> 
        
                </form> 
        
            </body> 
        
            </html>

So ones again, if the RadDock is larger then the tabstrib no scrollers are visible for the tabstrip (ScrollChildren not visible). When you drag the RadDock from the zone and resize the pane smaller then the tabstrib, still no scroller is visible.
This also works the other way around (raddock < tabstrip, drag raddock out of zone, resize, tabstrip > raddock, scrollers still visible).

Thanks for the quick response!

Robert

tabstripexample.png

Robert Lampe

13 posts

Member since:
Jan 2010

Posted 06 May 2010 Link to this post

Better .png example.

tabstripexample.png

Yana

Admin

5032 posts

Posted 11 May 2010 Link to this post

Hello Robert,

Thank you for sending the code.

You should manually call repaint() method of the tabstrip in order to force it to resize - this can be done in OnClientDockPositionChanged event hanlder of the dock:

<telerik:RadDockZone ID="RadDockZone1" runat="server" Orientation="Vertical">

<telerik:RadDock ID="RadDock1" runat="server" EnableAnimation="true" EnableRoundedCorners="true" OnClientDockPositionChanged="dockPositionChanged"

Resizable="true">

and the handler:

<script type="text/javascript">

function dockPositionChanged(sender, args) {

var tabstrip = $find("<%=RadTabStrip2.ClientID%>");

tabstrip.repaint();

}

</script>

Regards,
Yana
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.