[Solved] Expandable arrow on left side "jumps" when clicked

[Brad H]

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.

[Peter]

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.