|
Article relates to
|
RadPanelBar v4.x
or
RadPanelBar for ASP.NET AJAX
(Telerik.Web.UI v2009.1.x)
|
|
Created by
|
Peter, Telerik
|
|
Last modified by
|
Paul, Telerik
|
HOW-TO
Preserve the expand and collapse functionality of an item which has its NavigateUrl property set.
DESCRIPTION
Normally, when you set the
NavigateUrl property, clicking on an item will redirect to the specified url. This way if the item has children, it cannot be expanded to display them. This KB offers a solution to this problem by showing how to expand and collapse the item when clicking on the arrow image.
SOLUTION
We will customize the skin of the PanelBar and remove the arrow image background from the skin. Then we will set the ImageUrl and the ExpandedImageUrl to appropriate images (the arrow images from the skin are a good choice for this purpose). Finally, we will use javascript and the Client API of the PanelBar to achieve the desired functionality.
1. Choose a skin (for this example, we will use the Default skin), copy it into your project's folder.
2. Add a link to the skin css file into the <head> section of your page:
<link type="text/css" href="Skins/Default/PanelBar.Default.css" rel="Stylesheet" />
|
3. Set the
EnableEmbeddedSkins property of the PanelBar to false:
| <telerik:RadPanelBar |
| ID="RadPanelBar1" |
| runat="server" |
| Skin="Default" |
| EnableEmbeddedSkins="false"> |
4. Comment the background property which sets the arrow images:
5. Using some image editing program, prepare two arrow images (for teh collapsed and expanded states of the item) out of Expandable.png file.
6. Set the
ImageUrl and
ExpandedImageUrl properties of the items which have a Navigate Url:
7. Use the following JavaScript and attach the onClicking handler on the
OnClientItemClicking event of the PanelBar:
| <script type="text/javascript"> |
| function onClicking(sender, eventArgs) |
| { |
| var target = eventArgs.get_domEvent().target; |
| var item = eventArgs.get_item(); |
| if (target == eventArgs.get_item().get_imageElement()) |
| { |
| if (item.get_expanded()) |
| item.collapse(); |
| else |
| item.expand(); |
| |
| eventArgs.set_cancel(true); |
| } |
| } |
| </script> |
Attached is a demo project.
SOLUTION
We will customize the skin of the panelbar and remove the arrow image from the skin. Then we will set the ImageUrl and the ExpandedImageUrl to appropriate images (the arrow images from the skin are a good choice for this purpose). Finally, we will use javascript and the Client API of the panelbar to achieve the desired functionality.
1. Choose a skin and comment the background property which sets the arrow image. For example, if we use the Default skin we need to do the following changes:
| .RadPanelBar_Default .rootGroup .text |
| { |
| /*background: url('Img/headerArrow.gif') no-repeat 11px center;*/ |
| line-height: 18px; |
| border-bottom: solid 1px #bbbbbb; |
| border-top: solid 1px white; |
| } |
| .RadPanelBar_Default .rootGroup .expanded .text |
| { |
| /*background: url('Img/HeaderArrowExpanded.gif') no-repeat 11px center;*/ |
| border-bottom: solid 1px #bbbbbb; |
| border-top: solid 1px white; |
| } |
2. To customize the appearance of the arrow image, use the
.image class. For example:
| .RadPanelBar_Default .image |
| { |
| margin: 4px 0px; |
| padding-left: 5px; |
| } |
3. Set the
ImageUrl and
ExpandedImageUrl properties of the items which have a Navigate Url:
| <radP:RadPanelItem runat="server" ImageUrl=headerArrow.gif ExpandedImageUrl=HeaderArrowExpanded.gif NavigateUrl="http://www.telerik.com" Text="Root 1"> |
4. Use the following javascript and attach the OnLoad handler on the
OnClientLoad event of the PanelBar:
| <script type="text/javascript"> |
| function OnLoad(sender, args) |
| { |
| var panelbar = sender; |
| |
| for (var i = 0; i < panelbar.AllItems.length; i++) |
| { |
| var panelItem = panelbar.AllItems[i]; |
| |
| if (panelItem.ImageElement) |
| { |
| panelItem.ImageElement.AssociatedItem = panelItem; |
| panelItem.ImageElement.onclick = function (e) |
| { |
| if (!e) e = window.event; |
| |
| if (this.AssociatedItem.Expanded) |
| { |
| this.AssociatedItem.Collapse(); |
| } |
| else |
| { |
| this.AssociatedItem.Expand(); |
| } |
| |
| e.cancelBubble = true; |
| if (e.stopPropagation) |
| { |
| e.stopPropagation(); |
| } |
| return false; |
| } |
| } |
| } |
| } |
| </script> |
| <radP:RadPanelBar ID="RadPanelBar1" OnClientLoad="OnLoad" Skin="Default" runat="server" style="z-index: 100; left: 348px; position: absolute; top: 249px"> |
| |
Attached is a demo project.
Please
Sign In
to rate this article.