This is a migrated thread and some comments may be shown as answers.

Multiple images on left side of RadTreeNode

6 Answers 176 Views
Treeview
This is a migrated thread and some comments may be shown as answers.
Dylan
Top achievements
Rank 1
Dylan asked on 05 Oct 2010, 02:01 AM
Hi,

Is it possible to add multiple images to the left and right sides of a RadTreeNode?

I'm using RadControls for WinForms Q2 2010 SP2.

Thanks.

6 Answers, 1 is accepted

Sort by
0
Richard Slade
Top achievements
Rank 2
answered on 05 Oct 2010, 09:45 AM
Hi Dylan, 

I don't believe that it's possible to have multiple images on the left and right of the nodes. 

You can however add an image to the right of the node text using 
Node.FarImage = ' Image
And Set the left image
Node.Image = 'Image

The other way to have multiple images is to make one image that looks like multiple images and set that to be either the Image or FarImage property. 

You can also set the state image (expanded, collapsed etc..) as per this article. 
http://www.telerik.com/help/winforms/tree_nodeschangeimage.html


Hope that helps
Richard
0
Accepted
Emanuel Varga
Top achievements
Rank 1
answered on 05 Oct 2010, 08:33 PM
Hello Dylan,

Richard is right, by default it is not possible to do that, and because RadTreeView is not yet meant to support virtualization, you cannot do this in a clean and logical way, but as i like to think everything is possible if you really want to, so in order to test this, i have created a small test application that will take a list of images, concatenate them all into one image and display it on the left of the TreeNode

Code as follows C#:
using System.Collections.Generic;
    using System.Drawing;
    using System.Windows.Forms;
    using Telerik.WinControls.UI;
 
    public partial class Form1 : Form
    {
        private RadTreeView radTreeView1 = new RadTreeView();
 
        public Form1()
        {
            InitializeComponent();
            this.Load += new System.EventHandler(Form1_Load);
        }
 
        void Form1_Load(object sender, System.EventArgs e)
        {
            radTreeView1.Dock = DockStyle.Fill;
 
            var node1 = new CustomTreeNode("Node1");
            var node2 = new CustomTreeNode("Node2");
            var node3 = new CustomTreeNode("Node3");
            node3.Images = new List<Image> { Properties.Resources.ar, Properties.Resources.ca };
            var node4 = new CustomTreeNode("Node4");
            node1.Images = new List<Image> { Properties.Resources.ar, Properties.Resources.ca, Properties.Resources.es_mx };
            radTreeView1.Nodes.Add(node1);
            radTreeView1.Nodes.Add(node2);
            node2.Images = new List<Image> { Properties.Resources.ca, Properties.Resources.ar };
            node1.Nodes.Add(node3);
            node2.Nodes.Add(node4);
 
            this.Controls.Add(radTreeView1);
        }
    }
 
    public class CustomTreeNode : RadTreeNode
    {
        public CustomTreeNode()
        {
        }
 
        public CustomTreeNode(string name)
            : base(name)
        {
        }
 
        private List<Image> images = new List<Image>();
 
        public override System.Drawing.Image Image
        {
            get
            {
                if (this.images.Count == 0)
                {
                    return base.Image;
                }
 
                return this.GetImageForList(this.Images);
            }
            set
            {
                base.Image = value;
            }
        }
 
        public List<Image> Images
        {
            get
            {
                return this.images;
            }
            set
            {
                this.images = value;
            }
        }
 
        private Image GetImageForList(List<Image> images)
        {
            if (images.Count == 0)
            {
                return null;
            }
 
            var bitmap = new Bitmap(20 * images.Count, 20);
            Graphics g = Graphics.FromImage(bitmap);
 
            var count = 0;
            foreach (var image in images)
            {
                g.DrawImage(image, 20 * count++, 0, 20, 20);
            }
 
            return bitmap;
        }
    }

