Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Tab Shifting Right

1 Answer 66 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Rob
Top achievements
Rank 1
Rob asked on 20 Jun 2012, 03:49 PM
I am using RadControls v2011.3.1305.40, VS2010, Win7, & IE8.  I was brought into a project late in the development cycle, so I can't explain why this page was coded the way it was, so it is what it is.  I stripped the code down to its simplest form in order to provide a working example of the issue.

The page has a vertical RadSplitter in order to provide left hand navigation (LHN) for the user.  The LHN consists of a panel bar w/ 3 panels and a RadSlidingZone/RadSlidingPane.  The right side of the splitter (aka the content body) consists of RadTabStrip w/ 2 tabs and a corresponding RadMultiPage.  Tab 1 is selected & the sliding pane is collapsed by default.  Notice the left side of Tab 1 is flush against the right side of the splitter.  When the user clicks on Tab 2, the code behind sleeps for 3 seconds in order to display the loading panel and the sliding pane is expanded.  All if fine and dandy until the user clicks on Tab 1.  The sliding pane collapses, sleeps again for 3 seconds while displaying the loading panel, and there is now an empty space between the right side of the splitter and the left of Tab 1.  Somehow the tabs shifted in position to the right, where I need to have the left side of the tabs flush against the right side of the splitter just how it looked when the page was loaded by default.  There seems to be a rendering issue on the postback event.

Here is a short video of the issue:

http://screencast.com/t/vg5craqj8w

In my app, the tab clicking is ajaxified and works well, but for some odd reason the screen seems to be flickering behind the loading panel for this demo.  Can you help me get the tab clicking ajaxified properly for this demo as well?

Here's the code:

<%@ Page Title="" Language="vb" AutoEventWireup="false" CodeBehind="p_TabShifing.aspx.vb" Inherits="MySolution.p_TabShifing" %>
  
<head id="aspHead" runat="server">
    <title runat="server" id="aspTitle">Tab Shifting Demo</title>
    <style type="text/css">
        .divTitleBar {
            overflow: hidden;
            position: relative;
            height: 25px;
            background: #FFFFFF;
            font: bold 16pt arial;
            text-align: center;
        }
        .divMenuBar {
            overflow: visible;
            height: 27px;
            border-bottom: solid 3px #FFFFFF;
            background-color: #336699;
            font: bold 10pt arial;
        }
        .divTabStrip {
            overflow: hidden;
            position: relative;
            height: 22px;
            overflow: hidden;
            padding-top: 4px;
            vertical-align: middle;
            background-color: #B0C4DE;
        }
        .lpFull {
            position: absolute;
            top: 0px;
            left: 0px;
            bottom: 0px;
            right: 0px;
            text-align: center;
            z-index: 9999;
        }
        .tabsContainer, .rspTabsContainer {
            background: #B0C4DE !important;
            border-right: #336699 1px solid !important;
        }
        .Navigation_Title {
            font-size: 10pt; 
            padding: 5px 9px 5px 21px;
            color: #FFFFFF;
            border-top: 1px solid #ebebeb;
            border-bottom: 1px solid #ebebeb;
            height: 15px;
            background: #336699 url(../Telerik/PanelBar/ArrowDownWhite.gif) no-repeat 9px 9px !important;
        }
        .RadPanelBar_B .rpTemplate {
            background: #B0C4DE !important;
        }
        .RadPanelBar_B .rpRootGroup .rpText {
            background-position: 35px 9px;
            margin-left: 17px !important;
            margin-right: 2px !important;
            padding-left: 47px !important;
            }
        .RadPanelBar_B .rpRootGroup .rpExpandable .rpText {
            background-position: 35px 9px;
        }
        .RadPanelBar_B .rpRootGroup .rpExpandable:Hover .rpText {
            background-position: 35px 9px;
        }
        .RadPanelBar_B .rpRootGroup .rpExpanded .rpText {
            background-position: 35px 9px;
        }
          
    </style>
    <script language="javascript" type="text/javascript">
        function ajaxStartReq(s, e) {
        }
        function ajaxEndResp(s, e) {
        }
        function spl_Loaded(s, e) {
            s.get_element().style.visibility = 'inherit';
        }
    </script>
