RadPanelBar ItemClick does not fire when expand/collapse icon is clicked

[Joshua Grippo]

I am trying to implement Load On Demand for the RadPanelBar. If I click on the Expand/Collapse button the ItemClick never fires. Also when another item is expanded, then the control that was previously loaded dissapears. I have been trying to make this work for over a day.

<form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadPanelBar1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadPanelBar1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadPanelBar ID="RadPanelBar1" runat="server" OnItemClick="RadPanelBar1_ItemClick"
            ExpandMode="MultipleExpandedItems">
            <CollapseAnimation Duration="100" Type="None" />
            <Items>
                <telerik:RadPanelItem runat="server" Text="Root RadPanelItem1">
                    <Items>
                        <telerik:RadPanelItem runat="server">
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem runat="server" Text="Root RadPanelItem2">
                    <Items>
                        <telerik:RadPanelItem runat="server">
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>
            </Items>
            <ExpandAnimation Duration="100" Type="None" />
        </telerik:RadPanelBar>
    </div>
    </form>

public partial class RadPanelBarTest : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }

    private void LoadUserControl(Telerik.Web.UI.RadPanelItem item)
    {
        Label userControl1 = new Label();
        userControl1.ID = "userControl1";
        userControl1.Text = DateTime.Now.ToString();
        item.Items[0].Controls.Add(userControl1);
        item.Expanded = true;
    }

    protected void RadPanelBar1_ItemClick(object sender, Telerik.Web.UI.RadPanelBarEventArgs e)
    {
        this.LoadUserControl(e.Item);
    }
}

I basically used the exact suggestion here: http://www.telerik.com/community/forums/aspnet-ajax/panelbar/radpanelbar-with-load-on-demand-items.aspx , except i changed the ExpandMode to multiple and i used a label for simplicity of this post.

[Kate]

Hi Joshua Grippo,

Thank you for contacting Telerik support.

I tried the code that you sent me and it looks that it works fine when I tested it. I have attached the page and code behind. Please try to run it and let me know if you still encounter the issue.

Greetings,
Kate
the Telerik team

[Joshua Grippo]

I beg to differ that your code works. I was specifically referencing the Expand/Collapse Icon and the fact that it does not fire the ItemClick.
Also that there is no server event that can be attached to for that desired functionality.

Support has already responded to the Issue Confirming my suspicions.
-----------------
Hi Joshua,

This is expected behavior (the expand handle does not cause ItemClick event). What is not expected, though, is that there is no server event that you can use to catch this change. We are going to consider of implementing server events for ItemExpand and ItemCollapse.

Until then, you can handle the ClientItemAnimationEnd event. If you need to postback and execute a server handler, you will have to manually cause ajax request from the ClientItemAnimationEnd handler (here is an article that should explain how to cause the request: http://www.telerik.com/help/aspnet-ajax/ajax-onajaxrequest.html)

Thank you for indicating this problem to our team (your telerik points are updated).


Regards,
Nikolay Tsenkov 
--------------------

[Helen]

Hello Joshua,

We implemented the expand handle for expand/collapse in cases when NavigateUrl is used and RadPanelBar navigates upon clicking the item.

If you don't want to use the expand handle, a possible workaround is to hide it like the following:

<style type="text/css">
  .rpExpandHandle
     {
        display:none !important;
     }

</style>

Regards,
Helen
the Telerik team

[Joshua Grippo]

I do not have a navigate URL and I do want the ExpandHandle. I just want a server event that I can hook to so that I can tell when it was clicked!

I have implemented the following solution that works like a champ, except for the fact that LOD demand forces dynamic controls to be reloaded each time, which makes (PanelBarItems.ExpandMode = MultipleExpandItems) useless for performance reasons, but that is a different topic.

The solution:

public partial class RadPanelBarTest : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void mgrAjax_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
    {
        LoadUserControl(e.Argument);
    }

    private void LoadUserControl(string ItemValue)
    {
        var item = RadPanelBar1.FindItemByValue(ItemValue);
        if (item == null) return;

        Label userControl1 = new Label();
        userControl1.ID = "userControl1";
        userControl1.Text = DateTime.Now.ToString();
        item.Items[0].Controls.Add(userControl1);
    }
}

