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:
in my ascx.vb:
css:
Thank you in advance.
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.