ImageButton button click inside node template is not firing properly

12 posts, 0 answers
  1. A2H
    A2H avatar
    177 posts
    Member since:
    Mar 2010

    Posted 05 Jul 2012 Link to this post

    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

  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 05 Jul 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. A2H
    A2H avatar
    177 posts
    Member since:
    Mar 2010

    Posted 05 Jul 2012 Link to this post

    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

     

  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 06 Jul 2012 Link to this post

    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.
  6. A2H
    A2H avatar
    177 posts
    Member since:
    Mar 2010

    Posted 09 Jul 2012 Link to this post

    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
  7. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 09 Jul 2012 Link to this post

    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.
  8. Marbry
    Marbry avatar
    26 posts
    Member since:
    Aug 2012

    Posted 13 Jul 2012 Link to this post

    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.
  9. Bozhidar
    Admin
    Bozhidar avatar
    1101 posts

    Posted 18 Jul 2012 Link to this post

    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.
  10. A2H
    A2H avatar
    177 posts
    Member since:
    Mar 2010

    Posted 20 Jul 2012 Link to this post

    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
  11. Bozhidar
    Admin
    Bozhidar avatar
    1101 posts

    Posted 25 Jul 2012 Link to this post

    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.
  12. Neehar
    Neehar avatar
    5 posts
    Member since:
    Dec 2012

    Posted 05 Dec 2012 Link to this post

    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.
  13. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 07 Dec 2012 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017