Adding target URL to child node icon

4 posts, 0 answers
  1. Aarsh
    Aarsh avatar
    192 posts
    Member since:
    Jun 2012

    Posted 18 Jul 2012 Link to this post

    Hi friends, I am trying to add a target url for the icon image, being used for child nodes.

    I want something like this :

    <Parent Node name and hyperLink>
    |
    |
    |--<icon imageUrl hyperLink or TargetUrl> <childNode value caption/text/label>
    |--<icon imageUrl hyperLink or TargetUrl> <childNode value caption/text/label>
    |--<icon imageUrl hyperLink or TargetUrl> <childNode value caption/text/label>

    I tried embed CSS, Javascript / jQuery but could not get it.

    Thanks in advance for your help :-)
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 18 Jul 2012 Link to this post

    Hi Aarsh,

    I suppose you want to add HyperLink in the NodeTemplate of RadTreeView along with the node text and attach click event for the HyperLink. Following is the sample code that I tried to achieve the same.

    ASPX:
    <telerik:RadTreeView ID="RadTreeView1" runat="server"  onnodecreated="RadTreeView1_NodeCreated">
        <NodeTemplate>
             <asp:HyperLink ID="HyperLink1" runat="server" ImageUrl="~/Images/bullet5.jpg" ></asp:HyperLink>
             <%# DataBinder.Eval(Container, "Text") %>
        </NodeTemplate>
    </telerik:RadTreeView>

    C#:
    protected void Page_Load(object sender, EventArgs e)
      {
        if (!IsPostBack)
          {
             RadTreeNode parent = new RadTreeNode();
             parent.Text = "parent";
             RadTreeNode child1 = new RadTreeNode();
             child1.Text = "child1";
             RadTreeNode child2 = new RadTreeNode();
             child2.Text = "child2";
             RadTreeNode child3 = new RadTreeNode();
             child3.Text = "child3";
             RadTreeView1.Nodes.Add(parent);
             parent.Nodes.Add(child1);
             parent.Nodes.Add(child2);
             parent.Nodes.Add(child3);
             RadTreeView1.DataBind();
          }
      }
    protected void RadTreeView1_NodeCreated(object sender, RadTreeNodeEventArgs e)
     {
          HyperLink HyperLink1 = (HyperLink)e.Node.FindControl("HyperLink1");
          HyperLink1.Attributes.Add("onclick", "clickImage();");
     }

    JS:
    <script type="text/javascript">
        function clickImage() {
            alert("HyperLink clicked");
        }
    </script>

    Hope this helps.

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Aarsh
    Aarsh avatar
    192 posts
    Member since:
    Jun 2012

    Posted 19 Jul 2012 Link to this post

    Hi Princy,

    I am not sure, if I could explain my requirement clearly, but <NodeTemplate> does serve my purpose, thanks for that idea :-)



    Specifically, in the demo-webpage above, if the user clicks on the scanner image, she'd get redirected to "hotmail.com" but if she clicks on the "Text" she'd get redirected to "bing.com"

    I'm sharing the code snippet for other community members, so if they find this thread, they might get what they're looking for:

    <telerik:RadTreeView ID="RadTreeView1" runat="server" OnNodeCreated="OnRadTreeNodeCreated">
                <NodeTemplate>
                    <asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="~/Images/Scanner5 32x32.png" PostBackUrl="http://www.hotmail.com" />
                    <asp:HyperLink ID="HyperLink1" runat="server"
                        NavigateUrl="http://www.bing.com">Text</asp:HyperLink>
                    <%# DataBinder.Eval(Container, "Text") %>
                </NodeTemplate>
            </telerik:RadTreeView>

    But, I am actually looking for some kind of functionality where the link does not show "text" for ALL but we can actually set it dynamically per node

    I am trying to use following but it looks like the aspx Node Template overrides it: [ it is not working ]

    foreach (DataRow dRow in dt.Rows)
    {
        RadTreeNode childRadTreeNode = new RadTreeNode(dRow["PROCIMAGE"].ToString(), dRow["PROCIMAGE"].ToString());
        //proceedingChildNodes.Add(childRadTreeNode);
        mainTreeNode.Nodes.Add(childRadTreeNode);
    }
     
    RadTreeView1.Nodes.Add(mainTreeNode);
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 19 Jul 2012 Link to this post

    Hi Aarsh,

    In RadTreeView the NodeTemplate's are completely removing the default node. Thats why you are not able to see the text of the node. you should explicitly call the DataBind() method even if no datasource is set to the TreeView. Here is the sample code that I tried based on your scenario.

    ASPX:
    <telerik:RadTreeView ID="RadTreeView1" runat="server" OnNodeCreated="OnRadTreeNodeCreated">
      <NodeTemplate>
        <asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="~/Images/Scanner5 32x32.png" PostBackUrl="http://www.hotmail.com" />
        <asp:HyperLink ID="HyperLink1" runat="server" Text='<%# DataBinder.Eval(Container, "Text") %>' NavigateUrl="http://www.bing.com"></asp:HyperLink>
      </NodeTemplate>
    </telerik:RadTreeView>

    C#:
    if (!IsPostBack)
     {
       RadTreeNode mainTreeNode = new RadTreeNode();
       mainTreeNode.Text = "parent";
       foreach (DataRow dRow in dt.Rows)
        {
          RadTreeNode childRadTreeNode = new RadTreeNode(dRow["PROCIMAGE"].ToString(), dRow["PROCIMAGE"].ToString());
          mainTreeNode.Nodes.Add(childRadTreeNode);
        }
       RadTreeView1.Nodes.Add(mainTreeNode);
       RadTreeView1.DataBind();
     }

    Hope this helps.

    Thanks,
    Princy.
Back to Top