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

17 posts, 0 answers
  1. Joshua Grippo
    Joshua Grippo avatar
    10 posts
    Member since:
    Nov 2009

    Posted 07 Mar 2011 Link to this post

    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.
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 10 Mar 2011 Link to this post

    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!
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Joshua Grippo
    Joshua Grippo avatar
    10 posts
    Member since:
    Nov 2009

    Posted 10 Mar 2011 Link to this post

    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 
    --------------------
  5. Helen
    Admin
    Helen avatar
    1052 posts

    Posted 10 Mar 2011 Link to this post

    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!
  6. Joshua Grippo
    Joshua Grippo avatar
    10 posts
    Member since:
    Nov 2009

    Posted 10 Mar 2011 Link to this post

    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>
  7. William
    William avatar
    2 posts
    Member since:
    Sep 2010

    Posted 07 Apr 2011 Link to this post

    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.
  8. Helen
    Admin
    Helen avatar
    1052 posts

    Posted 08 Apr 2011 Link to this post

    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
  9. rleast
    rleast avatar
    3 posts
    Member since:
    Mar 2007

    Posted 28 Apr 2011 Link to this post

    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
  10. Helen
    Admin
    Helen avatar
    1052 posts

    Posted 02 May 2011 Link to this post

    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.

  11. July
    July avatar
    205 posts
    Member since:
    Jul 2011

    Posted 13 Sep 2011 Link to this post

    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
  12. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 16 Sep 2011 Link to this post

    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
  13. Geoff
    Geoff avatar
    3 posts
    Member since:
    Jul 2012

    Posted 30 Aug 2012 Link to this post

    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();
      }
    }
  14. Paul
    Paul avatar
    8 posts
    Member since:
    Oct 2012

    Posted 24 Oct 2012 Link to this post

    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.
  15. Helen
    Admin
    Helen avatar
    1052 posts

    Posted 25 Oct 2012 Link to this post

    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.
  16. Harald Breidler
    Harald Breidler avatar
    7 posts
    Member since:
    Aug 2004

    Posted 30 Oct 2012 Link to this post

    Hi Helen,

    where can I find the workarounds?

    Regards, Harry
  17. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 30 Oct 2012 Link to this post

    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.
  18. Harald Breidler
    Harald Breidler avatar
    7 posts
    Member since:
    Aug 2004

    Posted 30 Oct 2012 Link to this post

    Thank you!

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

    Thanks again,
    Harry
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017