Expandable arrow on left side "jumps" when clicked

2 posts, 0 answers
  1. Brad H
    Brad H avatar
    31 posts
    Member since:
    Aug 2009

    Posted 23 Feb 2010 Link to this post

    I'm having a problem with my RadPanelBar in the left side navigation of our site.  I have added a collapsed and expanded arrow on the left side of the nodes using an implementation given to me in this thread.  The panelbar is working great and is currently in production....the collapse animation works perfect in all testing.  However, during the expand animation just as the node is clicked, their is an annoying "jump".  Typically, if the item is expanded, collapsed and then expanded again, you'll see the jump.  So, on the second expand.  I also see it on the "entering" expand.  i.e.  the first item the user expands.  It seems that the item goes through a brief transition between the collapsed image and the expanded image where there is no image at all.  This brief transition causes the text to be shifted to the left for a split second causing the "jump" affect.  I have not been able to correct this issue with any CSS changes or animation type/duration changes.  It's a minor issue but one we would like to fix.  Any help would be greatly appreciated.

    Here is my code -
    in my ascx:
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    <asp:SqlDataSource ID="#####" runat="server" ConnectionString="<%$ ##### %>" 
        ProviderName="System.Data.SqlClient"></asp:SqlDataSource> 
    <telerik:RadPanelBar ID="PanelBarLeft" runat="server" Skin="SideNav" EnableEmbeddedBaseStylesheet="false" 
        EnableEmbeddedSkins="false" OnPreRender="PanelBarLeft_PreRender" ExpandMode="SingleExpandedItem" 
        AllowCollapseAllItems="true" DataSourceID="#####" DataFieldID="ID" DataFieldParentID="ParentID" 
        DataTextField="Text" DataNavigateUrlField="URL2" AppendDataBoundItems="true"> 
        <Items> 
            <telerik:RadPanelItem runat="server" Text="Our Products" Value="1"> 
            </telerik:RadPanelItem> 
            <telerik:RadPanelItem runat="server" Text=" " Visible="false" Value="2" Height="390px"> 
            </telerik:RadPanelItem> 
        </Items> 
    </telerik:RadPanelBar> 


    in my ascx.vb:
    Protected Sub PanelBarLeft_DataBound(ByVal sender As Object, ByVal e As EventArgs) Handles PanelBarLeft.DataBound 
            Dim urlWithSessionID As String = Response.ApplyAppPathModifier(Request.Url.PathAndQuery) 
            Dim clickedItem As RadPanelItem = PanelBarLeft.FindItemByUrl(urlWithSessionID) 
            ' Expand the parent of the clicked item 
            If Not (clickedItem Is Nothing) Then 
                clickedItem.ExpandParentItems() 
                ShowPath(clickedItem) 
            Else 
                PanelBarLeft.CollapseAllItems() 
            End If 
        End Sub 
     
        Private Sub ShowPath(ByVal clickedItem As RadPanelItem) 
            Dim childItem As RadPanelItem 
            For Each childItem In clickedItem.PanelBar.GetAllItems() 
                childItem.CssClass = "" 
            Next childItem 
            clickedItem.CssClass = "rpSelected" 
        End Sub 
     
        Protected Sub PanelBarLeft_PreRender(ByVal sender As Object, ByVal e As EventArgs) 
            For Each item As RadPanelItem In PanelBarLeft.Items 
                If item.Items.Count > 0 Then 
                    item.ImageUrl = "#####_closed_arrow.gif" 
                    item.ExpandedImageUrl = "#####_open_arrow.gif" 
                    For Each subItem As RadPanelItem In item.Items 
                        If subItem.Items.Count > 0 Then 
                            subItem.ImageUrl = "#####_closed_arrow.gif" 
                            subItem.ExpandedImageUrl = "#####_open_arrow.gif" 
                        End If 
                    Next 
                End If 
            Next 
        End Sub 
     
        Protected Sub PanelBarLeft_ItemDataBound(ByVal sender As Object, ByVal e As RadPanelBarEventArgs) Handles PanelBarLeft.ItemDataBound 
            If Not IsDBNull(DataBinder.Eval(e.Item.DataItem, "EntityType")) Then 
                If CStr(DataBinder.Eval(e.Item.DataItem, "#####")) = "#####" Then 
                    e.Item.Visible = False 
                End If 
                If CStr(DataBinder.Eval(e.Item.DataItem, "#####")) = "#####" Then 
                    e.Item.NavigateUrl = "javascript:;" 
                End If 
                If CStr(DataBinder.Eval(e.Item.DataItem, "#####")) = "#####" Then 
                    e.Item.NavigateUrl = "#####" 
                    e.Item.Style.Add("cursor", "pointer") 
                End If 
            End If 
        End Sub 

    css:
    .RadPanelBar_SideNav 
    { 
        margin: 1px; 
        width: 153px; 
    } 
     
    .RadPanelBar_SideNav .rpRootGroup .rpFirst 
    { 
        background-color: #003466; 
        text-indent: 10px; 
    } 
    .RadPanelBar_SideNav .rpRootGroup .rpFirst a 
    { 
        padding: 5px 0px !important; 
        font-weight: bold !important; 
        border-left: none !important; 
        border-right: none !important; 
        color: White !important; 
        font-family: Arial, Sans-Serif; 
        font-size: 14px; 
        cursor: default; 
    } 
    .RadPanelBar_SideNav .rpRootGroup .rpItem a 
    { 
        padding: 10px 0px; 
        font-weight: 400; 
        border-left: solid 10px #B0C4DD; 
        border-right: solid 10px #B0C4DD; 
        color: #003466; 
        border-bottom: solid 1px #D3E1EE; 
    } 
     
    .RadPanelBar_SideNav .rpRootGroup 
    { 
        background-color: #B0C4DD; 
    } 
    .RadPanelBar_SideNav .rpRootGroup .rpLast a, 
    .RadPanelBar_SideNav .rpRootGroup .rpLast .rpGroup .rpLast a 
    { 
        border-bottom: none; 
    } 
    .RadPanelBar_SideNav .rpRootGroup .rpLast .rpExpanded 
    { 
        border-bottom: solid 1px #D3E1EE; 
    } 
     
    .RadPanelBar_SideNav .rpLink, 
    .RadPanelBar_SideNav .rpTemplate 
    { 
        color: #fff; 
    } 
     
    .RadPanelBar_SideNav .rpLink .rpText 
    { 
        text-indent: 10px; 
    } 
     
    /* <expand arrows> */ 
    .RadPanelBar_SideNav .rpExpandable .rpText, 
    .RadPanelBar_SideNav .rpExpanded .rpText 
    { 
        background-color: transparent; 
        background-image: none !important; 
        text-indent: 0px !important; 
    } 
    .RadPanelBar_SideNav .rpExpandable .rpImage 
    { 
        vertical-align: middle; 
        padding: 4px 5px 3px 2px; 
    } 
    .RadPanelBar_SideNav .rpExpanded .rpImage 
    { 
        vertical-align: middle; 
        padding: 6px 3px 5px 0px; 
    } 
    /* </expand arrows> */ 
     
    /* <subitems> */ 
    .RadPanelBar_SideNav .rpGroup .rpFirst 
    { 
        background-color: #B0C4DD; 
        border-left: solid 10px #B0C4DD; 
        border-right: solid 10px #B0C4DD; 
        padding: 0px; 
    } 
    .RadPanelBar_SideNav .rpGroup .rpFirst a 
    { 
        padding: 5px 0px 1px 0px !important; 
    } 
    .RadPanelBar_SideNav .rpGroup .rpItem a 
    { 
        color: #003466; 
        border-bottom: none; 
        padding: 0px; 
        cursor: pointer; 
    } 
    .RadPanelBar_SideNav .rpGroup .rpItem .rpText 
    { 
        background-color: #B0C4DD; 
        text-indent: 20px !important; 
        padding: 1px 0px; 
        font-weight: 400; 
        color: #003466; 
        font-size: 10px; 
        line-height: 15px; 
    } 
    .RadPanelBar_SideNav .rpGroup .rpLast a 
    { 
        width: 133px; 
        border-bottom: solid 1px #D3E1EE; 
        padding-bottom: 5px; 
    } 
     
    .RadPanelBar_SideNav .rpGroup .rpLink, 
    .RadPanelBar_SideNav .rpGroup .rpTemplate 
    { 
        background-image: none; 
        background-color: transparent; 
    } 
     
    .RadPanelBar_SideNav .rpGroup .rpLink, 
    .RadPanelBar_SideNav .rpGroup .rpLink .rpOut 
    {        
        background-color: transparent; 
        background-repeat: no-repeat; 
    } 
     
    /* <root items (disabled)> */ 
    .RadPanelBar_SideNav .rpDisabled:hover 
    { 
        cursor: default; 
    } 
    /* </root items (disabled)> */ 

    Thank you in advance.
  3. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 01 Mar 2010 Link to this post

    Hi Brad,

    Can you open a support ticket and send us a simple working demo which shows the problem? We will do our best to correct the problem.


    Greetings,
    Peter
    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.
Back to Top