Add image and text in treenode and set URL for image and text

5 posts, 1 answers
  1. Kavitha
    Kavitha avatar
    6 posts
    Member since:
    Nov 2013

    Posted 10 Apr 2014 Link to this post

    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

  2. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 10 Apr 2014 in reply to Kavitha Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kavitha
    Kavitha avatar
    6 posts
    Member since:
    Nov 2013

    Posted 16 Apr 2014 in reply to Shinu Link to this post

    Thank you very much.
    Your solution worked well.
  5. Kavitha
    Kavitha avatar
    6 posts
    Member since:
    Nov 2013

    Posted 26 May 2014 in reply to Kavitha Link to this post

    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

  6. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 27 May 2014 in reply to Kavitha Link to this post

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