<form id="form1" runat="server">
    <telerik:RadCodeBlock ID="radCode" runat="server">
        <script type="text/javascript">
            function OnClientItemAnimationEnd(sender, eventArgs) {
                //only postback if we are expanding
                if (eventArgs.get_expanding()) {
                    var item = eventArgs.get_item();
                    var val = item.get_value();
                    var mgr = $find("<%= mgrAjax.ClientID %>");
                    mgr.ajaxRequest(val);
                }
            }
        </script>
    </telerik:RadCodeBlock>
    <telerik:RadScriptManager ID="mgrScript" runat="server" EnableTheming="True">
    </telerik:RadScriptManager>
    <div>
        <telerik:RadAjaxManager runat="server" ID="mgrAjax" OnAjaxRequest="mgrAjax_AjaxRequest">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="mgrAjax">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadPanelBar1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadPanelBar ID="RadPanelBar1" runat="server" OnClientItemAnimationEnd="OnClientItemAnimationEnd"
            ExpandMode="MultipleExpandedItems">
            <Items>
                <telerik:RadPanelItem runat="server" Text="Root RadPanelItem1" Value="Root1">
                    <Items>
                        <telerik:RadPanelItem runat="server">
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem runat="server" Text="Root RadPanelItem2" Value="Root2">
                    <Items>
                        <telerik:RadPanelItem runat="server">
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelBar>
    </div>
    </form>

[William]

Joshua is correct, this is an issue with the RadPanelBar (the server item_click not firing when using the expand/collapse handle), which I agree should fire.  The "load on demand" approach is also important for me, but an adequate capabilities simply aren't there despite some less than desirable approaches suggested by Telerik.  It would be nice if Telerik added the capability.

[Helen]

Hello all,

I logged the issue about the ItemClick not being fired when the ExpandHandle is clicked in our bug tracking system.
Our development team will research the possibilities of implementing it.

Kind regards,
Helen
the Telerik team

[rleast]

Hi Telerik,

I checked the issue tracker and didn't see this item listed. I'd like to know what the status is of this and I'd like to subscribe to the issue tracker for notification when it is resolved.

In the meantime I'm using Header Templates which so far seem to be working as I need them to.

Thanks

Roger

[Helen]

Hello Roger,

You may track the issue and vote for it here.

Greetings,
Helen
the Telerik team

[July]

I need create PanelBar dinamically.
I saw this example
public class WebForm1 : System.Web.UI.Page
    {
        protected PlaceHolder phPanel;
        private void Page_Load(object sender, System.EventArgs e)
        {
            if (!IsPostBack)
            {
                //create a panelbar
                RadPanelbar panel1;
                panel1 = new RadPanelbar("panel1");
                phPanel.Controls.Add(panel1);
                
                //add a couple of items
                PanelItem item1 = new PanelItem();
                item1.ID = "panel1";
                item1.Text = "Panel Item 1";
                panel1.PanelItems.Add(item1);
                
                PanelItem item11 = new PanelItem();
                item11.ID = "panel1_1";
                //tell this item to use the template
                item11.TemplateID = "treeTemplate";
                item11.Text = "Template Item 1";
                item1.PanelItems.Add(item11);
                
                PanelItem item2 = new PanelItem();
                item2.Text = "Panel Item 2";
                panel1.PanelItems.Add(item2);
                
                //create the template
                PanelItemTemplate template1 = new PanelItemTemplate();
                template1.ID = "treeTemplate";
                template1.ContentTemplate = new TreeTemplate();
                panel1.PanelItemTemplates.Add(template1);
                
                //create an itemtemplate and instantiate it
                ItemTemplate container1 = new ItemTemplate(panel1.PanelItems[0].PanelItems[0]);
                template1.ContentTemplate.InstantiateIn(container1);
                //the container's ID should be the same as the panelitem using this template
                container1.ID = "panel1_1";
                panel1.Controls.Add(container1);

            }
        }


        #region Web Form Designer generated code
        override protected void OnInit(EventArgs e)
        {
            //
            // CODEGEN: This call is required by the ASP.NET Web Form Designer.
            //
            InitializeComponent();
            base.OnInit(e);
        }
        
        ///        Required method for Designer support - do not modify
        ///        the contents of this method with the code editor.
        /// </summary>
        private void InitializeComponent()
        {
            this.Load += new EventHandler(this.Page_Load);
        }
        #endregion

    }
    public class TreeTemplate : ITemplate
    {
        private void PopulateTreeView(RadTreeView tree1)
        {
            RadTreeNode node1 = new RadTreeNode("tex1","val1");
            tree1.Nodes.Add(node1);
            RadTreeNode node2 = new RadTreeNode("tex2","val2");
            tree1.Nodes.Add(node2);
            RadTreeNode node3 = new RadTreeNode("tex3","val3");
            tree1.Nodes.Add(node3);
            RadTreeNode node4 = new RadTreeNode("tex4","val4");
            tree1.Nodes.Add(node4);
        }

        public void InstantiateIn(Control container)
        {
            //create and populate the treeview here
            RadTreeView tree1 = new RadTreeView();
            tree1.ID = "tree1";
            PopulateTreeView(tree1);
            //add it to the controls in the template container
            container.Controls.Add(tree1);
        }
    }


