ImageButton button click inside node template is not firing properly

[A2H]

Hi,
I have a Tree View with node template column.Inside of template column I have Image Button.

Problem:
I need to open a radwindow on click of Image button and it will open fine except for one scenario.

This issue is happening for only in page load.
When Initial page load if we have a subnode for  a particular node.When we expand and click on image button in subnode radwindow is not opening.
Only for the first click Radwindow is not opening from second time onwards it works fine.

Please help me.

Thanks,
A2H

[Princy]

Hi A2H,

You can attach the click event in the NodeDataBound event of RadTreeView. Here is the sample code that I tried.

ASPX:

<telerik:RadTreeView ID="RadTreeView1" runat="server" DataSourceID="SqlDataSource1" DataFieldID="id" DataFieldParentID="parent" DataTextField="name" DataValueField="id" OnNodeDataBound="RadTreeView1_NodeDataBound">
  <NodeTemplate>
    <asp:Label ID="Label1" runat="server" Text='<%# DataBinder.Eval(Container, "Text") %>'></asp:Label>
    <asp:Image ID="img" runat="server" ImageUrl="~/Images/bullet5.jpg" />
  </NodeTemplate>
</telerik:RadTreeView>

C#:

protected void Page_Load(object sender, EventArgs e)
 {
   RadTreeView1.DataBind();
 }
protected void RadTreeView1_NodeDataBound(object sender, RadTreeNodeEventArgs e)
 {
   Label Label1 = (Label)e.Node.FindControl("Label1");
   Label1.Attributes.Add("onclick", "clickLabel();");
   Image img = (Image)e.Node.FindControl("img");
   img.Attributes.Add("onclick", "clickImage();");
 }

JS:

<script type="text/javascript">
    function clickLabel() {
        //Your code
    }
    function clickImage() {
        //Your code
    }
</script>

Hope this helps.

Thanks,
Princy.

[A2H]

Hi Princy,

I have tried your code.But Unfortunately this didnt work for me.

One change I made to ur code is instead of javascript function I need a Imagebutton click event to fire So I modified code like this.

 

protected void RadTreeView1_NodeDataBound(object sender, RadTreeNodeEventArgs e)

 {

      ImageButton img = (ImageButton)e.Node.FindControl("img");

   img.Attributes.Add("onclick", "imgButton_Click");

 }


But this doesnt work out for me.
On further analysis I have found this
 I dont have any datasource in particular. I am populating the tree on runtime.So cannot specify any DataFieldID and because of this NodeDatabound event is not firing.

