Expand Behaviour fix not working with Q1 2009

[Chris]

Hi, I am using the Q1 2009 release of your amazing controls. I am using the Panel Bar with a sitemap data source (MOSS2007). This leads to me no being able to expand the panels as the top level items have a url set. I have followed the KB article 'Preserve the expand and collapse functionality of an item which has its NavigateUrl property set.' There are a number of thins that don't add up when comparing the example against the Q1 2009 control.

1. There is no image element to be found in the DOM of the panelbar the expand arrows are just the backgund image of the SPAN tag. This means that the java script function to trap the click fails everytime as there is no ImageElement
2. The 'panelbar.AllItems.length' fails on each call as 'AllItems' is undefined.
3. Using the code behind method to add Image and Expanded Image urls doesn't seem to work for me, the only way I could get them to show up was to modify the css as follows :

	/* <expand arrows> */
	/*
	.RadPanelBar_ECPanelBar .rpExpandable .rpText,
	.RadPanelBar_ECPanelBar .rpExpanded .rpText
	{
	background-color: transparent;
	background-image: url('PanelBar/Expandable.png');
	}
	*/
	.RadPanelBar_ECPanelBar .rpExpandable .rpText,
	{
	background-color: transparent;
	background-image: url('PanelBar/arrow-down.png');
	}
	.RadPanelBar_ECPanelBar .rpExpanded .rpText
	{
	background-color: transparent;
	background-image: url('PanelBar/arrow-up.png');
	background-position: 100% 0px !important;
	}
	/* </expand arrows> */

The 0px is due to the standard value being -467px and hiding the image.

Please see the markup of the composite control I am making (due to code behind restictions in MOSS this is a much easier way)

	<%@ Control Language="C#" AutoEventWireup="true" CodeFile="LeftNav.ascx.cs" Inherits="usercontrols_LeftNav" compilationMode="Always" %>
	<%@ Register assembly="Telerik.Web.UI, Version=2009.1.311.20, Culture=neutral, PublicKeyToken=121fae78165ba3d4"
	namespace="Telerik.Web.UI" tagprefix="telerik" %>
	<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>
	<telerik:RadAjaxManagerProxy runat="server" ID="rampChild" >
	</telerik:RadAjaxManagerProxy>
	<telerik:RadPanelBar runat="server" ID="rpbVertNav" PersistStateInCookie="true"
	Skin="ECPanelBar"
	ExpandMode="SingleExpandedItem" EnableEmbeddedSkins="false"
	OnClientItemClicking="onClicking" onitemdatabound="rpbVertNav_ItemDataBound">
	</telerik:RadPanelBar>

	using System;
	using System.Web;
	using Telerik.Web.UI;
	public partial class usercontrols_LeftNav : System.Web.UI.UserControl
	{
	private string _siteMapID = "QuickLaunchSiteMap";
	public string siteMapID { get { return this._siteMapID; } set { this._siteMapID = value; } }
	protected void Page_Load(object sender, EventArgs e)
	{
	}
	protected override void OnInit(EventArgs e)
	{
	base.OnInit(e);
	rpbVertNav.DataSourceID = _siteMapID;
	}
	protected void rpbVertNav_ItemDataBound(object sender, RadPanelBarEventArgs e)
	{
	if (e.Item.Items.Count > 0)
	{
	e.Item.ImageUrl = "arrow-down.png";
	e.Item.ExpandedImageUrl = "arrow-up.png";
	e.Item.ImagePosition = RadPanelItemImagePosition.Right;
	}
	}
	}

This is the js I was trying to use as taken from your sample

	<script type="text/javascript">
	<!-- For radPanelBar -->
	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>

I really want to use this panel bar control for my navigation in this site but i cannot as it will not expand as expected. PLease can you update the sample to work with Q1 2009 or post a 2009 working sample using a sitemapdatasource.

Many Thanks

Chris

[Chris]

FIXED

Hi I started playing around more and found out why I was not getting any Image Elements. The code in the ItemDatabound event was not working with either the Q1 2009 control or the sitemap data source. Anyway here is the fix I used to get it going.

Code behind for ItemDatabound

    protected void rpbVertNav_ItemDataBound(object sender, RadPanelBarEventArgs e)
    {
        System.Web.SiteMapNode sm = e.Item.DataItem as SiteMapNode;

        if ((sm.ChildNodes.Count > 0) && (sm.ParentNode.Key == sm.RootNode.Key))
        {
            e.Item.ImageUrl = "arrow-down.png";
            e.Item.ExpandedImageUrl = "arrow-up.png";
            e.Item.ImagePosition = RadPanelItemImagePosition.Right;
        }
    }

CSS is back to the same as the sample in the KB

/* <expand arrows> */
.RadPanelBar_ECPanelBar .rpExpandable .rpText,
.RadPanelBar_ECPanelBar .rpExpanded .rpText
{
    background-color: transparent;
    /*background-image: url('PanelBar/Expandable.png');*/
}

/* </expand arrows> */

