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 ObjectByVal 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 NothingThen 
                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 ObjectByVal 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 ObjectByVal 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 
        margin1px
        width153px
     
    .RadPanelBar_SideNav .rpRootGroup .rpFirst 
        background-color#003466
        text-indent10px
    .RadPanelBar_SideNav .rpRootGroup .rpFirst a 
        padding5px 0px !important; 
        font-weightbold !important; 
        border-leftnone !important; 
        border-rightnone !important; 
        color: White !important; 
        font-familyArial, Sans-Serif
        font-size14px
        cursordefault
    .RadPanelBar_SideNav .rpRootGroup .rpItem a 
        padding10px 0px
        font-weight: 400; 
        border-leftsolid 10px #B0C4DD
        border-rightsolid 10px #B0C4DD
        color#003466
        border-bottomsolid 1px #D3E1EE
     
    .RadPanelBar_SideNav .rpRootGroup 
        background-color#B0C4DD
    .RadPanelBar_SideNav .rpRootGroup .rpLast a, 
    .RadPanelBar_SideNav .rpRootGroup .rpLast .rpGroup .rpLast a 
        border-bottomnone
    .RadPanelBar_SideNav .rpRootGroup .rpLast .rpExpanded 
        border-bottomsolid 1px #D3E1EE
     
    .RadPanelBar_SideNav .rpLink, 
    .RadPanelBar_SideNav .rpTemplate 
        color#fff
     
    .RadPanelBar_SideNav .rpLink .rpText 
        text-indent10px
     
    /* <expand arrows> */ 
    .RadPanelBar_SideNav .rpExpandable .rpText, 
    .RadPanelBar_SideNav .rpExpanded .rpText 
        background-colortransparent
        background-imagenone !important; 
        text-indent0px !important; 
    .RadPanelBar_SideNav .rpExpandable .rpImage 
        vertical-alignmiddle
        padding4px 5px 3px 2px
    .RadPanelBar_SideNav .rpExpanded .rpImage 
        vertical-alignmiddle
        padding6px 3px 5px 0px
    /* </expand arrows> */ 
     
    /* <subitems> */ 
    .RadPanelBar_SideNav .rpGroup .rpFirst 
        background-color#B0C4DD
        border-leftsolid 10px #B0C4DD
        border-rightsolid 10px #B0C4DD
        padding0px
    .RadPanelBar_SideNav .rpGroup .rpFirst a 
        padding5px 0px 1px 0px !important; 
    .RadPanelBar_SideNav .rpGroup .rpItem a 
        color#003466
        border-bottomnone
        padding0px
        cursorpointer
    .RadPanelBar_SideNav .rpGroup .rpItem .rpText 
        background-color#B0C4DD
        text-indent20px !important; 
        padding1px 0px
        font-weight: 400; 
        color#003466
        font-size10px
        line-height15px
    .RadPanelBar_SideNav .rpGroup .rpLast a 
        width133px
        border-bottomsolid 1px #D3E1EE
        padding-bottom5px
     
    .RadPanelBar_SideNav .rpGroup .rpLink, 
    .RadPanelBar_SideNav .rpGroup .rpTemplate 
        background-imagenone
        background-colortransparent
     
    .RadPanelBar_SideNav .rpGroup .rpLink, 
    .RadPanelBar_SideNav .rpGroup .rpLink .rpOut 
    {        
        background-colortransparent
        background-repeatno-repeat
     
    /* <root items (disabled)> */ 
    .RadPanelBar_SideNav .rpDisabled:hover 
        cursordefault
    /* </root items (disabled)> */ 

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