This is a migrated thread and some comments may be shown as answers.

Tab Shifting Right

1 Answer 108 Views

TabStrip

This is a migrated thread and some comments may be shown as answers.

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" %>

<html xmlns="http://www.w3.org/1999/xhtml">

<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

Tab Shifting Right

1 Answer, 1 is accepted