[Solved] Add image and text in treenode and set URL for image and text

[Kavitha]

Hello,

I need to create a RadTreeview with each tree node having a image and text.
If I click on text, it must navigate to a page. I can set this with node.NavigateUrl.
If I click on image , it must navigate to another page. How can I achieve this?

With node.ImageURL , I am able to set a image in node but can we set navigateURL for image or do I need to add another image at end of text and set its URL?
Can we guide me how to navigate to different pages while clicking on image and text of a node?
Thanks in advance.

Kavitha

[Shinu]

Hi Kavitha,

As a suggestion you can try with NodeTemplate to achieve your scenario as follows.

ASPX:

<telerik:RadTreeView ID="RadTreeView1" runat="server">
    <Nodes>
        <telerik:RadTreeNode>
            <NodeTemplate>
                <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/Black_Plus.png" onclick="ImageNavigate();" />
                <asp:Label ID="label1" runat="server" Text="Node1" onclick="TextNavigate();">
                </asp:Label>
            </NodeTemplate>
        </telerik:RadTreeNode>
    </Nodes>
</telerik:RadTreeView>

JavaScript:

function ImageNavigate() {
    window.open("http://www.w3schools.com", "_blank");
}
function TextNavigate() {
    window.open("http://www.telerik.com", "_blank");
}

Let me know if you have any concern.
Thanks,
Shinu.

[Kavitha]

Thank you very much.
Your solution worked well.

[Kavitha]

Hello,

I have used template for RadTreeview.

I have an imagebutton and label in my template as mentioned above. Clicking on image goes to a url and clicking of label goes to another url.

Now I want the selected node to be in bold letters. I want to the letters in label to be in bold letters.

If I construct treeview without template, we can use OnNodeClick event and put
node.Selected = true to make the selected node in bold letters.

But with template, OnNodeClick event is not fired. How I can make the selected node in
bold letters with template?

Can you give me any idea?

Thanks in advance.
Kavitha

[Shinu]

Hi Kavitha,

Please have a look into the sample code snippet to achieve your scenario.

ASPX:

<telerik:RadTreeView ID="RadTreeView1" runat="server" OnNodeClick="RadTreeView1_NodeClick">
    <NodeTemplate>
        <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/Black_Plus.png" onclick="ImageNavigate(); return false;" />
        <asp:Label ID="label1" runat="server" Text="Node1" onclick="TextNavigate(this);">
        </asp:Label>
    </NodeTemplate>
    <Nodes>
        <telerik:RadTreeNode>
        </telerik:RadTreeNode>
        <telerik:RadTreeNode>
        </telerik:RadTreeNode>
    </Nodes>
</telerik:RadTreeView>

C#:

protected void RadTreeView1_NodeClick(object sender, Telerik.Web.UI.RadTreeNodeEventArgs e)
{
    foreach (RadTreeNode node in RadTreeView1.Nodes)
    {
        Label label = (Label)node.FindControl("label1");
        if (node.Selected)
        {
            label.Style.Add("font-Weight", "bold");
        }
        else
        {
            label.Style.Add("font-Weight", "normal");
        }

    }
}

Thanks,
Shinu.