Edit this page

Formatting Nodes

Similar to RadGridView, RadTreeView is virtualized. Its visual nodes (TreeNodeElement) are reused by the data nodes (RadTreeNode) which bring increased performance and optimized memory footprint. You can easily format node element by handling the NodeFormatting event. The arguments of this event return the visual Node (and the data Node that is currently assigned to it) that is currently formatted and which you can additionally style.

treeview-working-with-nodes-formatting-nodes 001

The purpose of the example that follows is to demonstrate how you can show different images for the RadTreeView nodes depending on their logical state. We are going to simulate a tree of files and folders displaying an image of a closed folder when a node that contains other nodes is collapsed and displaying an image of an opended folder when a node that contains other nodes is expanded.

  1. Let's fill RadTreeView with some sample nodes which represent files and folders:

    treeview-working-with-nodes-formatting-nodes 002

  2. Then, add three images as project resources. These images will indicate if a node is a file, an opened folder or a closed folder

  3. Handle the NodeFormatting event implementing, setting the image to the Image property of the ImageElement.This element is responsible for containing the image of the visual NodeElement:

Bitmap file = SamplesCS.Properties.Resources.file;
private void radTreeView1_NodeFormatting(object sender, TreeNodeFormattingEventArgs e)
    if (e.Node.Level > 0)
        e.NodeElement.BorderColor = Color.Blue;
        e.NodeElement.BorderBoxStyle = Telerik.WinControls.BorderBoxStyle.SingleBorder;
        e.NodeElement.BorderGradientStyle = Telerik.WinControls.GradientStyles.Solid;
        e.NodeElement.BackColor = Color.LightBlue;
        e.NodeElement.ContentElement.ForeColor = Color.White;
        e.NodeElement.ImageElement.Image = file;
        e.NodeElement.ResetValue(LightVisualElement.BorderColorProperty, ValueResetFlags.Local);
        e.NodeElement.ResetValue(LightVisualElement.BorderBoxStyleProperty, ValueResetFlags.Local);
        e.NodeElement.ResetValue(LightVisualElement.BorderGradientStyleProperty, ValueResetFlags.Local);
        e.NodeElement.ResetValue(LightVisualElement.BackColorProperty, ValueResetFlags.Local);
        e.NodeElement.ContentElement.ResetValue(LightVisualElement.ForeColorProperty, ValueResetFlags.Local);
        e.NodeElement.ImageElement.ResetValue(LightVisualElement.ImageProperty, ValueResetFlags.Local);

Private file As Bitmap = My.Resources.file
Private Sub radTreeView1_NodeFormatting(ByVal sender As Object, ByVal e As TreeNodeFormattingEventArgs)
    If e.Node.Level > 0 Then
        e.NodeElement.BorderColor = Color.Blue
        e.NodeElement.BorderBoxStyle = Telerik.WinControls.BorderBoxStyle.SingleBorder
        e.NodeElement.BorderGradientStyle = Telerik.WinControls.GradientStyles.Solid
        e.NodeElement.BackColor = Color.LightBlue
        e.NodeElement.ContentElement.ForeColor = Color.White
        e.NodeElement.ImageElement.Image = file
        e.NodeElement.ResetValue(LightVisualElement.BorderColorProperty, ValueResetFlags.Local)
        e.NodeElement.ResetValue(LightVisualElement.BorderBoxStyleProperty, ValueResetFlags.Local)
        e.NodeElement.ResetValue(LightVisualElement.BorderGradientStyleProperty, ValueResetFlags.Local)
        e.NodeElement.ResetValue(LightVisualElement.BackColorProperty, ValueResetFlags.Local)
        e.NodeElement.ContentElement.ResetValue(LightVisualElement.ForeColorProperty, ValueResetFlags.Local)
        e.NodeElement.ImageElement.ResetValue(LightVisualElement.ImageProperty, ValueResetFlags.Local)
    End If
End Sub


Please note that you should always provide an 'else' clause for each 'if' clause that you have in the implementation of the NodeFormatting event. Skipping this operation will lead to incorrect images applied to the inappropriate nodes.


It is also important that we are accessing the project resources outside the NodeFormatting event handler. Accessing project resources is a time consuming operation and since NodeFormatting is fired for every visible node, you may experience performance issues if you try to access such resources in the event handler.