The Problem is when you expand a node and if you have subnode with Image Button , then for this first time the Image button click wont fire. :(:(:(



Thanks,
A2H


 

[Princy]

Hello,

Since you are populating the RadTreeView at runtime you can use NodeCreated event of RadTreeView to attach the click event of ImageButton. Here is the sample code that I tried.

ASPX:

<telerik:RadTreeView ID="RadTreeView1" runat="server" onnodecreated="RadTreeView1_NodeCreated">
   <NodeTemplate>
      <asp:Label ID="Label1" runat="server" Text='<%# DataBinder.Eval(Container, "Text") %>'></asp:Label>
      <asp:ImageButton ID="img" runat="server" ImageUrl="~/Images/bullet5.jpg"   />
   </NodeTemplate>
</telerik:RadTreeView>

C#:

protected void Page_Load(object sender, EventArgs e)
 {
   if (!IsPostBack)
    {
      RadTreeNode node = new RadTreeNode();
      node.Text = "node1";
      RadTreeNode node1 = new RadTreeNode();
      node1.Text = "node2";
      RadTreeNode node2 = new RadTreeNode();
      node2.Text = "node3";
      RadTreeView1.Nodes.Add(node);
      RadTreeView1.Nodes.Add(node1);
      node1.Nodes.Add(node2);
      RadTreeView1.DataBind();
    }
 }
protected void RadTreeView1_NodeCreated(object sender, RadTreeNodeEventArgs e)
 {
   ImageButton img = (ImageButton)e.Node.FindControl("img");
   img.Click += new ImageClickEventHandler(img_Click);
 }
void img_Click(object sender, ImageClickEventArgs e)
 {
   //Your code
 }

Hope this helps.

Thanks,
Princy.

[A2H]

HI Princy,

First of all Thanks a lot for ur Help.

I have tried ur approach (using Node Created Event) :(:(
Unfortunately the same result.

For this first time its not working ie . Click event is not opening the rad window.But on second time onwards its working fine.
 While Analyzing more on this I found out that On Expand node click  we are not having the proper flow of code execution like normal post back.
Second time when a normal post back occurs to the page controls are rendered properly and everything works fine.

I am wondering whats is wrong in onNodeExpand event which is not making controls rendering properly.

Thanks,
A2H

[Princy]

Hello,

Unfortunately I couldn't reproduce the issue that you are facing. I was able to open a RadAlert on click event of ImageButton. Here is the sample code.

ASPX:

<telerik:RadTreeView ID="RadTreeView1" runat="server" OnNodeCreated="RadTreeView1_NodeCreated">
     <NodeTemplate>
        <asp:Label ID="Label1" runat="server" Text='<%# DataBinder.Eval(Container, "Text") %>'></asp:Label>
        <asp:ImageButton ID="img" runat="server" ImageUrl="~/Images/bullet5.jpg" />
     </NodeTemplate>
</telerik:RadTreeView>
<telerik:RadWindowManager ID="RadWindowManager" runat="server">
</telerik:RadWindowManager>

C#:

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            RadTreeNode node = new RadTreeNode();
            node.Text = "node1";
            RadTreeNode node1 = new RadTreeNode();
            node1.Text = "node2";
            RadTreeNode node2 = new RadTreeNode();
            node2.Text = "node3";
            RadTreeNode node3 = new RadTreeNode();
            node3.Text = "node4";
            RadTreeView1.Nodes.Add(node);
            RadTreeView1.Nodes.Add(node1);
            node1.Nodes.Add(node2);
            node2.Nodes.Add(node3);
            RadTreeView1.DataBind();
        }
    }
protected void RadTreeView1_NodeCreated(object sender, RadTreeNodeEventArgs e)
    {
        ImageButton img = (ImageButton)e.Node.FindControl("img");
        img.Click += new ImageClickEventHandler(img_Click);
    }
void img_Click(object sender, ImageClickEventArgs e)
    {
        string scriptstring = "<script language='javascript'>function f(){radalert('Your text...', 330, 210); Sys.Application.remove_load(f);}; Sys.Application.add_load(f);</script>";
        Page.ClientScript.RegisterStartupScript(this.GetType(), "radalert", scriptstring);
    }

Regards,
Princy.

[Marbry]

Is it generating a postback on the first click but just not firing the handler?

If not, it sounds like it may be an issue of what has focus.  If it is, examining the Request.Params values sent back to the server the first time may allow you to figure out the cause or code around it.

[Bozhidar]

Hello,

If you are using ServerSideCallback LoadOnDemand, the Click handler is not going to be executed. Try switching the expand mode to ServerSide and put the TreeView inside an update panel.
 
Kind regards,
Bozhidar
the Telerik team

[A2H]

Hi All,

Thanks for Support. I have used Marbry's logic and also with the help of javascript events in tree view, I have acheived the scenario.

Bohzidar,

Can you please explain me why Click event handler is not fired when we use ServerSideCallback LoadOnDemand.

Thanks,
A2H

[Bozhidar]

Hello,

When you dynamically add controls on the page, you have to do so during a regular postback, otherwise the control's events are not registered on the page and won't be triggered. This happens because during a callback the page doesn't go through it's full lifecycle. You can refer to the following article for more information on the subject:
http://edndoc.esri.com/arcobjects/9.2/NET_Server_Doc/developer/ADF/ajax_callback.htm 
 
All the best,
Bozhidar
the Telerik team

[Neehar]

Hi,

I have taken a rad button and have set image to that button, but scripts are not firing because,
i have set image to that button, if i remove that image to that button scripts are working fine.
please tell me what to do.

[Slav]

Hi Neehar,

I am afraid that the provided information is not enough to determine what the exact problem is and what is not working in RadButton. Are the scripts that are not firing related to the RadButton? Please, provide a fully working project and step by step instructions for replicating the problem. If needed, attach screenshots or video demonstrating the issue too.

All the best,
Slav
the Telerik team