</head>
<body>
    <form id="aspForm" runat="server">
        <telerik:RadStyleSheetManager runat="server" ID="styleMgr" EnableStyleSheetCombine="false">
        </telerik:RadStyleSheetManager>
        <telerik:RadScriptManager runat="server" ID="scrptMgr" AsyncPostBackTimeout="600"
            EnableScriptCombine="false" ScriptMode="Release">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <div runat="server" id="divHdr" class="divTitleBar">
            Tab Shifting Demo
        </div>
        <div class="divMenuBar">
        </div>
        <telerik:RadAjaxManager ID="axMgr" runat="server" EnablePageHeadUpdate="False" UpdatePanelsRenderMode="Inline"
            ClientEvents-OnRequestStart="ajaxStartReq" ClientEvents-OnResponseEnd="ajaxEndResp"
            DefaultLoadingPanelID="axLP">
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" IsSticky="true" CssClass="lpFull"
            BackgroundPosition="Center" Transparency="45" BackColor="Gainsboro" InitialDelayTime="600">
            <img src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'
                alt="Loading..." />
        </telerik:RadAjaxLoadingPanel>
        <telerik:RadSplitter runat="server" ID="splM" SkinID="BlueBT" OnClientLoad="spl_Loaded"
            VisibleDuringInit="false">
            <telerik:RadPane runat="server" ID="pNav" SkinID="pLNav" Height="100%">        
            <telerik:RadAjaxPanel runat="server" ID="rapBody">
                <telerik:RadAjaxPanel runat="server" ID="rapNav">
                    <div id="DivSLZone" runat="server" style="float: left; clear: none; width: 22px;
                        height: 100%;" class="tabsContainer">
                        <telerik:RadSlidingZone ID="slZone" runat="server" SlideDirection="Right" ClickToOpen="true" Width="22">
                            <telerik:RadSlidingPane ID="slPaneLoc" Title="Slider Panel" runat="server" Width="240"
                                EnableDock="false" Height="100%" MinWidth="100" Style="z-index: 1;">
                                <telerik:RadAjaxPanel runat="server" ID="rapLoc">
                                    Slider Panel
                                </telerik:RadAjaxPanel>
                            </telerik:RadSlidingPane>
                        </telerik:RadSlidingZone>
                    </div>
                </telerik:RadAjaxPanel>
                <div runat="server" id="divNav" class="Navigation_Title">
                    Fake Root Panel
                </div>
                <div id="divPnlBar" runat="server">
                    <telerik:RadPanelBar runat="server" ID="pbPnlBar" CssClass="RadPanelBar_B" Height="96%"
                        Width="100%" Style="width: auto; position: static; border: 0;" BackColor="Transparent"
                        ExpandMode="FullExpandedItem">
                        <CollapseAnimation Type="OutQuint" />
                        <ExpandAnimation Type="InQuint" />
                        <Items>
                            <telerik:RadPanelItem Text="Pane 1" Expanded="true">
                                <Items>
                                    <telerik:RadPanelItem>
                                        <ItemTemplate>
                                            <telerik:RadAjaxPanel runat="server" ID="rapAjax">
                                                Panel 1
                                            </telerik:RadAjaxPanel>
                                        </ItemTemplate>
                                    </telerik:RadPanelItem>
                                </Items>
                            </telerik:RadPanelItem>
                            <telerik:RadPanelItem Text="Panel 2">
                                <Items>
                                    <telerik:RadPanelItem>
                                        <ItemTemplate>
                                            <telerik:RadAjaxPanel runat="server" ID="rapAjax">
                                                Panel 2
                                            </telerik:RadAjaxPanel>
                                        </ItemTemplate>
                                    </telerik:RadPanelItem>
                                </Items>
                            </telerik:RadPanelItem>
                            <telerik:RadPanelItem Text="Panel 3">
                                <Items>
                                    <telerik:RadPanelItem>
                                        <ItemTemplate>
                                            <telerik:RadAjaxPanel runat="server" ID="rapAjax">
                                                Panel 3
                                            </telerik:RadAjaxPanel>
                                        </ItemTemplate>
                                    </telerik:RadPanelItem>
                                </Items>
                            </telerik:RadPanelItem>
                        </Items>
                    </telerik:RadPanelBar>
                </div>
            </telerik:RadAjaxPanel>
            </telerik:RadPane>
            <telerik:RadSplitBar runat="server" ID="sBar1" CollapseMode="Forward" EnableResize="true" />
            <telerik:RadPane runat="server" ID="pContent" Scrolling="none" BackColor="white">
                <telerik:RadAjaxLoadingPanel ID="axLP" runat="server" IsSticky="true" BackgroundPosition="Center"
                    Transparency="45" BackColor="Gainsboro" Style="top: 0; left: 0; height: 100%;
                    z-index: 0 !important;">
                    <table style="height: 100%; width: 100%" border="0">
                        <tr>
                            <td width="100%" align="center" valign="middle">
                                <img src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'
                                    alt="Loading..." style="border: 0px;" />
                            </td>
                        </tr>
                    </table>
                </telerik:RadAjaxLoadingPanel>
                <div class="divTabStrip">
                    <telerik:RadTabStrip runat="server" ID="tsPage" Height="40px" SelectedIndex="0" PerTabScrolling="True"
                        ClickSelectedTab="True" ScrollChildren="True" ScrollButtonsPosition="Middle"
                        MultiPageID="RadMultiPage1" OnClientTabSelected="ToggleDockPane">
                        <Tabs>
                            <telerik:RadTab runat="server" Text="Tab 1" Value="t1" Width="100px" PageViewID="pv1">
                            </telerik:RadTab>
                            <telerik:RadTab runat="server" Text="Tab 2" Value="t2" Width="100px" PageViewID="pv2">
                            </telerik:RadTab>
                        </Tabs>
                    </telerik:RadTabStrip>
                </div>
                <telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0">
                    <telerik:RadPageView runat="server" ID="pv1">
                        Tab 1
                    </telerik:RadPageView>
                    <telerik:RadPageView runat="server" ID="pv2">
                        Tab 2
                    </telerik:RadPageView>
                </telerik:RadMultiPage>
            </telerik:RadPane>
        </telerik:RadSplitter>
    </form>
