Multiple images on left side of RadTreeNode

[Dylan]

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.

[Richard Slade]

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

[Emanuel Varga]

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

[Dylan]

Thanks for the advice guys, I'll look into implementing Emanuel's sample into our code.

[Melissa]

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

 

 

[Melissa]

Its Ok I have found this .

 

It is found by 

  Dim N As InheritedClass = TryCast(TargetElement.Data, InheritedClass)​

[Dess | Tech Support Engineer, Principal]

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