VB:
Imports System.Collections.Generic
Imports System.Drawing
Imports System.Windows.Forms
Imports Telerik.WinControls.UI
Public Class Form1
 
    Private radTreeView1 As New RadTreeView()
    Private image1 As Image = My.Resources.Resource1.ar
    Private image2 As Image = My.Resources.Resource1.ca
    Private image3 As Image = My.Resources.Resource1.es_mx
 
    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        radTreeView1.Dock = DockStyle.Fill
 
        Dim node1 = New CustomTreeNode("Node1")
        Dim node2 = New CustomTreeNode("Node2")
        Dim node3 = New CustomTreeNode("Node3")
        node3.Images = New List(Of Image)()
 
        node3.Images.Add(image1)
        node3.Images.Add(image2)
 
        Dim node4 = New CustomTreeNode("Node4")
        node1.Images = New List(Of Image)()
        node1.Images.Add(image1)
        node1.Images.Add(image2)
        node1.Images.Add(image3)
 
        radTreeView1.Nodes.Add(node1)
        radTreeView1.Nodes.Add(node2)
        node2.Images = New List(Of Image)()
        node2.Images.Add(image2)
        node2.Images.Add(image1)
 
        node1.Nodes.Add(node3)
        node2.Nodes.Add(node4)
 
        Me.Controls.Add(radTreeView1)
    End Sub
End Class
 
 
Public Class CustomTreeNode
    Inherits RadTreeNode
    Public Sub New()
    End Sub
 
    Public Sub New(ByVal name As String)
        MyBase.New(name)
    End Sub
 
    Private m_images As New List(Of Image)()
 
    Public Overrides Property Image() As System.Drawing.Image
        Get
            If Me.m_images.Count = 0 Then
                Return MyBase.Image
            End If
 
            Return Me.GetImageForList(Me.Images)
        End Get
        Set(ByVal value As System.Drawing.Image)
            MyBase.Image = value
        End Set
    End Property
 
    Public Property Images() As List(Of Image)
        Get
            Return Me.m_images
        End Get
        Set(ByVal value As List(Of Image))
            Me.m_images = value
        End Set
    End Property
 
    Private Function GetImageForList(ByVal images As List(Of Image)) As Image
        If images.Count = 0 Then
            Return Nothing
        End If
 
        Dim bitmap = New Bitmap(20 * images.Count, 20)
        Dim g As Graphics = Graphics.FromImage(bitmap)
 
        Dim count = 0
        For Each image As Image In images
            g.DrawImage(image, 20 * count, 0, 20, 20)
            count += 1
        Next
 
        Return bitmap
    End Function
End Class

Hope this helps, if you have any other questions or comments, please let me know,

*Update changed the increment in the foreach statement because of a conversion error;
*Update2, i forgot to tell you that you cannot do the same for the FarImage, because they forgot to make it virtual, every other property like FarImageIndex, SelectedFarImage, and others are virtual, I'm hoping someone from Telerik will read this post, and then i would like to ask them very nicely to add a:
TODO: Make FarImage property in RadTreeNode virtual.

Best Regards,
Emanuel Varga
0
Dylan
Top achievements
Rank 1
answered on 07 Oct 2010, 01:58 AM
Thanks for the advice guys, I'll look into implementing Emanuel's sample into our code.
0
Stephen
Top achievements
Rank 1
answered on 17 Jul 2015, 05:22 AM

Hi Emanuel,

 

If you drag over this new node type how do you get the class name it was created by "Customtreenode" not "radtreenode"?

 

Cheers

 

 

0
Stephen
Top achievements
Rank 1
answered on 17 Jul 2015, 06:16 AM

Its Ok I have found this .

 

It is found by 

  Dim N As InheritedClass = TryCast(TargetElement.Data, InheritedClass)‚Äč

0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 17 Jul 2015, 06:24 AM
Hello Stephen,

Thank you for writing.

I am glad that you have found the appropriate solution. If you have any additional questions, please let me know.

Regards,
Dess
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Treeview
Asked by
Dylan
Top achievements
Rank 1
Answers by
Richard Slade
Top achievements
Rank 2
Emanuel Varga
Top achievements
Rank 1
Dylan
Top achievements
Rank 1
Stephen
Top achievements
Rank 1
Dess | Tech Support Engineer, Principal
Telerik team
Share this question
or