This is a migrated thread and some comments may be shown as answers.

RadpanelBar Expand Collapse

3 Answers 163 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Nishith
Top achievements
Rank 1
Nishith asked on 12 Oct 2011, 04:35 PM
Hi I am using RadPanelBar and creating the HeaderTemplate dynamically and bind the data to it which is coming from database. If you see the attached screenshot the Root item "Channel Queue" has some child panel items and I want on click of header it should show all child items and if I click the header again it should collapse. Is it possible ?

Now if I click the header for first time it is getting expanded and but on click of root panel it is not getting collapse. But it is getting collapsed only when i clicked other root items like (Case Identifier, Compliance or 2nd Level).

Can we achieve this functionality either by using java script / code behind ? 

Regards,
Nishith

3 Answers, 1 is accepted

Sort by
0
Kate
Telerik team
answered on 17 Oct 2011, 11:52 AM
Hi Nishith,

In general when you use a HeaderTemplate and a ContentTemplate of the RadPanelBar and have set the ExpandMode property to SingleExpandedItem  you can not collapse the root items on the second click but rather when a new root item is expanded. However, using the same property -  ExpandMode - and set it to MultipleExpandedItems you can achieve the desired functionality. You can refer to this demo and the attached runnable page for further reference.

Kind regards,
Kate
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Nishith
Top achievements
Rank 1
answered on 18 Oct 2011, 03:44 AM
Thanks for your reply.

I am trying to follow the sample that you have attached in this reply. Only I had changed in the RadPanelBar DataBound Event, I am trying to set the HeaderTemplate for each RadPanelItem, but getting a null reference error. Whereas if I try to set ItemTemplate instead of HeaderTemplate it is working fine. But as per my requirement, I need to have a HeaderTemplate set for each Panel Item dynamically.

I have attached the code here. Could you please hava a look and let me know what is going wrong here. Waiting for your response soon.

Thanks,
Nishith Ghoshal
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
using Entities;
using System.Data;
using System.Web.UI.HtmlControls;
 
public partial class UserControl_LeftNavigationUC : System.Web.UI.UserControl
{
    public delegate void LeftNavigationClickHandler(object sender, RadPanelBarEventArgs e);
 
    private bool bIsChannel;
    public bool IsChannel
    {
        get
        {
            return bIsChannel;
        }
        set
        {
            bIsChannel = value;
        }
    }
 
    public IList<LeftNavigationItems> NavigationItems
    {
        set
        {
            if (value != null)
            {
                if (bIsChannel)
                {
                    var channelQueueItems = value.Where(t => t.IsChannelQueue);
                    rpbLeftNavigation.DataFieldID = "ID";
                    rpbLeftNavigation.DataFieldParentID = "ParentID";
                    rpbLeftNavigation.DataTextField = "Text";
                    rpbLeftNavigation.DataValueField = "Count";
                    rpbLeftNavigation.DataSource = channelQueueItems;
                    rpbLeftNavigation.DataBind();
                }
                else
                {
                    var commonQueueItems = value.Where(t => !t.IsChannelQueue);
                    rpbLeftNavigation.DataFieldID = "ID";
                    rpbLeftNavigation.DataFieldParentID = "ParentID";
                    rpbLeftNavigation.DataTextField = "Text";
                    rpbLeftNavigation.DataValueField = "Count";
                    rpbLeftNavigation.DataSource = commonQueueItems;
                    rpbLeftNavigation.DataBind();
                }
            }
        }
    }
 
    public void ClearSelectedItem()
    {
        foreach (RadPanelItem rpi in rpbLeftNavigation.Items)
        {
            rpi.Selected = false;
        }
    }
 
 
    /// <summary>
    /// Events
    /// </summary>
    public event LeftNavigationClickHandler leftNavigationClickHandler;
 
    protected void Page_Load(object sender, EventArgs e)
    {
         
    }
    /// <summary>
    /// Item click event
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    protected void rpbLeftNavigation_ItemClick(object sender, RadPanelBarEventArgs e)
    {
        if (this.leftNavigationClickHandler != null)
            leftNavigationClickHandler(sender, e);
    }
    protected void rpbLeftNavigation_ItemDataBound(object sender, RadPanelBarEventArgs e)
    {
        e.Item.Text = DataBinder.Eval(e.Item.DataItem, "Text").ToString();
        e.Item.Value = DataBinder.Eval(e.Item.DataItem, "Count").ToString();
    }
    protected void rpbLeftNavigation_DataBound(object sender, EventArgs e)
    {
        LeftNavHeaderTemplate headerTemplate = new LeftNavHeaderTemplate();
        foreach (RadPanelItem rpItem in rpbLeftNavigation.GetAllItems())
        {
            rpItem.HeaderTemplate = headerTemplate;
            headerTemplate.InstantiateIn(rpItem);
            rpItem.DataBind();
        }
    }
}
 
 
public class LeftNavHeaderTemplate : ITemplate
{
    /// <summary>
    ///
    /// </summary>
    /// <param name="container"></param>
    public void InstantiateIn(Control container)
    {
        HtmlGenericControl div1 = new HtmlGenericControl("div");
        div1.Style.Add("float", "left");
        Label lblChannelName = new Label();
        lblChannelName.ID = "lblChannelId";
 
        lblChannelName.DataBinding += new EventHandler(lblChannelName_DataBinding);
        div1.Controls.Add(lblChannelName);
 
        container.Controls.Add(div1);
 
        HtmlGenericControl div2 = new HtmlGenericControl("div");
        div2.Style.Add("float", "right");
 
        RadButton btnCount = new RadButton();
        btnCount.ID = "btnCntButton";
        btnCount.DataBinding += new EventHandler(btnCount_DataBinding);
        btnCount.AutoPostBack = true;
        btnCount.Click +=new EventHandler(btnCount_Click);
        div2.Controls.Add(btnCount);
 
        container.Controls.Add(div2);
    }
    /// <summary>
    /// Data Binding
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    private void lblChannelName_DataBinding(object sender, EventArgs e)
    {
        Label lblChannelName = (Label)sender;
        RadPanelItem rpItem = (RadPanelItem)lblChannelName.BindingContainer;
        lblChannelName.Text = rpItem.Text;
    }
    /// <summary>
    ///
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    private void btnCount_DataBinding(object sender, EventArgs e)
    {
        RadButton btnCount = (RadButton)sender;
        RadPanelItem rpItem = (RadPanelItem)btnCount.BindingContainer;
        btnCount.Text = rpItem.Value;
    }
    /// <summary>
    /// button click event
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    private void btnCount_Click(object sender, EventArgs e)
    {
        //Button clicked event processing
    }
}
0
Kate
Telerik team
answered on 20 Oct 2011, 12:50 PM
Hi Nishith,

This is a bug of the RadPanelBar that we are already aware of. It occurs when you create a HeaderTemplate in code behind and bind it to a data source. My apologies for the caused inconvenience. 

Please let me know if I can assist you any further.

Best wishes,
Kate
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Tags
PanelBar
Asked by
Nishith
Top achievements
Rank 1
Answers by
Kate
Telerik team
Nishith
Top achievements
Rank 1
Share this question
or