Adding custom controls as treeview nodes

[Mat]

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

[Svett]

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

[Mat]

Excellent. Thank you. I'll give it a go.

Mat

[KennethMoss]

How would you access each control within the nodecontrol for each node?

[Stefan]

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

 

 

[KennethMoss]

I would like to access the node index and corresponding values in the control of that node like in the attachment.

[Dess | Tech Support Engineer, Principal]

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

 

 

[Christoffer]

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?

[Dess | Tech Support Engineer, Principal]

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