and here is the markup for the PanelBar

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="LeftNav.ascx.cs" Inherits="usercontrols_LeftNav" compilationMode="Always" %>
<%@ Register assembly="Telerik.Web.UI, Version=2009.1.311.20, Culture=neutral, PublicKeyToken=121fae78165ba3d4"
        namespace="Telerik.Web.UI" tagprefix="telerik" %>

<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>

<telerik:RadAjaxManagerProxy runat="server" ID="rampChild" >
</telerik:RadAjaxManagerProxy>
<telerik:RadPanelBar runat="server" ID="rpbVertNav" PersistStateInCookie="true"
     Skin="ECPanelBar"
    ExpandMode="SingleExpandedItem" EnableEmbeddedSkins="false"
    OnClientItemClicking="onClicking" onitemdatabound="rpbVertNav_ItemDataBound"
    MaxDataBindDepth="2">
</telerik:RadPanelBar>

Thanks again for the amazing set of controls. I hope this will helpout someone else.

Chris

[Jeremy]

I am attempting to utilize the above methodology, but I've ran into the following issue.  I'm doing something wrong, and it's probably obvious....

upon call of the javascript function, I get the alert("Got Here"), but I never get a match(false) on the next statement, hence I never get an expand or a collapse.... and NEVER get the second 'false' or 'true' can someone give me some insight to what I'm doing wrong??

Below are the definitions:

Control Definition:

 

<telerik:RadPanelBar ID="RadPanelBar2" runat="server" Skin="Web20" ExpandMode="SingleExpandedItem" OnClientItemClicking="onClicking">

</telerik:RadPanelBar>

Fill Function:

 

    protected void FillContextualPanelBar2(SiteMapNode siteMapNode)
    {
        RadPanelItem panelItem = new RadPanelItem();
        panelItem.Text = siteMapNode.Title.ToString();
        panelItem.NavigateUrl = siteMapNode.Url.ToString();
        RadPanelBar2.Items.Add(panelItem);
        foreach (SiteMapNode currNode in siteMapNode.ChildNodes)
        {
            RadPanelItem panelItem2 = new RadPanelItem();
            panelItem2.Text = currNode.Title;
            panelItem2.NavigateUrl = currNode.Url;
            foreach (SiteMapNode currNodeSubNode in currNode.ChildNodes)
            {
                RadPanelItem panelItem3 = new RadPanelItem();
                panelItem3.Text = currNodeSubNode.Title;
                panelItem3.NavigateUrl = currNodeSubNode.Url;
                panelItem2.Items.Add(panelItem3);
                panelItem2.Expanded = false;
            }
            RadPanelBar2.Items.Add(panelItem2);
        }
    }

Page_Load Function

        RadPanelBar2.Items.Clear();
        FillContextualPanelBar2(SiteMap.Provider.CurrentNode);

JavaScript Function: (from previous example)

    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
    <script type="text/javascript">
        function onClicking(sender, eventArgs) {
            alert("Got Here");
            var target = eventArgs.get_domEvent().target;
            var item = eventArgs.get_item();
            if (target == eventArgs.get_item().get_imageElement()) {
                alert("true");
            }
            else {
                alert("false");
            }
            if (target == eventArgs.get_item().get_imageElement()) {
                if (item.get_expanded()) {
                    item.collapse();
                    alert("true");
                }
                else {
                    item.expand();
                    alert("false");
                }
                eventArgs.set_cancel(true);
            }
        }
    </script>
    </telerik:RadScriptBlock>

 

[Chris]

Hi Ray,
            the problem I faced ws that there ws no image element being added to the panelbar item so the js would fail everytime. Are you adding the image elements. If you look at my solution I had to manually add in the databound event. I guess you could add in your FillContextualPanelBar2function?

Hope this helps

Chris

[Jeremy]

As to the images, I used them, and then removed them, I got that part working.  My issue is the javascript code.  Why would i ALWAYS get a false with the following code:

      function onClicking(sender, eventArgs) {
            alert("Got Here");
            var target = eventArgs.get_domEvent().target;
            var item = eventArgs.get_item();
            if (target == eventArgs.get_item().get_imageElement()) {
                alert("true");
            }
            else {
                alert("false");
            }
       }

I always get a "Got Here", showing me that the onclick event is firing, and ALWAYS a false with it.
I need a true on the if statement to get to the expand and collapse.   I'm just trying to understand what might cause this breakdown. 

The main reason I'm asking in this thread is because I found the code here ;).   Thanks for providing.

[Chris]

Hi Ray,

unfortunately I am not a javascript guru (I wish!!) I seem to remember stumbling around a lot whilst trying to find out why things were not working. But my best guess at this point is that either target or  get_ImageElement returns undefined or just fails. I would suggest using something like FireBug for Firefox to step through the js and see what the flow is and what the values are as you step through. I think this is how I found the solution to my original problem.

Sorry if this is not much more help, I'll have a better think on it and see if I can come up with any better ideas.

Chris