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

ImageButton button click inside node template is not firing properly

11 Answers 432 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
A2H
Top achievements
Rank 1
A2H asked on 05 Jul 2012, 05:58 AM
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

11 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 05 Jul 2012, 07:21 AM
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.
0
A2H
Top achievements
Rank 1
answered on 05 Jul 2012, 09:12 AM
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

 

0
Princy
Top achievements
Rank 2
answered on 06 Jul 2012, 06:09 AM
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.
0
A2H
Top achievements
Rank 1
answered on 09 Jul 2012, 06:19 AM
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
0
Princy
Top achievements
Rank 2
answered on 09 Jul 2012, 07:51 AM
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.
0
Marbry
Top achievements
Rank 1
answered on 13 Jul 2012, 02:21 PM
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.
0
Bozhidar
Telerik team
answered on 18 Jul 2012, 07:02 AM
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
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
A2H
Top achievements
Rank 1
answered on 20 Jul 2012, 05:17 PM
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
0
Bozhidar
Telerik team
answered on 25 Jul 2012, 07:45 AM
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
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
Neehar
Top achievements
Rank 2
answered on 05 Dec 2012, 10:55 AM
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.
0
Slav
Telerik team
answered on 07 Dec 2012, 05:32 PM
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
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.
Tags
TreeView
Asked by
A2H
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
A2H
Top achievements
Rank 1
Marbry
Top achievements
Rank 1
Bozhidar
Telerik team
Neehar
Top achievements
Rank 2
Slav
Telerik team
Share this question
or