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

Adding custom controls as treeview nodes

8 Answers 212 Views
Treeview
This is a migrated thread and some comments may be shown as answers.
Mat
Top achievements
Rank 1
Mat asked on 26 Oct 2012, 01:38 PM
Hi, Rather than just adding text nodes to a treeview I'd like to be able to a custom composite controls, made up of, for instance, a label, a combo box and a text box. Is this possible? Thanks Mat

8 Answers, 1 is accepted

Sort by
0
Svett
Telerik team
answered on 29 Oct 2012, 03:06 PM
Hi Mat,

Thank you for writing.

You can achieve this easily by creating a custom node element. You can do that by deriving from the TreeNodeElement class. Then you should use the CreateNodeElement event to replace the default one. I am enclosing a sample project that demonstrates how you can do that.

I hope this helps.

Kind regards,
Svett
the Telerik team
Q3’11 of RadControls for WinForms is available for download (see what's new). Get it today.
0
Mat
Top achievements
Rank 1
answered on 01 Nov 2012, 05:39 AM
Excellent. Thank you. I'll give it a go.

Mat
0
KennethMoss
Top achievements
Rank 1
answered on 01 Mar 2015, 05:50 PM
How would you access each control within the nodecontrol for each node?
0
Stefan
Telerik team
answered on 02 Mar 2015, 12:35 PM
Hi Kenneth,

RadTreeView uses UI virtualization for its nodes, so accessing the control is not recommended approach. Can you please provide more information about your scenario and I will be glad to help you achieve it.

I am looking forward to your reply.

Regards,
Stefan
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
KennethMoss
Top achievements
Rank 1
answered on 13 Mar 2015, 07:49 PM
I would like to access the node index and corresponding values in the control of that node like in the attachment.
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 18 Mar 2015, 07:15 AM
Hello Kenneth,

Thank you for writing back.

With RadTreeView you can create custom nodes and display them instead of the default ones. This can be done by creating a custom TreeNodeElement, which will replace the default one in the CreateNodeElement event handler. If the custom elements inside the TreeNodeContentElement are exposed as public properties you will be able to access them in the NodeFormatting events for example.

However, as my colleague, Stefan remarked, RadTreeView uses UI virtualization for its nodes. Hence, when you preform scrolling, the visual elements will be reused to display the information for the relevant RadTreeNodes. That is why I would recommend you to use the custom elements for updating the corresponding DataBoundItem. Afterwards, you can access the requested information by using the RadTreeNode.DataBoundItem property.

I hope this information helps. If you have any additional questions, please let me know.

Regards,
Dess
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Christoffer
Top achievements
Rank 1
answered on 17 Apr 2018, 01:30 PM
Hi. Using this example and the NodeMouseDoubleClick event of the TreeView, it will not fire if I doubleclick on anything in the customItem, e.g anything that's inside the RadHostItem. How can this be solved?
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 18 Apr 2018, 12:59 PM
Hello, Christoffer,   

Note that it is necessary the exact element that you double click to notify the parent for the mouse input. You should set the NotifyParentOnMouseInput property to true  and the ShouldHandleMouseInput property to false for the specific element. In order to enable the respective mouse events for the custom node, you can use the following modified code snippet for the referred example in our documentation: 
class CustomContentElement : TreeNodeContentElement
        {
 
//... some other code
            public override void Synchronize()
            {
                this.ShouldHandleMouseInput = false;
                this.NotifyParentOnMouseInput = true
                textElement.NotifyParentOnMouseInput = true;
                textElement.ShouldHandleMouseInput = false;
                nodeContentContainer.NotifyParentOnMouseInput = true;
                nodeContentContainer.ShouldHandleMouseInput = false;
 
                this.DrawFill = true;
 
                TreeNodeElement treeNodeElement = this.NodeElement;
                RadTreeNode node = treeNodeElement.Data;
                DataRowView rowView = (DataRowView)node.DataBoundItem;
 
                if (node.Level == 0)
                {
                    this.textElement.Text = "" + rowView["ArtistName"];
                    if (node.Expanded == false)
                    {
                        buttonElement.Text = "Show Albums";
                    }
                    else
                    {
                        buttonElement.Text = "Hide Albums";
                    }
 
                    this.BorderColor = Color.FromArgb(110, 153, 210);
                    this.BackColor = Color.FromArgb(174, 190, 217);
                    this.BackColor2 = Color.FromArgb(168, 183, 210);
                }
                else if (node.Level == 1)
                {
                    this.textElement.Text = "" + rowView["AlbumName"];
                    this.buttonElement.Text = "Play Album";
 
                    this.BorderColor = Color.FromArgb(210, 153, 210);
                    this.BackColor = Color.FromArgb(74, 190, 217);
                    this.BackColor2 = Color.FromArgb(50, 150, 190);
                }
                else
                {
                    this.textElement.Text = "" + rowView["SongName"];
                    this.buttonElement.Text = "Play Song";
 
                    this.BorderColor = Color.FromArgb(110, 153, 110);
                    this.BackColor = Color.FromArgb(234, 190, 117);
                    this.BackColor2 = Color.FromArgb(208, 183, 110);
                }
            }
//... some other code
        }
 
I hope this information helps. If you have any additional questions, please let me know. 

Regards,
Dess
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Treeview
Asked by
Mat
Top achievements
Rank 1
Answers by
Svett
Telerik team
Mat
Top achievements
Rank 1
KennethMoss
Top achievements
Rank 1
Stefan
Telerik team
Dess | Tech Support Engineer, Principal
Telerik team
Christoffer
Top achievements
Rank 1
Share this question
or