Tab Shifting Right

2 posts, 0 answers
  1. Rob
    Rob avatar
    115 posts
    Member since:
    Aug 2012

    Posted 20 Jun 2012 Link to this post

    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
  2. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 28 Jun 2012 Link to this post

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