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

[Mark]

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;
        }

    }
}

[Peter Filipov]

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

[Mark]

Peter,

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

Regards,

Mark

[Peter Filipov]

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

[Mark]

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

[Peter Filipov]

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

[Mark]

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">

<html xmlns="http://www.w3.org/1999/xhtml">
<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();
        }

    }
}

[Peter Filipov]

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