</body>
</html>
  
    <script language="javascript" type="text/javascript">
      
        function ToggleDockPane(sender, args) {
            var tabStrip = $find("<%= Me.tsPage.ClientID %>");
            var slidingZone = $find("<%= Me.slZone.ClientID %>");
            var expandedPaneId = slidingZone.get_expandedPaneId();
  
            if (args.get_tab().get_value() == "t2") {
                if (expandedPaneId == null || expandedPaneId != "slPaneLoc") {
                    slidingZone.expandPane("slPaneLoc");
                }
            } else {
                slidingZone.collapsePane("slPaneLoc");
            }
        }
          
  
    </script>
Imports Telerik.Web.UI
  
Public Class p_TabShifing
  
    Inherits System.Web.UI.Page
  
    Private Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
        Ajaxify()
    End Sub
  
    Private Sub tsPage_TabClick(sender As Object, e As Telerik.Web.UI.RadTabStripEventArgs) Handles tsPage.TabClick
        System.Threading.Thread.Sleep(3000)
    End Sub
  
    Private Sub Ajaxify()
        Dim axSett As AjaxSetting = New AjaxSetting(Me.tsPage.UniqueID)
        axSett.UpdatedControls.Add(New AjaxUpdatedControl(Me.tsPage.UniqueID, Me.axLP.UniqueID))
        axSett.UpdatedControls.Add(New AjaxUpdatedControl(Me.RadMultiPage1.UniqueID, String.Empty))
        axMgr.AjaxSettings.Add(axSett)
    End Sub
  
End Class

Thank you,

Rob

1 Answer, 1 is accepted

Sort by
0
Peter
Telerik team
answered on 28 Jun 2012, 11:05 AM
Hi Rob,

I tested your code, but the result I get is different from the video you sent. Can you open a support ticket and send us a simple demo of the issue?

Greetings,
Peter
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
TabStrip
Asked by
Rob
Top achievements
Rank 1
Answers by
Peter
Telerik team
Share this question
or