Display more than one image on a node.

4 posts, 1 answers
  1. Aston
    Aston avatar
    3 posts
    Member since:
    Jan 2013

    Posted 05 Feb 2013 Link to this post

    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?
  2. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 05 Feb 2013 Link to this post

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

    Posted 06 Feb 2013 Link to this post

    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
  5. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 11 Feb 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top