Extended TreeView Tutorials

Node Objects

How to create Image node object

In order to display image in the node we can create ImageNodeObject class inherited from NodeObjectBase.

public class ImageNodeObject : NodeObjectBase
    {
        public ImageNodeObject() : base() { }
        public ImageNodeObject(NodeBase node) : base(node) { }

        private Image image;
        public Image Image 
        {
            get {
                return image;
            }
            set {
                image = value;
            }
        }

        protected override void OnComputeBounds(ComputeEventArgs e)
        {
            // In the OnComputeBounds method we have to define the size of node object
            // in our case this is an image size. We have to set the value of Bounds property.
            // This property will be used when node object is painting on the control.
            // 
            base.OnComputeBounds(e);

            if (image == null) return;

            // We have to use e.Location propery, because it this is position of node object 
            // in the control
            Bounds = new Rectangle(e.Location.X, e.Location.Y, image.Width, image.Height);
        }

        protected override void OnPaint(object sender, PaintEventArgs e)
        {
            // Here we just draw image. Property e.ClipRectangle defines a rectangle 
            // in which bounds we have to paint our object.
            
            base.OnPaint(sender, e);

            if (image != null)
            e.Graphics.DrawImage(image, e.ClipRectangle.X, e.ClipRectangle.Y);
        }
    
    }
     

How to use ObjectClick event

When user clicks on the node, at the same time he clicks on one of the node's object. It easy to determine which node object was clicked. There are two ways how to do it. First and the most accurate way is to check zero-base NodeObjectIndex. Every node object in the table is numerated by rows and then by columns. This way is useful when node has two object with the same type. Second way is to use NodeObject property of the event arguments. You must check node object type to make sure that you will use correct node object properties

        private void extendedTreeView1_ObjectClick(object sender, ObjectClickEventArgs e)
        {
            if (e.NodeObjectIndex == 0)
                MessageBox.Show("ObjectClick event on the image object");
        }
         

        private void extendedTreeView1_ObjectClick(object sender, ObjectClickEventArgs e)
        {
            if (e.NodeObject is CheckBoxNodeObject) 
                (e.NodeObject as CheckBoxNodeObject).Checked = 
                          !(e.NodeObject as CheckBoxNodeObject).Checked;
        }
         

How to edit multiline text

TextNodeObject has two methods BeginEdit and EndEdit. When you want to start text editing you just need to call BeginEdit method for desired node object. Editing is complete when edit box lose focus or when you call EndEdit method.

        private void editNodeButton_Click(object sender, EventArgs e)
        {
            if (extendedTreeView1.SelectedNode != null)
            {
                foreach (NodeObjectBase obj in extendedTreeView1.SelectedNode.Objects)
                {
                    if (obj is TextNodeObject)
                    {
                        (obj as TextNodeObject).BeginEdit();
                        break;
                    }
                }
            }
        }