Multiple images on left side of RadTreeNode

7 posts, 1 answers
  1. Dylan
    Dylan avatar
    2 posts
    Member since:
    Oct 2010

    Posted 04 Oct 2010 Link to this post

    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.
  2. Richard Slade
    Richard Slade avatar
    3000 posts
    Member since:
    May 2009

    Posted 05 Oct 2010 Link to this post

    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
  3. UI for WinForms is Visual Studio 2017 Ready
  4. Answer
    Emanuel Varga
    Emanuel Varga avatar
    1336 posts
    Member since:
    May 2010

    Posted 05 Oct 2010 Link to this post

    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
  5. Dylan
    Dylan avatar
    2 posts
    Member since:
    Oct 2010

    Posted 06 Oct 2010 Link to this post

    Thanks for the advice guys, I'll look into implementing Emanuel's sample into our code.
  6. Stephen
    Stephen avatar
    2 posts
    Member since:
    Dec 2014

    Posted 17 Jul 2015 in reply to Emanuel Varga Link to this post

    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

     

     

  7. Stephen
    Stephen avatar
    2 posts
    Member since:
    Dec 2014

    Posted 17 Jul 2015 in reply to Stephen Link to this post

    Its Ok I have found this .

     

    It is found by 

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

  8. Dess
    Admin
    Dess avatar
    1601 posts

    Posted 17 Jul 2015 Link to this post

    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
Back to Top
UI for WinForms is Visual Studio 2017 Ready