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

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

16 Answers 474 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Joshua Grippo
Top achievements
Rank 1
Joshua Grippo asked on 07 Mar 2011, 11:04 PM
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.

16 Answers, 1 is accepted

Sort by
0
Kate
Telerik team
answered on 10 Mar 2011, 05:24 PM
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
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
0
Joshua Grippo
Top achievements
Rank 1
answered on 10 Mar 2011, 05:32 PM
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 
--------------------
0
Helen
Telerik team
answered on 10 Mar 2011, 06:26 PM
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
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
0
Joshua Grippo
Top achievements
Rank 1
answered on 10 Mar 2011, 06:51 PM
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>
0
William
Top achievements
Rank 1
answered on 07 Apr 2011, 04:35 PM
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.
0
Helen
Telerik team
answered on 08 Apr 2011, 04:59 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
rleast
Top achievements
Rank 1
answered on 28 Apr 2011, 09:19 PM
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
0
Helen
Telerik team
answered on 02 May 2011, 08:35 AM
Hello Roger,

You may track the issue and vote for it here.

Greetings,
Helen
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
July
Top achievements
Rank 2
answered on 13 Sep 2011, 05:13 PM
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
0
Kate
Telerik team
answered on 16 Sep 2011, 12:05 PM
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
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal
0
Geoff
Top achievements
Rank 1
answered on 30 Aug 2012, 08:03 PM
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();
  }
}
0
Paul
Top achievements
Rank 2
answered on 24 Oct 2012, 04:54 PM
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.
0
Helen
Telerik team
answered on 25 Oct 2012, 07:23 AM
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
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
Harald Breidler
Top achievements
Rank 1
answered on 30 Oct 2012, 07:38 AM
Hi Helen,

where can I find the workarounds?

Regards, Harry
0
Princy
Top achievements
Rank 2
answered on 30 Oct 2012, 11:39 AM
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.
0
Harald Breidler
Top achievements
Rank 1
answered on 30 Oct 2012, 05:30 PM
Thank you!

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

Thanks again,
Harry
Tags
PanelBar
Asked by
Joshua Grippo
Top achievements
Rank 1
Answers by
Kate
Telerik team
Joshua Grippo
Top achievements
Rank 1
Helen
Telerik team
William
Top achievements
Rank 1
rleast
Top achievements
Rank 1
July
Top achievements
Rank 2
Geoff
Top achievements
Rank 1
Paul
Top achievements
Rank 2
Harald Breidler
Top achievements
Rank 1
Princy
Top achievements
Rank 2
Share this question
or