But  PanelItemTemplate or RadPanelItemTemplate doesnt exist as telerik control

[Kate]

Hi Julieta,

Please take a look the following help articles that explain how you can add an ItemTemplate to the RadPanelBar dynamically as well as how to add items to the RadPanelBar in code behind:

http://www.telerik.com/help/aspnet-ajax/panelbar-add-templates-runtime.html
http://www.telerik.com/help/aspnet-ajax/panelbar-items-server-side-code.html
http://www.telerik.com/help/aspnet-ajax/panelbar-data-datatableview.html   

All the best,
Kate
the Telerik team

[Geoff]

I'm not sure if this is still an issue that people are having, but a fairly painless workaround is to do a postback after hooking into the OnClientClicking event

function onClientClicking(sender, args) {
  var clicked = args.get_domEvent().target; //get the clicked element
  if (clicked.className.indexOf('rpExpandHandle') != -1) { //if the element is the expander...
    DoMyPostBack();
  }
}

[Paul]

I think the problem is more fundamental.

The ItemClick event may not fire, but what is worse for me is the fact that there is no Expand or Collapse event to hook in to.

The documentation of the control at http://www.telerik.com/help/wpf/radpanelbar-events-overview.html talks about the Expand\Collapse Events, but when I tried to add a event handler for these events they were not there( In Visual Studio ) for me to hook in too.

[Helen]

Hi,

The documentation you mentioned is about RadControls for WPF. RadPanelBar for ASP.NET AJAX doesn't have such events.
For now - the solution is to use some of the workarounds listed below.

Regards,
Helen
the Telerik team

[Harald Breidler]

Hi Helen,

where can I find the workarounds?

Regards, Harry

[Princy]

Hi,

I suppose you want to fire itemclick event of RadPanelBar on clicking Expand/Collapse Icon. You can fire itemclick event in ClientItemCollapse or ClientItemExpand event as follows.

ASPX:

<telerik:RadPanelBar runat="server" ID="rpbFilters" OnClientItemExpand="OnClientItemExpand" OnClientItemCollapse="OnClientItemCollapse" AllowCollapseAllItems="true" ExpandMode="FullExpandedItem"  onitemclick="rpbFilters_ItemClick" >
   <Items>
     .............
   </Items>
</telerik:RadPanelBar>
<asp:HiddenField ID="HiddenField1" runat="server" />

JS:

<script type="text/javascript">
 function OnClientItemCollapse(sender, args)
 {
  if (document.getElementById("HiddenField1").value != "1")
  {
   document.getElementById("HiddenField1").value = "1";
   args._item._click();
  }
  else
  {
    document.getElementById("HiddenField1").value = "0";
  }
 }
 function OnClientItemExpand(sender, args)
 {
  args._item._click();
 }
</script>

Thanks,
Princy.

[Harald Breidler]

Thank you!

This solution works fine if you take the same code for OnClientItemExpand as for OnClientItemCollapse.

Thanks again,
Harry