Adding target URL to child node icon

[Aarsh]

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 :-)

[Princy]

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.

[Aarsh]

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

[Princy]

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.