[Solved] Display more than one image on a node.

[Aston]

New to telerik and trying to use the RadTreeview to replace our old tree. I am trying to display more that one image on a node.

something like this
    
Root
    |
    ------Item1 (Image1) (Image2) (Image 3)
    |
    ------Item1 (Image1) (Image2) (Image 3)

Is this possible? if so, can you provide an example of how to do?

[Princy]

Hi Aston

You can couple the images in front of the treeview nodes with templates(check this demo)- thus you can have as many images as you want for the nodes.Hope this helps.

Thanks
Princy

[Aston]

Princy, Thanks for the reply it got me further along, I do have another question. How do I catch the click event from a control in my template. I posted my mock test code below. I need to know when each of the links are clicked.

Imports Telerik.Web.UI
Public Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        TreeInit()
    End Sub

    Public Sub btnAdd_Click(sender As Object, e As EventArgs) Handles btnAdd.Click

        Dim newNode As New AttachmentImageNode("ImageNode")
        Dim newNode2 As New AttachmentFolderNode("FolderNode")

        Dim tvNodes As Telerik.Web.UI.RadTreeNodeCollection = RadTreeView1.Nodes
        tvNodes.Add(newNode)
        tvNodes.Add(newNode2)
        RadTreeView1.DataBind()
    End Sub

    Public Sub TreeInit()

        Dim newNode As New AttachmentImageNode("ImageNode")
        Dim newNode2 As New AttachmentFolderNode("FolderNode")

        Dim tvNodes As Telerik.Web.UI.RadTreeNodeCollection = RadTreeView1.Nodes
        tvNodes.Add(newNode)
        tvNodes.Add(newNode2)


        RadTreeView1.DataBind()

    End Sub

    Private Sub RadTreeView1_NodeClick(sender As Object, e As RadTreeNodeEventArgs) Handles RadTreeView1.NodeClick
        '//
    End Sub
End Class



Public Class AttachmentImageNode
    Inherits RadTreeNode
    Dim tp As New AttachmentImageNodeTemplate
    Public Sub New(nodeText As String)
        MyBase.Text = nodeText
        MyBase.ImageUrl = ".\Images\45.png"
        tp.InstantiateIn(Me)
    End Sub
End Class



Public Class AttachmentFolderNode
    Inherits RadTreeNode
    Dim tp As New AttachmentFolderNodeTemplate
    Public Sub New(nodeText As String)
        MyBase.Text = nodeText
        MyBase.ImageUrl = ".\Images\book.png"
        tp.InstantiateIn(Me)
    End Sub

End Class

Public Class AttachmentImageNodeTemplate
    Implements System.Web.UI.ITemplate

    Public Sub InstantiateIn(container As Control) Implements ITemplate.InstantiateIn

        Dim img1 As New Image
        Dim img2 As New Image
        Dim img3 As New Image
        Dim img4 As New Image
        Dim label1 As New Label
        Dim lbl_space1 As New Label
        Dim lbl_space2 As New Label
        Dim lbl_space3 As New Label
        Dim lbl_space4 As New Label


        Dim Link1 As New LinkButton
        img1.ImageUrl = ".\Images\edit.png"
        img1.ToolTip = "Edit"
        Link1.Controls.Add(img1)
        Link1.ID = "Link1"

        Dim Link2 As New LinkButton
        img2.ImageUrl = "\Images\Close_box.png"
        img2.ToolTip = "Delete"
        Link2.Controls.Add(img2)
        Link2.ID = "Link2"

        Dim Link3 As New LinkButton
        img3.ImageUrl = "\Images\Review.png"
        img3.ToolTip = "Review"
        Link3.Controls.Add(img3)
        Link3.ID = "Link3"

        Dim Link4 As New LinkButton
        img4.ImageUrl = "\Images\link.png"
        img4.ToolTip = "History"
        Link4.Controls.Add(img4)
        Link4.ID = "Link4"

        lbl_space1.Text = " "
        lbl_space2.Text = " "
        lbl_space3.Text = " "
        lbl_space4.Text = " "

        Dim rtn As RadTreeNode = DirectCast(container, RadTreeNode)
        label1.Text = rtn.Text
        AddHandler label1.DataBinding, AddressOf label1_DataBinding
        container.Controls.Add(label1)
        container.Controls.Add(lbl_space1)
        container.Controls.Add(Link1)
        container.Controls.Add(lbl_space2)
        container.Controls.Add(Link2)
        container.Controls.Add(lbl_space3)
        container.Controls.Add(Link3)
        'container.Controls.Add(lbl_space4)
        'container.Controls.Add(Link4)

    End Sub
    Private Sub label1_DataBinding(ByVal sender As Object, ByVal e As EventArgs)
        Dim target As Label = DirectCast(sender, Label)
        Dim node As RadTreeNode = DirectCast(target.BindingContainer, RadTreeNode)
        Dim nodeText As String = DirectCast(DataBinder.Eval(node, "Text"), String)
        target.Text = nodeText
    End Sub

End Class


Public Class AttachmentFolderNodeTemplate
    Implements System.Web.UI.ITemplate

    Public Sub InstantiateIn(container As Control) Implements ITemplate.InstantiateIn

        Dim img1 As New Image
        Dim img2 As New Image
        Dim lbl_space1 As New Label
        Dim lbl_space2 As New Label

        lbl_space1.Text = " "
        lbl_space2.Text = " "

        Dim label1 As New Label
        img1.ImageUrl = ".\Images\Close_Box.png"
        img2.ImageUrl = ".\Images\edit.png"

        Dim Link1 As New LinkButton
        img1.ImageUrl = ".\Images\edit.png"
        img1.ToolTip = "Edit"
        Link1.Controls.Add(img1)

        Dim Link2 As New LinkButton
        img2.ImageUrl = "\Images\Close_box.png"
        img2.ToolTip = "Delete"
        Link2.Controls.Add(img2)


        Dim rtn As RadTreeNode = DirectCast(container, RadTreeNode)
        label1.Text = rtn.Text
        AddHandler label1.DataBinding, AddressOf label1_DataBinding
        container.Controls.Add(label1)
        container.Controls.Add(lbl_space1)
        container.Controls.Add(Link1)
        container.Controls.Add(lbl_space2)
        container.Controls.Add(Link2)

    End Sub


    Private Sub label1_DataBinding(ByVal sender As Object, ByVal e As EventArgs)
        Dim target As Label = DirectCast(sender, Label)
        Dim node As RadTreeNode = DirectCast(target.BindingContainer, RadTreeNode)
        Dim nodeText As String = DirectCast(DataBinder.Eval(node, "Text"), String)
        target.Text = nodeText
    End Sub

End Class

[Boyan Dimitrov]

Hello,

An easy and convenient way to catch a click event from a control in your template would be to add a handler in the code behind for that specific control. In the code snippet below you could find a demonstration of creating a link button control and attach its click event to a specific handler. This way you can implement the desired behavior when user clicks on that link button.
//code behind

Public Sub InstantiateIn(container As Control)
           Dim Link1 As New LinkButton
           Link1.Text = "link button"
           AddHandler Link1.Click, AddressOf Link1_Click
           container.Controls.Add(Link1)
       End Sub
Private Sub Link1_Click(sender As Object, e As EventArgs)
            'here goes you custom logic
           Dim link As LinkButton = DirectCast(sender, LinkButton)
           link.Text = "Clicked"
       End Sub

Regards,
Boyan Dimitrov
the Telerik team