Button Click in Item Template not always firing (with example)

8 posts, 1 answers
  1. Mark
    Mark avatar
    9 posts
    Member since:
    Feb 2012

    Posted 16 Feb 2012 Link to this post

    I have created a quick sample app to demastrate a problem I am having where by a button does not fire the event when its in the item template for a node.

    The idea behind the sample code is that the last button on a node you click it should dissapear, but it only works every other time.


    Create a control called OrgChartControl (see below for content), add the control to a page and run the page.

    Many thanks for any help you may be able to give 

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="OrgChartControl.ascx.cs" Inherits="RadOrgChartTest.OrgChartControl" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
        <div>
            <telerik:RadOrgChart runat="server" ID="RadOrgChart1" Skin="Office2007">
                <ItemTemplate>
                  
                                <asp:ImageButton ID="ZoomToButton" runat="server"
                                    Style="cursor: pointer"
                                    CommandArgument='<%# DataBinder.Eval(Container.DataItem, "Id")%>'
                                    OnClick="ZoomToButton_OnClick"
                                    Visible='<%#Eval("NotLastClicked")%>' />
                              
                </ItemTemplate>
            </telerik:RadOrgChart>

           </div>



    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;

    namespace RadOrgChartTest
    {
        public partial class OrgChartControl : System.Web.UI.UserControl
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                update(0);
            }

     

            private void update(int LastClicked)
            {
               RadOrgChart1.DataTextField = "Label";
                RadOrgChart1.DataFieldID = "Id";
                RadOrgChart1.DataFieldParentID = "Parent";

                RadOrgChart1.DataSource = GetDataFromDatabase(LastClicked);
                RadOrgChart1.DataBind();
           
            }

            protected void ZoomToButton_OnClick(object sender, EventArgs e)
            {
                update( int.Parse(((ImageButton)sender).CommandArgument));
            }

     

            private class FakeData
            {
                public string Label {get;set;}
                public int Id {get;set;}
                public int? Parent {get;set;}
                public bool NotLastClicked {get;set;}
            }

            private List<FakeData> GetDataFromDatabase(int LastClicked)
            {

                List<FakeData> r = new List<FakeData>();
                r.Add(new FakeData { Label = "Parent", Id = 1, Parent = null, NotLastClicked = LastClicked!= 1 });
                r.Add(new FakeData { Label = "Node a", Id = 2, Parent = 1, NotLastClicked = LastClicked != 2 });
                r.Add(new FakeData { Label = "Node b", Id = 3, Parent = 1, NotLastClicked = LastClicked != 3 });
                r.Add(new FakeData { Label = "Node c", Id = 4, Parent = 1, NotLastClicked = LastClicked != 4 });
                r.Add(new FakeData { Label = "Node d", Id = 5, Parent = 1, NotLastClicked = LastClicked != 5 });

                return r;
            }

        }
    }




  2. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 21 Feb 2012 Link to this post

    Hi,

    I was able to reproduce the issue. For some reason the click event is not fired on the first postback. We need more time to investigate the problem in details. As soon as I found out what is causing that behavior I'll inform you.

    Kind regards,
    Peter Filipov
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mark
    Mark avatar
    9 posts
    Member since:
    Feb 2012

    Posted 22 Feb 2012 Link to this post

    Peter,

    Many thanks for your reply and I look forward to you findings and workaround.

    Regards,

    Mark
  5. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 27 Feb 2012 Link to this post

    Hello Mark,

    I investigated the issue in details and please find attached a workaround.
    Otherwise I logged the issue and it will be fixed.

    In your case when the visibility property is used, the RadButton is not rendered and causes problems in event handlers' mapping. Please use CSS to hide the buttons.

    Regards,
    Peter Filipov
    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.
  6. Mark
    Mark avatar
    9 posts
    Member since:
    Feb 2012

    Posted 28 Feb 2012 Link to this post

    Thanks for the reply.

    The code that you have supplied is not quite the same, as I need to rebind the chart ( call update) on

    ZoomToButton_OnClick


    as this button centers the data on that node (and then there is database functionality to return x hops away from that node)

    I have tried to use your solution to fit my needs but no luck so far. If you have any suggestions then I would be greatful.


    Thanks,

    Mark
  7. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 02 Mar 2012 Link to this post

    Hi Mark,

    Could you be more specific on what you exact want to achieve? I am not quite sure how to recreate your setup locally.
    Please record a video, which shows the incorrect behavior and send me a sample project that demonstrates the issue to investigate it locally.

    Regards,
    Peter Filipov
    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.
  8. Mark
    Mark avatar
    9 posts
    Member since:
    Feb 2012

    Posted 05 Mar 2012 Link to this post

    Peter,

    I have reworked the example a little. The basic Idea is that when a user clicks on the imagebutton the org chart should center to that node (and then the image button dissapear - hence the first example) . In the new example I have expanded the amount of data in the fake database, so now only a subset should be returned. The subset is the clicked node (when the page first loads this is set to node with id of 1) and 1 hop away, so its parent and all its children. Each time a image button is click the page should refresh and show a different set of nodes based on the selection.

    The problem is that when I click a image button it does not fire ZoomToButton_OnClick   which is where the _lastClicked varible is set and the page updated. Because the update is not called (from ToButton_OnClick), the page is not rebound and so the orgchart control does not show.

    The olny way round it I can think of is to have a hidden field on the form and set it to the value of the last node clicked (client side) and then when the page loads after postback set _lastClicked based on that value. I am going to try and implement it that way.

    To reproduce the problem, put a breakpoint on the  ZoomToButton_OnClick  method and run the page, then click on the image button in  any of the child nodes, the breakpoint won't be hit, but I think it should.

    Regards,

    Mark

     

     

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestPage.aspx.cs" Inherits="RadOrgChartTest.TestPage" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
         
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
        <div>
         <telerik:RadOrgChart runat="server" ID="RadOrgChart1" Skin="Office2007"
                    >
                <ItemTemplate>
                                <%# DataBinder.Eval(Container.DataItem, "Label")%>
     
                                <br /><br />
                                <asp:ImageButton ID="ZoomToButton"
                                    runat="server"
                                    Style="cursor: pointer"
                                    OnClick="ZoomToButton_OnClick"
                                    CommandArgument='<%# DataBinder.Eval(Container.DataItem, "Id")%>'
                               />
                </ItemTemplate>
            </telerik:RadOrgChart>
        </div>
        </form>
    </body>
    </html>

     


    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
     
    namespace RadOrgChartTest
    {
        public partial class TestPage : System.Web.UI.Page
        {
     
     
            int _lastClicked = 1;
            protected void Page_Load(object sender, EventArgs e)
            {
     
                if (!Page.IsPostBack)
                {
                    update();
                }
            }
     
     
     
            private void update()
            {
                RadOrgChart1.DataTextField = "Label";
                RadOrgChart1.DataFieldID = "Id";
                RadOrgChart1.DataFieldParentID = "Parent";
                RadOrgChart1.DataSource = GetDataFromDatabase();
                RadOrgChart1.DataBind();
            }
     
            protected void ZoomToButton_OnClick(object sender, EventArgs e)
            {
     
                _lastClicked = int.Parse(((ImageButton)sender).CommandArgument);
                update();
            }
     
            private class FakeData
            {
                public string Label { get { return "node " + Id; } }
                public int Id { get; set; }
                public int? Parent { get; set; }
                public bool NotLastClicked { get; set; }
                public string CssClass
                {
                    get
                    {
                        if (NotLastClicked)
                        {
                            return "";
                        }
                        else
                        {
                            return "hideImageButton";
                        }
                    }
     
                }
            }
     
            private List<FakeData> GetDataFromDatabase()
            {
                int LastClicked = _lastClicked;
                List<FakeData> r = new List<FakeData>();
                r.Add(new FakeData { Id = 1, Parent = null, NotLastClicked = LastClicked != 1 });
                r.Add(new FakeData { Id = 2, Parent = 1, NotLastClicked = LastClicked != 2 });
                r.Add(new FakeData { Id = 3, Parent = 1, NotLastClicked = LastClicked != 3 });
                r.Add(new FakeData { Id = 4, Parent = 1, NotLastClicked = LastClicked != 4 });
                r.Add(new FakeData { Id = 5, Parent = 2, NotLastClicked = LastClicked != 5 });
                r.Add(new FakeData { Id = 6, Parent = 2, NotLastClicked = LastClicked != 6 });
                r.Add(new FakeData { Id = 7, Parent = 2, NotLastClicked = LastClicked != 7 });
                r.Add(new FakeData { Id = 8, Parent = 3, NotLastClicked = LastClicked != 8 });
                r.Add(new FakeData { Id = 9, Parent = 3, NotLastClicked = LastClicked != 9 });
                r.Add(new FakeData { Id = 10, Parent = 4, NotLastClicked = LastClicked !=10 });
                r.Add(new FakeData { Id = 11, Parent = 4, NotLastClicked = LastClicked != 11 });
                r.Add(new FakeData { Id = 12, Parent = 5, NotLastClicked = LastClicked != 12 });
                r.Add(new FakeData { Id = 13, Parent = 5, NotLastClicked = LastClicked != 13 });
                r.Add(new FakeData { Id = 14, Parent = 5, NotLastClicked = LastClicked != 14 });
                r.Add(new FakeData { Id = 15, Parent = 6, NotLastClicked = LastClicked != 15 });
                r.Add(new FakeData { Id = 16, Parent = 6, NotLastClicked = LastClicked != 16 });
                r.Add(new FakeData { Id = 17, Parent = 7, NotLastClicked = LastClicked != 17 });
                r.Add(new FakeData { Id = 18, Parent = 7, NotLastClicked = LastClicked != 18 });
                r.Add(new FakeData { Id = 19, Parent = 8, NotLastClicked = LastClicked != 19 });
                r.Add(new FakeData { Id = 20, Parent = 8, NotLastClicked = LastClicked != 20 });
                r.Add(new FakeData { Id = 21, Parent = 9, NotLastClicked = LastClicked != 21 });
                r.Add(new FakeData { Id = 22, Parent = 9, NotLastClicked = LastClicked != 22 });
                r.Add(new FakeData { Id = 23, Parent = 9, NotLastClicked = LastClicked != 23 });
                r.Add(new FakeData { Id = 24, Parent = 10, NotLastClicked = LastClicked != 24 });
                r.Add(new FakeData { Id = 25, Parent = 10, NotLastClicked = LastClicked != 25 });
                r.Add(new FakeData { Id = 26, Parent = 11, NotLastClicked = LastClicked != 26 });
                r.Add(new FakeData { Id = 27, Parent = 11, NotLastClicked = LastClicked != 27 });
                r.Add(new FakeData { Id = 28, Parent = 12, NotLastClicked = LastClicked != 28 });
                r.Add(new FakeData { Id = 29, Parent = 12, NotLastClicked = LastClicked != 29 });
                r.Add(new FakeData { Id = 30, Parent = 12, NotLastClicked = LastClicked != 30 });
                r.Add(new FakeData { Id = 31, Parent = 13, NotLastClicked = LastClicked != 31 });
                r.Add(new FakeData { Id = 32, Parent = 14, NotLastClicked = LastClicked != 32 });
                r.Add(new FakeData { Id = 33, Parent = 14, NotLastClicked = LastClicked != 33 });
                r.Add(new FakeData { Id = 34, Parent = 15, NotLastClicked = LastClicked != 34 });
                r.Add(new FakeData { Id = 35, Parent = 15, NotLastClicked = LastClicked != 35 });
                r.Add(new FakeData { Id = 36, Parent = 31, NotLastClicked = LastClicked != 36 });
                r.Add(new FakeData { Id = 37, Parent = 32, NotLastClicked = LastClicked != 37 });
                r.Add(new FakeData { Id = 38, Parent = 32, NotLastClicked = LastClicked != 38 });
                r.Add(new FakeData { Id = 39, Parent = 38, NotLastClicked = LastClicked != 39 });
                r.Add(new FakeData { Id = 40, Parent = 38, NotLastClicked = LastClicked != 40 });
     
                //uncomment this to show all data to see what the tree is like
                //return r;
     
     
                //lets assume for this example we just want to show 1 hop away ie parents and children of the chosen node (LastClicked), I my actual app hops is varible
     
                int? parentid = (from a in r where a.Id == LastClicked select a.Parent).First();
     
     
                var p = from a in r where a.Id == LastClicked || a.Parent == LastClicked || a.Id == parentid select a;
     
     
                //Need to make the top node have a parent of null, so the orgchart control shows the items
                foreach (var item in p)
                {
                    if (item.Id == parentid)
                    {
                        item.Parent = null;
                    }
                }
     
                return p.ToList();
            }
     
        }
    }














  9. Answer
    Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 08 Mar 2012 Link to this post

    Hi Mark,

    I investigated your project and succeeded to make it work in the way you described in the previous post. The problem with the server controls is caused because the RadOrgChart does not support ViewState and on every postback the controls tree should be recreated.
    Please review the attached example for reference.

    All the best,
    Peter Filipov
    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017