User Guidefor IntegralUI TreeListView v4.0

© 2013 Lidor Systems. All rights reserved

Table of contents
Introduction

4

Architecture

5

Object Model

5

Event Model

8

Editor9

Appearance

13

Working with styles

13

How to change the appearance of control border

14

Use of column’s individual styles

16

Use of node’s individual styles

17

Use of subitem’s individual styles

18

How to create alternate look of nodes

20

Style serialization and reuse

22

Visual Styles

22

Themes22

Behavior

23

Working with Columns

23

Add/Remove operations

23

How to add existing column collection

24

How to fix column to the left or right side of the control

24

How to fix the column width25

Different types of column content

25

How to show custom images in column

28

How to show custom control in column

31

How to show custom objects in column

34

Working with Nodes

38

Add/Remove operations

38

How to add existing node collection to the TreeListView

39

How to edit the node text

39

Checked nodes

41

How to preserve checked nodes

42

Selected nodes

43

Multiple selection

43

Hover selection

43

How to preserve selection

43

Working with Subitems

44

Add/Remove operations

44

2

Standard selection

45

Frame selection

45

Drag&Drop operations

45

Use of permissions46

How to create a custom drag&drop operation46

How to perform drag&drop for collection of nodes

50

How to perform drag&drop of an node content to other controls

54

Sorting

55

Use of predefined sorting method

55

Create custom sorting

58

Search62

How to find an node by using specific criteria

62

How to get an node reference from mouse position

62

Keyword search

63

How to maintain scroll position

66

XML Encoding

68

XML Tags that are supported

68

Working with containers: <div> and <p> tags

70

Working with <font> tag

74

Working with font style tags

75

Working with <a> tag

76

Working with <img> tag

77

Working with <control> tag

78

Working with <table>, <tr> and <td> tags

79

Working with <style> tag

84

Using word wrap

86

Serialization87

How to serialize the control content in Streams

87

How to serialize the control content in files

88

How to serialize the control content SQL database90

Sample projects

923

Introduction
This guide will provide you with information on how to work with IntegralUI TreeListView control
and help you to successfully include it in your applications.
With IntegralUI TreeListView you can present your data in very customizable way. This control
takes the best from TreeView and ListView controls and much more. It allows you to create richhierarchical structure of your data.
Here are some of the main features:
•
•
•
•
•
•
•
•
•

Highly customizable appearanceRich content: Text, Images, Hyperlinks, Controls, CheckBox, Flags; can be included inevery column, node or subitem
Arrange column content in custom layouts
Arrange node content in custom layouts
Advanced Drag&Drop operations
Built-in sorting and option to add custom sort operations
Fast loading along with custom progress presentation
XML encoding & serialization
Theme support4

Architecture
IntegralUI TreeListView control is part of IntegralUI family of products, and as such uses common
infrastructure shared among other controls. The TreeListView class is inherited from ListBase classwhich is a parent class for all list controls in IntegralUI class library. Because of this, you will findmany similarities between other controls like ListBox, ListView and TreeListView, which all belongs
to the IntegralUI Lists class library.
Object model

To fill the TreeListView control with data you need to use TreeListViewNodeCollection which holds
a collection of nodes. Every node can contain standard objects like StateImage, CheckBox, Icon,
Text arranged in single line. Furthermore if you want to present your data in multiple columns,
every node contain a collection of SubItems. There is direct relation between columns andsubitems. Meaning, if you reorder columns, the subitems for each node will also be reordered.
Additionally, each column, node and subitem can contain custom content in their space. Bydefault a plain text is used to present data in these objects. However, by using XML tags you cancreate custom layouts for each column, node or subitem. You can insert almost any custom
objects like: Text, Images, Hyperlinks, Controls, CheckBox, Icons, Animated gifs etc. and arrange
them in custom layouts by using Tables and paragraphs.
The following pictures show you the difference between standard presentation, using just plain
text and icons, and advanced presentation: using XML encoding in creation of custom objects.

5Normal mode

Using XML Encoding

6In order to create custom look you can use many color and format styles for TreeListView control
and for every column, node and subitem individually. Additionally, in further customization thestyles can be changed for every part of the column, node or subitem content by using special XML
tags.

7

Event model
There are many events which can help you to determine the current state of TreeListView control.
Here is a complete list of events:
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•

AfterCheck
AfterCollapse
AfterExpand
AfterLabelEdit
AfterSelectAfterSubItemSelectBeforeCheck
BeforeCollapse
BeforeExpand
BeforeLabelEdit
BeforeSelectBeforeSubItemSelectColumnAdded
ColumnAdding
ColumnRemoved
ColumnRemoving
FocusedNodeChanged
FocusedNodeChanging
NodeAdded
NodeAdding
ItemDrag
ItemMouseHover•

ItemObjectClicked•

ItemObjectClicking

•
•
•
•
•

NodeRemoved
NodeRemoving
ScrollPosChanged
SelectionModeChanged
SubItemSelectionChanged

Occurs after the node's check box is checked
Occurs after the node is collapsed
Occurs after the node is expanded
Occurs after the node text is edited
Occurs after the node is selected
Occurs after the subitem is selected
Occurs before the node's check box is checked
Occurs before the node is collapsed
Occurs before the node is expanded
Occurs before the node text is edited
Occurs before the node is selected
Occurs before the subitem is selected
Occurs after new column is added
Occurs before new column is added
Occurs after column is removed from collection
Occurs before column is removed from collection
Occurs after the focused node is changed
Occurs before the focused node is changed
Occurs after new node is added
Occurs before new node is added
Occurs when the user begins dragging an nodeOccurs when the mouse cursor hovers for some time over
an node space
Occurs after the user clicks an custom object (placed withXML encoding) in the control space
Occurs before the user clicks an custom object (placed withXML encoding) in the control space
Occurs after node is removed from collection
Occurs before node is removed from collection
Occurs when position of scrollbar has changed
Occurs when selection type changes
Occurs when selection of subitems is changed

8

EditorThere are two ways to create objects in TreeListView control: during design-time or
programmatically.
In design-time you can use the TreeListView Editor by right-clicking on the TreeListView control.
The form will appear in which you can add, remove, change the columns, nodes or subitems.

In order to create columns, nodes and subitems programmatically, you can use the following
code:
[VB]
' Assuming that TreeListView control exist
Private Sub InitList()' Suspend the layout logic for the TreeListView control
Me.TreeListView1.SuspendUpdate()' Create three columns with header and footer description
Dim column As TreeListViewColumn = Nothing
For j As Integer = 0 To 2
column = New TreeListViewColumn("Header " & j.ToString(), "Footer " &j.ToString())
Me.treeListView1.Columns.Add(column)
Next' Create root nodes
Dim node As TreeListViewNode = Nothing
For i As Integer = 0 To 4

9

node = New TreeListViewNode("Node " & i.ToString())' Create subitems for this nodeCreateSubItems(node, i.ToString())' Create child nodes for this nodeCreateSubNodes(node, 0, i.ToString())
Me.treeListView1.Nodes.Add(node)
Next' Resume the layout logic for the TreeListView control
Me.TreeListView1.ResumeUpdate()
End Sub
Private Sub CreateSubItems(ByVal parentNode As TreeListViewNode, ByVal sufix As
String)' Create subitems for specified node
Dim subItem As TreeListViewSubItem = Nothing
For j As Integer = 0 To Me.treeListView1.Columns.Count - 1
subItem = New TreeListViewSubItem(("Item " & sufix) + j.ToString())
parentNode.SubItems.Add(subItem)
Next
End Sub
Private Sub CreateSubNodes(ByVal parentNode As TreeListViewNode, ByVal level As
Integer, ByVal sufix As String)' In this example only two levels in hierarchy are allowed
If level = 2 Then
Exit Sub
Else' Create child nodes for specified node
Dim node As TreeListViewNode = Nothing
For i As Integer = 0 To 1
node = New TreeListViewNode(("Node " & sufix) + i.ToString())' Create subitems for this nodeCreateSubItems(node, sufix + i.ToString())' Create child nodes for this nodeCreateSubNodes(node, level + 1, sufix + i.ToString())
parentNode.Nodes.Add(node)
Next
End IfEnd Sub[C#]using LidorSystems.IntegralUI.Lists;. . .
// Assuming that TreeListView control exist
private void InitList(){// Suspend the layout logic for the TreeListView control
this.treeListView1.SuspendUpdate();10

// Create three columns with header and footer description
TreeListViewColumn column = null;for (int j = 0; j < 3; j++){column = new TreeListViewColumn("Header " + j.ToString(), "Footer " +j.ToString());
this.treeListView1.Columns.Add(column);}// Create root nodes
TreeListViewNode node = null;for (int i = 0; i < 5; i++){node = new TreeListViewNode("Node " + i.ToString());// Create subitems for this nodeCreateSubItems(node, i.ToString());// Create child nodes for this nodeCreateSubNodes(node, 0, i.ToString());
this.treeListView1.Nodes.Add(node);}// Resume the layout logic for the TreeListView control
this.treeListView1.ResumeUpdate();}private void CreateSubItems(TreeListViewNode parentNode, string sufix){// Create subitems for specified node
TreeListViewSubItem subItem = null;for (int j = 0; j < this.treeListView1.Columns.Count; j++){subItem = new TreeListViewSubItem("Item " + sufix + j.ToString());}

parentNode.SubItems.Add(subItem);}
private void CreateSubNodes(TreeListViewNode parentNode, int level, string sufix){// In this example only two levels in hierarchy are allowed
if (level == 2)
return;else{// Create child nodes for specified node
TreeListViewNode node = null;for (int i = 0; i < 2; i++){node = new TreeListViewNode("Node " + sufix + i.ToString());// Create subitems for this nodeCreateSubItems(node, sufix + i.ToString());// Create child nodes for this nodeCreateSubNodes(node, level+1, sufix + i.ToString());

11

}
}

parentNode.Nodes.Add(node);}12Appearance
Working with styles
The IntegralUI TreeListView is very customizable control. You can customize every part of thecontrol, starting from the background, border, columns, nodes, subitems etc. This is done bynumerous styles with which you can set colors, fonts, alignment, rendering mode. Here is the listof general color and format styles:• CheckBoxStyle - The drawing style of the node’s check box• ColorStyle - The drawing style of the control• ExpandBoxStyle - The drawing style of the node expand/collapse button• FormatStyle - The format style of the control• ScrollBarStyle - The drawing style of horizontal and vertical scrollbar• ToolTipStyle - The drawing style of node’s tooltip

There are general styles with which you can control the appearance for all columns, nodes andsubitems.
The list of column styles:• HoverColumnStyle - The drawing style of column when mouse hovers over it• ColumnFormatStyle - Style by which the column content is formatted• NormalColumnStyle - The default drawing style of the column• SelectedColumnStyle - The drawing style of column when it’s selected

The list of node styles:• DisabledNodeStyle - The drawing style of node when it’s disabled• FocusedNodeStyle - The drawing style of node with input focus• HoverNodeStyle - The drawing style of node when mouse hovers over it• NodeFormatStyle - Style by which the node content is formatted• NormalNodeStyle - The default drawing style of the node
• SelectedNodeStyle - The drawing style of node when it’s selected

The list of subitem styles:• DisabledSubItemStyle - The drawing style of subitem when it’s disabled• HoverSubItemStyle - The drawing style of subitem when mouse hovers over it• SubItemFormatStyle - Style by which the subitem content is formatted• NormalSubItemStyle - The default drawing style of the subitem• SelectedSubItemStyle - The drawing style of subitem when it’s selected

Furthermore, every column, node and subitem have their own set of the above styles with witch
you can customize their appearance individually. These styles are:
The list of individual column styles:• HoverStyle - The drawing style of column when mouse hovers over it• FormatStyle - Style by which the column content is formatted• NormalStyle - The default drawing style of the column• SelectedStyle - The drawing style of column when it’s selected

The list of individual node styles:• DisabledStyle - The drawing style of node when it’s disabled• FocusedStyle - The drawing style of node with input focus• HoverStyle - The drawing style of node when mouse hovers over it• FormatStyle - Style by which the node content is formatted

13• NormalStyle - The default drawing style of the node
• SelectedStyle - The drawing style of node when it’s selected

The list of individual subitem styles:• DisabledStyle - The drawing style of subitem when it’s disabled• HoverStyle - The drawing style of subitem when mouse hovers over it• FormatStyle - Style by which the subitem content is formatted• NormalStyle - The default drawing style of the subitem• SelectedStyle - The drawing style of subitem when it’s selected

How to change the appearance of control border
In some cases you may want to change the border of the TreeListView to appear differently thenthe standard rectangular form. To achieve this goal several properties of the control FormatStyleneeds to be changed. Here is a list of properties which controls a different part of the border:
BorderCornerRadius – holds the value by which the border corner is rounded
BorderCornerShape – responsible for changing the shape of every border corner
BorderLineStyle – determines the thickness of border line
BorderVisibility – determines which side of the border is visible
These properties also exist in format style of every node.
Here is an example where you can see how border can be customized:[VB]
Imports LidorSystems.IntegralUI.Style. . .
' Changing the border of the TreeListView control
Me.treeListView1.FormatStyle.BorderCornerRadius = 15
Me.treeListView1.FormatStyle.BorderCornerShape.BottomLeft = CornerShape.Squared
Me.treeListView1.FormatStyle.BorderCornerShape.BottomRight =CornerShape.Chamfered
Me.treeListView1.FormatStyle.BorderCornerShape.TopRight = CornerShape.Squared
Me.treeListView1.FormatStyle.BorderLineStyle = LineStyle.[Double]' Changing the border of the columns
Me.treeListView1.ColumnFormatStyle.BorderCornerRadius = 7
Me.treeListView1.ColumnFormatStyle.HeaderBorderCornerShape.BottomLeft =CornerShape.Squared
Me.treeListView1.ColumnFormatStyle.HeaderBorderCornerShape.BottomRight =CornerShape.Chamfered
Me.treeListView1.ColumnFormatStyle.HeaderBorderCornerShape.TopRight =CornerShape.Squared
Me.treeListView1.ColumnFormatStyle.HeaderPadding = New Padding(3, 2, 3, 2)
Me.treeListView1.ColumnFormatStyle.FooterBorderCornerShape.BottomLeft =CornerShape.Squared
Me.treeListView1.ColumnFormatStyle.FooterBorderCornerShape.BottomRight =CornerShape.Chamfered
Me.treeListView1.ColumnFormatStyle.FooterBorderCornerShape.TopRight =CornerShape.Squared
Me.treeListView1.ColumnFormatStyle.FooterPadding = New Padding(3, 2, 3, 2)' Changing the border of the nodes
Me.treeListView1.NodeFormatStyle.BorderCornerRadius = 7

14

Me.treeListView1.NodeFormatStyle.BorderCornerShape.BottomLeft =CornerShape.Squared
Me.treeListView1.NodeFormatStyle.BorderCornerShape.BottomRight =CornerShape.Chamfered
Me.treeListView1.NodeFormatStyle.BorderCornerShape.TopRight = CornerShape.Squared
Me.treeListView1.NodeFormatStyle.Padding = New Padding(3, 2, 3, 2)[C#]using LidorSystems.IntegralUI.Style;. . .
// Changing the border of the TreeListView control
this.treeListView1.FormatStyle.BorderCornerRadius = 15;
this.treeListView1.FormatStyle.BorderCornerShape.BottomLeft =CornerShape.Squared;
this.treeListView1.FormatStyle.BorderCornerShape.BottomRight =CornerShape.Chamfered;this.treeListView1.FormatStyle.BorderCornerShape.TopRight = CornerShape.Squared;
this.treeListView1.FormatStyle.BorderLineStyle = LineStyle.Double;// Changing the border of the columns
this.treeListView1.ColumnFormatStyle.BorderCornerRadius = 7;
this.treeListView1.ColumnFormatStyle.HeaderBorderCornerShape.BottomLeft =CornerShape.Squared;
this.treeListView1.ColumnFormatStyle.HeaderBorderCornerShape.BottomRight =CornerShape.Chamfered;this.treeListView1.ColumnFormatStyle.HeaderBorderCornerShape.TopRight =CornerShape.Squared;
this.treeListView1.ColumnFormatStyle.HeaderPadding = new Padding(3,2, 3, 2);
this.treeListView1.ColumnFormatStyle.FooterBorderCornerShape.BottomLeft =CornerShape.Squared;
this.treeListView1.ColumnFormatStyle.FooterBorderCornerShape.BottomRight =CornerShape.Chamfered;this.treeListView1.ColumnFormatStyle.FooterBorderCornerShape.TopRight =CornerShape.Squared;
this.treeListView1.ColumnFormatStyle.FooterPadding = new Padding(3, 2, 3, 2);// Changing the border of the nodes
this.treeListView1.NodeFormatStyle.BorderCornerRadius = 7;
this.treeListView1.NodeFormatStyle.BorderCornerShape.BottomLeft =CornerShape.Squared;
this.treeListView1.NodeFormatStyle.BorderCornerShape.BottomRight =CornerShape.Chamfered;this.treeListView1.NodeFormatStyle.BorderCornerShape.TopRight =CornerShape.Squared;
this.treeListView1.NodeFormatStyle.Padding = new Padding(3, 2, 3, 2);

15

The border for every subitem can also be changed. For this purpose you need to use the
SubItemFormStyle.

Use of column’s individual styles
By default the appearance of columns is controlled by set of styles from their parent TreeListView
control.
If you want to have separate look for a specific column, you can customize it from their individual
styles. Before changing any of these styles, the StyleFromParent property for this columnmust be
set to False. In the following example we will change the look of the column in its normal andhovered state:[VB]' Set the StyleFromParent to False, so that' a specific style changes be appliedcolumn.StyleFromParent = False' Change the look of the column, when it is in normal statecolumn.NormalStyle.BackColor = Color.FromArgb(248, 250, 252)
column.NormalStyle.HeaderColor = Color.LightSteelBlue
column.NormalStyle.HeaderBorderColor = Color.LightSteelBlue' Change the look of the column, when it is in hovered statecolumn.HoverStyle.BackColor = Color.FromArgb(255, 251, 244)
column.HoverStyle.HeaderColor = Color.DarkOrange
column.HoverStyle.HeaderBorderColor = Color.FromArgb(255, 192, 128)
' Repaing the control
Me.treeListView1.Invalidate()[C#]// Set the StyleFromParent to False, so that// a specific style changes be appliedcolumn.StyleFromParent = false;// Change the look of the column, when it is in normal statecolumn.NormalStyle.BackColor = Color.FromArgb(248, 250, 252);
column.NormalStyle.HeaderColor = Color.LightSteelBlue;
column.NormalStyle.HeaderBorderColor = Color.LightSteelBlue;16

// Change the look of the column, when it is in hovered statecolumn.HoverStyle.BackColor = Color.FromArgb(255, 251, 244);
column.HoverStyle.HeaderColor = Color.DarkOrange;
column.HoverStyle.HeaderBorderColor = Color.FromArgb(255, 192, 128);// Repaing the control
this.treeListView1.Invalidate();In the code above the node is the third node in the collection. Here is the result:

Changes in normal state

Changes in hover state

Use of node’s individual styles
By default the appearance of nodes is controlled by set of styles from their parent TreeListView
control.
If you want to have separate look for a specific node, you can customize it from their individual
styles. Before changing any of these styles, the StyleFromParent property for this node must be
set to False. In the following example we will change the look of the node in its normal andhovered state:[VB]' Set the StyleFromParent to False, so that' a specific style changes be applied
node.StyleFromParent = False' Change the look of the node, when it is in normal state
node.NormalStyle.BackColor = Color.LightGreennode.NormalStyle.BorderColor = Color.LimeGreen' Change the look of the node, when it is in hovered state
node.HoverStyle.BackColor = Color.LightSalmon
node.HoverStyle.BorderColor = Color.Salmon
node.HoverStyle.FillStyle = FillStyle.Vertical' Repaing the control
Me.treeListView1.Invalidate()

17

[C#]
// Set the StyleFromParent to False, so that// a specific style changes be applied
node.StyleFromParent = false;// Change the look of the node, when it is in normal state
node.NormalStyle.BackColor = Color.LightGreen;
node.NormalStyle.BorderColor = Color.LimeGreen;// Change the look of the node, when it is in hovered state
node.HoverStyle.BackColor = Color.LightSalmon;
node.HoverStyle.BorderColor = Color.Salmon;
node.HoverStyle.FillStyle = FillStyle.Vertical;// Repaing the control
this.treeListView1.Invalidate();In the code above the node is the third node in the collection. Here is the result:

Changes in normal state

Changes in hover state

Use of subitem’s individual styles
By default subitems doesn’t have color settings, except for the text color. In general theappearance of subitem is controlled by set of styles from their parent TreeListView control.
If you want to have separate look for a specific subitem, you can customize it from their individual
styles. Before changing any of these styles, the StyleFromParent property for this node must be
set to False. In the following example we will change the look of the node in its normal andhovered state:[VB]' To avoid confusion between use of styles for node and subitem,' set parent node's hover style with transparent colors
Me.treeListView1.HoverNodeStyle.BackColor = Color.Transparent
Me.treeListView1.HoverNodeStyle.BorderColor = Color.Transparent' Set the StyleFromParent to False, so that' a specific style changes be applied
subItem.StyleFromParent = False

18

' Change the look of the nosubItemde, when it is in normal state
subItem.NormalStyle.BackColor = Color.LightGreen
subItem.NormalStyle.BorderColor = Color.LimeGreen' Change the look of the nosubItemde, when it is in hovered state
subItem.HoverStyle.BackColor = Color.LightSalmon
subItem.HoverStyle.BorderColor = Color.Salmon
subItem.HoverStyle.FillStyle = FillStyle.Vertical' Repaing the control
Me.treeListView1.Invalidate()[C#]// To avoid confusion between use of styles for node and subitem,// set parent node's hover style with transparent colors
this.treeListView1.HoverNodeStyle.BackColor = Color.Transparent;
this.treeListView1.HoverNodeStyle.BorderColor = Color.Transparent;// Set the StyleFromParent to False, so that// a specific style changes be applied
subItem.StyleFromParent = false;// Change the look of the nosubItemde, when it is in normal state
subItem.NormalStyle.BackColor = Color.LightGreen;
subItem.NormalStyle.BorderColor = Color.LimeGreen;// Change the look of the nosubItemde, when it is in hovered state
subItem.HoverStyle.BackColor = Color.LightSalmon;
subItem.HoverStyle.BorderColor = Color.Salmon;
subItem.HoverStyle.FillStyle = FillStyle.Vertical;// Repaing the control
this.treeListView1.Invalidate();In the code above the node is the third node in the collection. Here is the result:

Changes in normal state

Changes in hover state

19How to create alternate look of nodes
You can create standalone styles which in appropriate conditions can be applied to specific nodes.
For example, every node with an even index can have one appearance and every node with odd
index can have another appearance. But instead of changing the colors for every node, you need
only to create two color styles, one style for the even rows and other for the odd rows.
Here is a sample code that creates node list with alternate look:[VB]
Imports LidorSystems.IntegralUI.Lists
Imports LidorSystems.IntegralUI.Lists.Style. . .
Private Sub ApplyAlternateLook()' Create the even color style
Dim evenNodeStyle As New ListItemColorStyle()
evenNodeStyle.BackColor = Color.WhiteSmoke
evenNodeStyle.FillStyle = FillStyle.Horizontal' Create the odd color style
Dim oddNodeStyle As New ListItemColorStyle()
oddNodeStyle.BackColor = Color.Gainsboro
oddNodeStyle.FillStyle = FillStyle.Horizontal' Cycle through all nodes and apply style changes
For Each node As LidorSystems.IntegralUI.Lists.TreeListViewNode In
Me.treeListView1.FlatNodes
CreateSubItems(node, node.FlatIndex.ToString())' When you use individual styles for an node
' the StyleFromParent needs to be set to False
node.StyleFromParent = False
If node.FlatIndex Mod 2 = 0 Thennode.NormalStyle = evenNodeStyle
Elsenode.NormalStyle = oddNodeStyle
End IfNext' Update the control
Me.treeListView1.UpdateLayout()
End Sub
Private Sub CreateSubItems(ByVal parentNode As TreeListViewNode, ByVal sufix As
String)' Create subitems for specified node
Dim subItem As TreeListViewSubItem = Nothing
For j As Integer = 0 To Me.treeListView1.Columns.Count - 1
subItem = New TreeListViewSubItem(("Item " & sufix) + j.ToString())
parentNode.SubItems.Add(subItem)
Next
End Sub[C#]using LidorSystems.IntegralUI.Lists;

20

using LidorSystems.IntegralUI.Lists.Style;. . .
private void ApplyAlternateLook(){// Create the even color style
ListItemColorStyle evenNodeStyle = new ListItemColorStyle();evenNodeStyle.BackColor = Color.WhiteSmoke;
evenNodeStyle.FillStyle = FillStyle.Horizontal;// Create the odd color style
ListItemColorStyle oddNodeStyle = new ListItemColorStyle();oddNodeStyle.BackColor = Color.Gainsboro;
oddNodeStyle.FillStyle = FillStyle.Horizontal;// Cycle through all nodes and apply style changes
foreach (LidorSystems.IntegralUI.Lists.TreeListViewNode node inthis.treeListView1.FlatNodes){
CreateSubItems(node, node.FlatIndex.ToString());}}// When you use individual styles for an node// the StyleFromParent needs to be set to False
node.StyleFromParent = false;
if (node.FlatIndex % 2 == 0)
node.NormalStyle = evenNodeStyle;else
node.NormalStyle = oddNodeStyle;// Update the control
this.treeListView1.UpdateLayout();

private void CreateSubItems(TreeListViewNode parentNode, string sufix){// Create subitems for specified node
TreeListViewSubItem subItem = null;for (int j = 0; j < this.treeListView1.Columns.Count; j++){subItem = new TreeListViewSubItem("Item " + sufix + j.ToString());
parentNode.SubItems.Add(subItem);}}

As you can see from the code we have used the FlatNodes collection to cycle through nodes. Thisis a collection which holds linear structure of TreeListView control, instead hierarchical structure.
Furthermore, the position and level of all nodes are persisted. It is best to use this collection if you
have large set of nodes, and you need to perform some operation like searching. The performanceis great.

21

Style serialization and reuse
If you want to create some predefined color schemes and apply it to the control at specificconditions, one way to do that is by serializing the control layout. You only would need to set thecolor and format styles and then save the layout in external xml file or database. After that, you
only need to load the file which corresponds to the target color scheme.
You can read more on how serialization is done at the end of this document in Serialization
section.

Visual Styles
There are three predefined visual styles:• Classic - Used to render controls in Windows Classic control style• XP - Used to render controls in Windows XP control style• Vista - Used to render controls in Windows Vista control style
By setting the VisualStyle property to some of the above options, different appearance is applied
to the control.

ThemesIf you want controls to adjust to the current theme and color scheme of windows operating
system you need to set UseTheme property value to True. Depending of the current VisualStylea predefined color scheme is used which corresponds to the current operating system color
scheme.

Note For creation of more advanced appearance, you can read in XML encoding section.

22

BehaviorWorking with Columns
Add/Remove operations
The columns displayed in the TreeListView control are stored in Columns property. This is anobject from TreeListViewColumnCollection class, which has several methods and events you can
use to add, remove, clear or make any other operation that will change the collection. Here is alist of methods that you can use:
•
•
•
•
•

Add – adds a new column at the end of the collection
AddRange – add a set of column to the end of the collection
Clear – empties the list
Remove – deletes the column from the collection
RemoveAt – deletes the column that is located at specified location in the collection

Here is an example how to add a new column programmatically to the collection:[VB]
Imports LidorSystems.IntegralUI.Lists. . .
Dim column As New TreeListViewColumn("Header", "Footer")
Me.treeListView1.Columns.Add(column)[C#]using LidorSystems.IntegralUI.Lists;. . .
TreeListViewColumn column = new TreeListViewColumn("Header", "Footer");this.treeListView1.Columns.Add(column);
To insert a column at a specified position in the collection, use the Insert method:[VB]' Adds the node at sixth position in the collection
Me.treeListView1.Columns.Insert(5, column)[C#]// Adds the node at sixth position in the collection
this.treeListView1.Columns.Insert(5, column);
When you add a new column to the TreeListView control, this process is accompanied with two
events:• ColumnAdding – it is fired before column is added and can cancel the add operation• ColumnAdded – it is fired after the column is added
To remove a column from the collection, two methods can be used:[VB]' Removes the column from the collection
Me.treeListView1.Columns.Remove(column)

23

' Removes the column located at the specified location from the collection
Me.treeListView1.Columns.RemoveAt(5)[C#]// Removes the column from the collection
this.treeListView1.Columns.Remove(node);// Removes the column located at the specified location from the collection
this.treeListView1.Columns.RemoveAt(5);If you want to remove all columns, use the Clear method[VB]
Me.treeListView1.Columns.Clear();[C#]
this.treeListView1.Columns.Clear();

How to add existing column collection
If you have some predefined set of columns, and you want this set as a whole to be added to the
TreeListView control, you can use AddRange method:[VB]
Imports LidorSystems.IntegralUI.Lists. . .
Dim columns As TreeListViewColumn() = New TreeListViewColumn(2) {}For i As Integer = 0 To columns.Length - 1
columns(i) = New TreeListViewColumn("Header " & i.ToString(), "Footer " &i.ToString())
Next
Me.treeListView1.Columns.AddRange(columns)[C#]using LidorSystems.IntegralUI.Lists;. . .
TreeListViewColumn[] columns = new TreeListViewColumn[3];for (int i = 0; i < columns.Length; i++)columns[i] = new TreeListViewColumn("Header " + i.ToString(), "Footer " +i.ToString());
this.treeListView1.Columns.AddRange(columns);

How to fix column to the left or right side of the control
There are situations when you need some column(s) to be fixed on left or right side of the
TreeListView control, while other columns remain scrollable. In this way the data in fixed columns
will always remain visible, while scrolling the remaining area.

24

By default columns are not fixed to either control side. There are three values for Fixed property
from which you can choose how the column is fixed: None, Left and Right. In the code below the
first column is fixed to the control left side
[VB]
column.Fixed = LidorSystems.IntegralUI.Lists.ColumnFixedType.Left[C#]
column.Fixed = LidorSystems.IntegralUI.Lists.ColumnFixedType.Left;
How to fix the column width
In some cases you don’t want to allow to the end users to change the column width. This can bedone by setting the FixedWidth property to True. However, at first the column width needs to beset.
In the code below the first column has width fixed to 100 pixels[VB]
column.Width = 100
column.FixedWidth = True
[C#]column.Width = 100;column.FixedWidth = true;
Different types of column content
In general columns contain text in their corresponding subitems. The type of data which column
will present is determined with ContentType property. There are five different values from which
you can choose:

•
•
•
•
•
•
•
•
•
•
•

CheckBox – the column will shown a built-in CheckBox control
ComboBox – the column will shown a built-in ComboBox control
Control – the column will shown a custom control
Custom – a custom layout created with XML tags can be shown
DateTime – the column will shown a built-in DateTimePicker control
Image – the column will shown an image
NumericUpDown – the column will shown a built-in NumericUpDown control
ProgressBar – the column will shown a built-in ProgressBar control
RatingControl – the column will shown a built-in RatingControl
Text – default, the column will shown a label
TextControl – the column will shown a built-in TextControl

Depending of this property value, the subitem which belongs to the specified column shows the
specific data in its space. If there is no data which can be converted to specified type, or there isno subitem which corresponds to the column, nothing is shown.
In the following examples we will show you how to create columns with different content types. At
first we need to fill the TreeListView control with some columns, nodes and subitems:

25

[VB]
Imports LidorSystems.IntegralUI.Lists. . .
Private Sub InitList(ByVal sender As Object, ByVal e As EventArgs)' Create three columns with header and footer description
Dim column As TreeListViewColumn = Nothing
For j As Integer = 0 To 1
column = New TreeListViewColumn("Header " & j.ToString(), "Footer " &j.ToString())
Me.treeListView1.Columns.Add(column)
Next' Reset the node counter
nodeIndex = 0' Create root nodes
Dim node As TreeListViewNode = Nothing
For i As Integer = 0 To 2
node = New TreeListViewNode("Node " & i.ToString())
nodeIndex += 1
' Create subitems for this nodeCreateSubItems(node, i.ToString())' Create child nodes for this nodeCreateSubNodes(node, 0, i.ToString())
Me.treeListView1.Nodes.Add(node)
Next
Me.treeListView1.UpdateLayout()
End Sub
Private Sub CreateSubItems(ByVal parentNode As TreeListViewNode, ByVal sufix As
String)' Create subitems for specified node
Dim subItem As TreeListViewSubItem = Nothing
For j As Integer = 0 To Me.treeListView1.Columns.Count - 1
subItem = New TreeListViewSubItem()
Select Case Me.treeListView1.Columns(j).ContentType
Case Else
subItem.Text = ("Item " & sufix) + j.ToString()
Exit SelectEnd SelectparentNode.SubItems.Add(subItem)
Next
End Sub
Private Sub CreateSubNodes(ByVal parentNode As TreeListViewNode, ByVal level As
Integer, ByVal sufix As String)' In this example only two levels in hierarchy are allowed
If level = 2 Then
Exit SubElse

26

' Create child nodes for specified node
Dim node As TreeListViewNode = Nothing
For i As Integer = 0 To 1
node = New TreeListViewNode(("Node " & sufix) + i.ToString())
nodeIndex += 1
' Create subitems for this nodeCreateSubItems(node, sufix + i.ToString())' Create child nodes for this nodeCreateSubNodes(node, level + 1, sufix + i.ToString())
parentNode.Nodes.Add(node)
Next
End IfEnd Sub[C#]using LidorSystems.IntegralUI.Lists;. . .
private void InitList(object sender, EventArgs e){// Create two columns with header and footer description
TreeListViewColumn column = null;for (int j = 0; j < 2; j++){column = new TreeListViewColumn("Header " + j.ToString(), "Footer " +j.ToString());
this.treeListView1.Columns.Add(column);}// Reset the node counter
nodeIndex = 0;// Create root nodes
TreeListViewNode node = null;for (int i = 0; i < 3; i++){node = new TreeListViewNode("Node " + i.ToString());
nodeIndex++;// Create subitems for this nodeCreateSubItems(node, i.ToString());// Create child nodes for this nodeCreateSubNodes(node, 0, i.ToString());}

this.treeListView1.Nodes.Add(node);

this.treeListView1.UpdateLayout();}
private void CreateSubItems(TreeListViewNode parentNode,string sufix){// Create subitems for specified node27

TreeListViewSubItem subItem = null;for (int j = 0; j < this.treeListView1.Columns.Count; j++){subItem = new TreeListViewSubItem();switch (this.treeListView1.Columns[j].ContentType){default:
subItem.Text = "Item " + sufix + j.ToString();
break;}}

parentNode.SubItems.Add(subItem);}
private void CreateSubNodes(TreeListViewNode parentNode, int level, string sufix){// In this example only two levels in hierarchy are allowed
if (level == 2)
return;else{// Create child nodes for specified node
TreeListViewNode node = null;for (int i = 0; i < 2; i++){node = new TreeListViewNode("Node " + sufix + i.ToString());
nodeIndex++;// Create subitems for this nodeCreateSubItems(node, sufix + i.ToString());// Create child nodes for this nodeCreateSubNodes(node, level + 1, sufix + i.ToString());}}

parentNode.Nodes.Add(node);}

The above code will create two columns with several nodes and two subitems in each node. Alldata in column will be labels.
How to show custom images in column
By changing a little bit above code sample, we will set the second column to show images. Thechanges are marked in Red:
[VB]
Private Sub InitList(ByVal sender As Object, ByVal e As EventArgs)' Create three columns with header and footer description
Dim column As TreeListViewColumn = Nothing
For j As Integer = 0 To 1
column = New TreeListViewColumn("Header " & j.ToString(), "Footer " &j.ToString())

28

Select Case j' Set the second column to show custom controls
Case 1column.ContentType = ColumnContentType.Image
Exit Select' Make a first column a little wider
Case Elsecolumn.Width = 100
Exit SelectEnd SelectMe.treeListView1.Columns.Add(column)
Next
. . .
End Sub
Private Sub CreateSubItems(ByVal parentNode As TreeListViewNode, ByVal sufix As
String)' Create subitems for specified node
Dim subItem As TreeListViewSubItem = Nothing
For j As Integer = 0 To Me.treeListView1.Columns.Count - 1
subItem = New TreeListViewSubItem()
Select Case Me.treeListView1.Columns(j).ContentType
Case ColumnContentType.Image
subItem.Image = imgCountries.Images(nodeIndex Mod 9)
Exit SelectCase Else
subItem.Text = ("Item " & sufix) + j.ToString()
Exit SelectEnd Select. . .
End Sub[C#]
private void InitList(object sender, EventArgs e){// Create two columns with header and footer description
TreeListViewColumn column = null;for (int j = 0; j < 2; j++){column = new TreeListViewColumn("Header " + j.ToString(), "Footer " +j.ToString());
switch (j){// Set the second column to show images
case 1:column.ContentType = ColumnContentType.Image;break;// Make a first column a little wider
default:29

column.Width = 100;
break;}}

this.treeListView1.Columns.Add(column);. . .
}private void CreateSubItems(TreeListViewNode parentNode,string sufix){// Create subitems for specified node
TreeListViewSubItem subItem = null;for (int j = 0; j < this.treeListView1.Columns.Count; j++){subItem = new TreeListViewSubItem();switch (this.treeListView1.Columns[j].ContentType){case ColumnContentType.Image:
subItem.Image = imgCountries.Images[nodeIndex % 9];
break;}

default:
subItem.Text = "Item " + sufix + j.ToString();
break;. . .
}For images we are using an ImageList which contains a set of 9 images. Because of this you will
notice that we use the following code line:[VB]
subItem.Image = imgCountries.Images(nodeIndex Mod 9)[C#]
subItem.Image = imgCountries.Images[nodeIndex % 9];
The result is:30

How to show custom control in column
IntegralUI TreeListView control has a unique feature that allows any custom control to be inserted
in every column, node or subitem. We will show you how a ProgressBar control can be included ineach subitem which corresponds to the second column. The changes are marked in Red:
[VB]
Private Sub InitList(ByVal sender As Object, ByVal e As EventArgs)' Create three columns with header and footer description
Dim column As TreeListViewColumn = Nothing
For j As Integer = 0 To 2
column = New TreeListViewColumn("Header " & j.ToString(), "Footer " &j.ToString())
Select Case j' Set the second column to show custom controls
Case 1column.ContentType = ColumnContentType.Image
Exit Select' Set the second column to show custom controls
Case 2column.ContentType = ColumnContentType.Control
column.ContentControlVisibility =ContentControlVisibility.AlwaysVisible
Exit SelectCase Else' Make a first column a little wider
column.Width = 100
Exit SelectEnd SelectMe.treeListView1.Columns.Add(column)
Next
. . .

31

End Sub
Private Sub CreateSubItems(ByVal parentNode As TreeListViewNode, ByVal sufix As
String)' Create subitems for specified node
Dim subItem As TreeListViewSubItem = Nothing
For j As Integer = 0 To Me.treeListView1.Columns.Count - 1
subItem = New TreeListViewSubItem()
Select Case Me.treeListView1.Columns(j).ContentType
Case ColumnContentType.Image
subItem.Image = imgCountries.Images(nodeIndex Mod 9)
Exit SelectCase ColumnContentType.Control
Dim pBar As New ProgressBar()
pBar.Size = New Size(100, 16)
progressValue = RandomValue(progressValue)
pBar.Value = progressValue
subItem.Control = pBar
Exit SelectCase Else
subItem.Text = ("Item " & sufix) + j.ToString()
Exit SelectEnd Select. . .
End Sub
Private Function RandomValue(ByVal value As Integer) As Integer
Dim gen As New Random()
Dim range As Integer = (100 - value)
Return gen.[Next](range)
End Function

32

[C#]
private void InitList(object sender, EventArgs e){// Create two columns with header and footer description
TreeListViewColumn column = null;for (int j = 0; j < 3; j++){column = new TreeListViewColumn("Header " + j.ToString(), "Footer " +j.ToString());
switch (j){// Set the second column to show custom controls
case 1:column.ContentType = ColumnContentType.Image;break;// Set the second column to show custom controls
case 2:column.ContentType = ColumnContentType.Control;
column.ContentControlVisibility =ContentControlVisibility.AlwaysVisible;
break;// Make a first column a little wider
default:
column.Width = 100;
break;}}

this.treeListView1.Columns.Add(column);. . .
}private void CreateSubItems(TreeListViewNode parentNode,string sufix){// Create subitems for specified node
TreeListViewSubItem subItem = null;for (int j = 0; j < this.treeListView1.Columns.Count; j++){subItem = new TreeListViewSubItem();switch (this.treeListView1.Columns[j].ContentType){case ColumnContentType.Image:
subItem.Image = imgCountries.Images[nodeIndex % 9];
break;
case ColumnContentType.Control:
ProgressBar pBar = new ProgressBar();pBar.Size = new Size(100, 16);
progressValue = RandomValue(progressValue);
pBar.Value = progressValue;
subItem.Control = pBar;
break;
default:

33

subItem.Text = "Item " + sufix + j.ToString();
break;}}. . .

private int RandomValue(int value){Random gen = new Random();
int range = (100 - value);
return gen.Next(range);}

Also, it is important to menton that when ContentType is set to Control, the visibility of the control
is determined by another property, ContentControlVisibility. There are four ways to show thecontrol:••••

None – the control is not visible
OnClick – the control will become visible when the subitem is clicked
OnHover – the control will become visible when mouse hovers over subitem
AlwaysVisible – the control is visible
How to show custom objects in column
In many cases it’s not enough to show only a single object in column. There are scenarios where
you need to place different objects like text, images, hyperlinks, controls etc. and arrange then incustom layouts.

34

We will show you how by using XML tags various objects can be placed in every subitem which
belongs to a column with specified custom content. For this example we are going to use image,
hyperlink and checkbox.
[VB]
Private Sub button3_Click(ByVal sender As Object, ByVal e As EventArgs)' Create three columns with header and footer description
Dim column As TreeListViewColumn = Nothing
For j As Integer = 0 To 3
column = New TreeListViewColumn("Header " & j.ToString(), "Footer " &j.ToString())
Select Case j' Set the second column to show custom controls
Case 1column.ContentType = ColumnContentType.Image
Exit Select' Set the third column to show custom controls
Case 2column.ContentType = ColumnContentType.Control
column.ContentControlVisibility =ContentControlVisibility.AlwaysVisible
Exit Select' Set the fourth column to show custom objects
Case 3column.ContentType = ColumnContentType.[Custom]
column.Width = 120
Exit SelectCase Else' Make a first column a little wider
column.Width = 100
Exit SelectEnd SelectMe.treeListView1.Columns.Add(column)
Next
. . .
End Sub
Private Sub CreateSubItems(ByVal parentNode As TreeListViewNode, ByVal sufix As
String)' Create subitems for specified node
Dim subItem As TreeListViewSubItem = Nothing
For j As Integer = 0 To Me.treeListView1.Columns.Count - 1
subItem = New TreeListViewSubItem()
Select Case Me.treeListView1.Columns(j).ContentType
Case ColumnContentType.Image
subItem.Image = imgCountries.Images(nodeIndex Mod 9)
Exit SelectCase ColumnContentType.Control
Dim pBar As New ProgressBar()
pBar.Size = New Size(100, 16)35

progressValue = RandomValue(progressValue)
pBar.Value = progressValue
subItem.Control = pBar
Exit SelectCase ColumnContentType.[Custom]' Create and add a checkbox to the subitem
Dim cBox As New CheckBox()
cBox.Size = New Size(13, 13)
If nodeIndex Mod 3 = 1 Then
cBox.Checked = True
End IfsubItem.Controls.Add(cBox)' Set the image index
Dim imgIndex As Integer = nodeIndex Mod 9' Create a custom content
Dim content As String = "<div><table width=""100%""><tr>"content += "<td width=""100%""><img index=""" & imgIndex.ToString() &"""></img><a href=""www.lidorsystems.com"">More info</a></td>"
content += "<td style=""align:middleleft""><control
index=""0""></control></td>"
content += "</tr></table></div>"' Add the created content to the subitem
subItem.Content = content
Exit SelectCase Else
subItem.Text = ("Item " & sufix) + j.ToString()
Exit SelectEnd Select. . .
End Sub

36

[C#]private void InitList(object sender, EventArgs e){// Create two columns with header and footer description
TreeListViewColumn column = null;for (int j = 0; j < 4; j++){column = new TreeListViewColumn("Header " + j.ToString(), "Footer " +j.ToString());
switch (j){// Set the second column to show custom controls
case 1:column.ContentType = ColumnContentType.Image;break;// Set the third column to show custom controls
case 2:column.ContentType = ColumnContentType.Control;
column.ContentControlVisibility =ContentControlVisibility.AlwaysVisible;
break;// Set the fourth column to show custom objects
case 3:column.ContentType = ColumnContentType.Custom;
column.Width = 120;
break;// Make a first column a little wider
default:
column.Width = 100;
break;}}

this.treeListView1.Columns.Add(column);. . .
}private void CreateSubItems(TreeListViewNode parentNode,string sufix){// Create subitems for specified node
TreeListViewSubItem subItem = null;for (int j = 0; j < this.treeListView1.Columns.Count; j++){subItem = new TreeListViewSubItem();switch (this.treeListView1.Columns[j].ContentType){case ColumnContentType.Image:
subItem.Image = imgCountries.Images[nodeIndex % 9];
break;
case ColumnContentType.Control:
ProgressBar pBar = new ProgressBar();pBar.Size = new Size(100, 16);37

progressValue = RandomValue(progressValue);
pBar.Value = progressValue;
subItem.Control = pBar;
break;
case ColumnContentType.Custom:// Create and add a checkbox to the subitem
CheckBox cBox = new CheckBox();cBox.Size = new Size(13, 13);
if (nodeIndex % 3 == 1)
cBox.Checked = true;
subItem.Controls.Add(cBox);// Set the image index
int imgIndex = nodeIndex % 9;// Create a custom content
String content = "<div><table width=\"100%\"><tr>";content += "<td width=\"100%\"><img index=\"" + imgIndex.ToString() +"\"></img><a href=\"www.lidorsystems.com\">More info</a></td>";
content += "<td style=\"align:middleleft\"><control
index=\"0\"></control></td>";
content += "</tr></table></div>";// Add the created content to the subitem
subItem.Content = content;
break;
default:
subItem.Text = "Item " + sufix + j.ToString();
break;}}. . .

To display the images in subitems we have used an ImageList component added to the
TreeListView.ImageList property. The result is:38

Working with Nodes
Add/Remove operations
The nodes displayed in the TreeListView control are stored in Nodes property. This is an object
from TreeListViewNodeCollection class, which has several methods and events you can use to add,
remove, clear or make any other operation that will change the collection. Here is a list of
methods that you can use:
•
•
•
•
•

Add – adds a new node at the end of the collection
AddRange – add a set of nodes to the end of the collection
Clear – empties the list
Remove – deletes the node from the collection
RemoveAt – deletes the node that is located at specified location in the collection

Here is an example how to add a new node programmatically to the collection:[VB]
Dim node As New TreeListViewNode(“New node”)
Me.treeListView1.Node.Add(node)[C#]
TreeListViewNode node = new TreeListViewNode("New node");this.treeListView1.Nodes.Add(node);
To insert this node at a specified position in the collection, use the Insert method:[VB]' Adds the node at sixth position in the collection
Me.treeListView1.Nodes.Insert(5, node)[C#]// Adds the node at sixth position in the collection
this.treeListView1.Nodes.Insert(5, node);
When you add a new node to the TreeListView control, this process is accompanied with two
events:• NodeAdding – it is fired before node is added and can be cancel the add operation• NodeAdded – it is fired after the node is added
To remove a node from the collection, two methods can be used:[VB]' Removes the node from the collection
Me.treeListView1.Nodes.Remove(node)' Removes the node located at the specified location from the collection
Me.treeListView1.Nodes.RemoveAt(5)[C#]// Removes the node from the collection
this.treeListView1.Nodes.Remove(node);// Removes the node located at the specified location from the collection
this.treeListView1.Nodes.RemoveAt(5);If you wan to remove all nodes, use the Clear method

39

[VB]
Me.treeListView1.Nodes.Clear();[C#]
this.treeListView1.Nodes.Clear();

How to add existing node collection
If you want some predefined set of nodes, and you want this set as a whole to be added to the
TreeListView control, you can use AddRange method:[VB]
Imports LidorSystems.IntegralUI.Lists. . .
Dim nodes As TreeListViewNode() = New Node(6) {}For i As Integer = 0 To 6
nodes(i) = New TreeListViewNode("Item " & i.ToString())
Next
Me.treeListView1.Nodes.AddRange(nodes)[C#]using LidorSystems.IntegralUI.Lists;. . .
TreeListViewNode[] nodes = new TreeListViewNode[7];for (int i = 0; i < 7; i++)nodes[i] = new TreeListViewNode("Item " + i.ToString());
this.treeListView1.Nodes.AddRange(nodes);How to edit the node text
During runtime you can allow to users to edit the node text and change it. This can be done bysetting the LabelEdit property to True. After that whenever the user clicks on the node andreleases the mouse button, a TextBox will appear in which the node text can be edited.
If you want to start editing process in other way, you need to use BeginEdit and EndEdit
methods. In the following example we will show how to programmatically start editing process:[VB]
If Me.TreeListView1.SelectedNode IsNot Nothing Then
Me.TreeListView1.LabelEdit = True
Me.TreeListView1.SelectedNode.BeginEdit()
End If[C#]if (this.treeListView1.SelectedNode != null){this.treeListView1.LabelEdit = true;
this.treeListView1.SelectedNode.BeginEdit();40}The edit process is accompanied by two events:••

BeforeLabelEdit – it is fired before the TextEditor is shown and editing beggins
AfterLabelEdit – it is fired when TextEditor closes and just before the new text is
applied to the node Text property

In order to cancel the current edit process, you can simply press the ESC key or by handle theAfterLabelEdit event. In the following example the edit is allowed only for labels which don’t
contain some characters:[VB]
Imports LidorSystems.IntegralUI.Lists. . .
Private Sub treeListView1_AfterLabelEdit(ByVal sender As Object, ByVal e As
LidorSystems.IntegralUI.ObjectEditEventArgs)
If TypeOf e.[Object] Is TreeListViewNode Then
Dim node As TreeListViewNode = DirectCast(e.[Object], TreeListViewNode)If e.Label IsNot Nothing Then
If e.Label.Length > 0 Then
If e.Label.IndexOfAny(New Char() {"@"c, "."c, ","c, "!"c}) >= 0 Then
' Cancel the label edit action, inform the user, and' place the node in edit mode again.
e.Cancel = True
MessageBox.Show("Invalid node label." & vbLf & "The invalidcharacters are: '@','.', ',', '!'", "Node Label Edit")node.BeginEdit()
End IfElse' Cancel the label edit action, inform the user, and' place the node in edit mode again.
e.Cancel = True
MessageBox.Show("Invalid node label." & vbLf & "The label cannot beblank", "Node Label Edit")node.BeginEdit()
End IfEnd IfEnd IfEnd Sub[C#]using LidorSystems.IntegralUI.Lists;. . .
private void treeListView1_AfterLabelEdit(object sender,
LidorSystems.IntegralUI.ObjectEditEventArgs e){
if (e.Object is TreeListViewNode){
TreeListViewNode node = (TreeListViewNode)e.Object;41

if (e.Label != null){
if (e.Label.Length > 0){if (e.Label.IndexOfAny(new char[] { '@', '.', ',', '!' }) >= 0){// Cancel the label edit action, inform the user, and// place the node in edit mode again.
e.Cancel = true;
MessageBox.Show("Invalid node label.\n" + "The invalidcharacters are: '@','.', ',', '!'", "Node Label Edit");node.BeginEdit();
}
}
else
{
// Cancel the label edit action, inform the user, and// place the node in edit mode again.
e.Cancel = true;
MessageBox.Show("Invalid node label.\nThe label cannot be blank","Node Label Edit");node.BeginEdit();}}}}Checked nodes
In order to display checkboxes to the nodes, the CheckBoxes property of the TreeListView
control must be set to True. Every node has a check box shown to the left side of the node space.
Their visibility is controlled by CheckBoxVisible property. In this way, you can decide which nodes
will have checkbox. This is useful for example when you want some node to behave like a header
for other nodes.
The check box can display two or three state values. By default the two-state (checked andunchecked) behavior is active. If you want to have three-state behavior, at first you need to set
the CheckMode to ThreeState value. Whenever user clicks inside the check box space, it will
cycle the state of the check box through Unchecked, Indeterminate and Checked values.
In some cases you will also want to change the check box state by node selection. In order to dothat, set the AllowSelectionCheck property to True.
The set of checked nodes (only those with CheckState set to Checked) is stored in
CheckedItems collection. This collection is very useful when you want to examine only nodes
that are currently checked.

How to preserve checked nodes

42

In some cases you may want to preserve the collection of checked nodes unchanged. For
example, there may be custom operation which will indirectly change the CheckState of thenodes, and in this way the CheckedItems collection. In order to prevent this from happening, wehave added a PreserveCheckState property. With it you can preserve the current collection, run
your custom operation without side effects, and then set back this property to its original value.
For example:[VB]
Private Sub button1_Click(ByVal sender As Object, ByVal e As EventArgs)
Me.treeListView1.PreserveCheckState = True
Me.treeListView1.SelectedNode = Me.treeListView1.Nodes(1)Me.treeListView1.PreserveCheckState = False
End Sub
Private Sub treeListView1_AfterSelect(ByVal sender As Object, ByVal e As
LidorSystems.IntegralUI.ObjectEventArgs)
If TypeOf e.[Object] Is LidorSystems.IntegralUI.Lists.TreeListViewNode Then
Dim node As LidorSystems.IntegralUI.Lists.TreeListViewNode = DirectCast(e.
[Object], LidorSystems.IntegralUI.Lists.TreeListViewNode)
Me.treeListView1.CheckedNodes.Clear()node.Checked = True
End IfEnd Sub[C#]
private void button1_Click(object sender, EventArgs e){
this.treeListView1.PreserveCheckState = true;
this.treeListView1.SelectedNode = this.treeListView1.Nodes[1];this.treeListView1.PreserveCheckState = false;}
private void treeListView1_AfterSelect(object sender,
LidorSystems.IntegralUI.ObjectEventArgs e){
if (e.Object is LidorSystems.IntegralUI.Lists.TreeListViewNode){
LidorSystems.IntegralUI.Lists.TreeListViewNode node =(LidorSystems.IntegralUI.Lists.TreeListViewNode)e.Object;this.treeListView1.CheckedNodes.Clear();node.Checked = true;}}

In this example we have a TreeListView with some nodes in it. Whenever a button is clicked thesecond node is selected and checked. But along with this by calling the Clear method, we try to
remove all checked nodes from CheckedNodes collection. Because we have set
PreserveCheckState to True, this collection will remain intact.

43

Selected nodes
Multiple selection
The control supports four different modes for node selection. They are controlled from theSelectionMode property, which can have following values:

•
•
•
•

None – there is no selection
One – only one node can be selected
MultiSimple – selection is performed with single mouse click
MultiExtended – selection is perfomed with use of CTRL or SHIFT keys

In order to have multiple node selection, the SelectionMode must be set either to MultiSimple orMultiExtended value.
Whenever there is a selection, nodes that are currently selected are stored in SelectedNodes
collection. This collection is very useful when you want to examine only nodes that are currently
selected.
Hover selection
In some cases you may want to allow nodes to be selected while mouse cursor hovers over them.
This functionality is built-in the code, and in order to allow it, just set the HoverSelection
property to True.
How to preserve selection
In some cases you may want to preserve the collection of selected nodes unchanged. For
example, there may be custom operation which will indirectly change the Selected state of thenode, and in this way the SelectedNodes collection. In order to prevent this from happening, wehave added a PreserveSelection property. With it you can preserve the current collection, run
your custom operation without side effects, and then set back this property to its original value.
For example:[VB]
Private Sub button1_Click(ByVal sender As Object, ByVal e As EventArgs)
Me.treeListView1.PreserveSelection = True
Me.treeListView1.SelectedNodes.Clear()Me.treeListView1.SelectedNode = Me.treeListView1.Nodes(1)Me.treeListView1.PreserveSelection = False
End Sub[C#]
private void button1_Click(object sender, EventArgs e){
this.treeListView1.PreserveSelection = true;
this.treeListView1.SelectedNodes.Clear();this.treeListView1.SelectedNode = this.treeListView1.Nodes[1];this.treeListView1.PreserveSelection = false;}
In this example we have a TreeListView with some nodes in it. Whenever a button is clicked thesecond node is selected. But along with this by calling the Clear method, we try to remove all44

selected nodes from SelectedNodes collection. Because we have set PreserveSelection to True,
this collection will remain intact. This only works in multiple selection mode.

Working with SubItems
Add/Remove operations
Every node contains a set of subitems. They are used to show a row of data in columns. Each
subitem is linked with the column at which it will be presented. If you reorder columns, thenautomatically subitems are reordered in the node.
Here is a list of methods that you can use with collection of subitems:
•
•
•
•
•

Add – adds a new subitem at the end of the collection
AddRange – add a set of subitems to the end of the collection
Clear – empties the list
Remove – deletes the subitem from the collection
RemoveAt – deletes the subitem that is located at specified location in the collection

Here is an example how to add a new subitem programmatically to the collection:[VB]
Dim subitem As New TreeListViewSubItem(“New subitem”)
node.SubItems.Add(subitem)[C#]
TreeListViewSubItem subitem = new TreeListViewSubItem("New subitem");node.SubItems.Add(subitem);
To insert this subitem at a specified position in the collection, use the Insert method:[VB]' Adds the subitem at third position in the collection
node.SubItems.Insert(2, subitem)[C#]// Adds the subitem at third position in the collection
node.SubItems.Insert(2, subitem);
To remove a subitem from the collection, two methods can be used:[VB]' Removes the subitem from the collection
node.SubItems.Remove(subitem)' Removes the subitem located at the specified location from the collection
node.SubItems.RemoveAt(2)[C#]// Removes the subitem from the collection
node.SubItems.Remove(subitem);// Removes the subitem located at the specified location from the collection
node.SubItems.RemoveAt(2);45If you wan to remove all subitems, use the Clear method[VB]
node.SubItems.Clear();[C#]
node.SubItems.Clear();Standard selection
By default selection is only applied to nodes as a whole. In order to have a precific subitem
selected, at first the AllowSubItemSelection needs to be set to True. This will allow specificsubitem to be selected when you click in their space.
All selected subitems are stored in SelectedSubItems collection. This collection can be used if you
to search only through selected subitems, regardless at which node belongs. As with nodes, there
is also a property SelectedSubItem which holds the current selected subitem.
Frame selection
Subitems can also be selected by creating a frame arround them. Every subitem which has hisbounds contained as part or as a whole in the created frame region, will be automatically selected
at the end of the operation. In order to allow this operation to start, the AllowFrameSelection
property needs to be set to True. The frame selection is also dependent on the
AllowSubItemSelection property. There is no reason to start this operation if this property is set to
False.
Here is a picture which shows this:Start of a frame selection

End of a frame selection

Drag&Drop operations
The IntegralUI TreeListView control has built-in support for standard drag&drop operations like:drag and drop of single node, copy/move the node/s from one TreeListView to other controls etc.
In the following sections we will give you information on how you can use various permissions
during drag&drop operations, and how to extend this by creating your own custom operation.

46

Use of permissions
Here is a brief description on various properties that are used during drag&drop:

•
•
•
•
•

AllowDrag – Gives permission to node/s to be dragged
AllowDrop – Gives permission to the control to accept node/s during drag&drop
DragDropMode – Determines the type of drag&drop operation
DragDropReorder – Determines whether a reordering of nodes is allowed during
drag&drop
ShowDropMarker – Determines whether the marker is shown that represents the current
drop position

By default drag&drop is disabled. In order to start dragging of node/s, the AllowDrag property
must be set to True. However, in order for dragged nodes to be dropped, the AllowDrop
property must also be set to True. We have deliberately separated the control over drag&drop
operation in two states, because in some cases you may want to have one TreeListView control
from which nodes can only be dragged, and other TreeListView control to which nodes can only be
dropped.
By default there is a predefined drag&drop operation which handles all of standard cases. In orderto create your own operation, the DragDropMode must be set to Custom. This case is describedin detail in the next section.
If you don’t want to appear the drop marker during drag&drop, the best is to disable it from the
ShowDropMarker property. In other case, this marker will be shown. You can change the colorof this marker from the ColorStyle of the TreeListView, by changing the NodePosColor property.
How to create a custom drag&drop operation
If the default drag&drop operaton doesn’t give you the solution you want, you can always create
your own custom operation.
In order to do that, you need to do the following:
1. At first, you need to set the DragDropMode to Custom
2. Handle the ItemDrag event and start the drag&drop operation
3. Handle the DragOver and DragDrop events
4. Optionally, handle other drag&drop events, like: DragEnter, DragLeave,
QueryContinueDrag, etc.
Here is some code that you can use:
[VB]
Imports LidorSystems.IntegralUI.Collections
Imports LidorSystems.IntegralUI.Lists
Imports LidorSystems.IntegralUI.Lists.Collections. . .
Private Sub treeListView1_ItemDrag(ByVal sender As Object, ByVal e As
ItemDragEventArgs)
If e.Button = MouseButtons.Left Then
Me.treeListView1.DoDragDrop(e.Item, DragDropEffects.All)
End IfEnd Sub

47

Private Sub treeListView1_DragOver(ByVal sender As Object, ByVal e As
DragEventArgs)
If e.Data.GetDataPresent(GetType(TreeListViewItem)) Then
' Depending od the control key pressed change the drag effectIf (e.KeyState And 8) = 8 AndAlso (e.AllowedEffect And DragDropEffects.Copy)= DragDropEffects.Copy Thene.Effect = DragDropEffects.Copy
Else
e.Effect = DragDropEffects.Move
End IfElse
e.Effect = DragDropEffects.None
End IfEnd Sub
Private Sub treeListView1_DragDrop(ByVal sender As Object, ByVal e As
DragEventArgs)' Get the current mouse position
Dim mousePos As Point = Me.treeListView1.PointToClient(New Point(e.X, e.Y))
If
e.Data.GetDataPresent(GetType(LidorSystems.IntegralUI.Lists.TreeListViewNode))
Then' Get the dragged node
Dim node As LidorSystems.IntegralUI.Lists.TreeListViewNode =DirectCast(e.Data.GetData(GetType(LidorSystems.IntegralUI.Lists.TreeListViewNode)), LidorSystems.IntegralUI.Lists.TreeListViewNode)' Get the target node (the one that is currently hovered)
Dim targetNode As LidorSystems.IntegralUI.Lists.TreeListViewNode =Me.treeListView1.GetNodeAt(mousePos)' Suspend the treelistview layout to increase performance
Me.treeListView1.SuspendUpdate()' In Copy operation, create a clone node and then add it to the target
If e.Effect = DragDropEffects.Copy Thennode = DirectCast(node.Clone(),LidorSystems.IntegralUI.Lists.TreeListViewNode)
Else' Remove the node from its current parent node collection
node.Remove()
End If' If there is no target node, then add the dragged node at the end
If targetNode Is Nothing Then
Me.treeListView1.Nodes.Add(node)Else' Get the index of the dropped node in target TreeListView control
Dim newIndex As Integer = Me.treeListView1.GetDropPos(targetNode,mousePos)
If newIndex >= 0 Then
If targetNode.Parent IsNot Nothing ThentargetNode.Parent.Nodes.Insert(newIndex, node)
Else
Me.treeListView1.Nodes.Insert(newIndex, node)
End IfElse

48

targetNode.Nodes.Add(node)
End IfEnd If' Resume the treelistview layout and update the control
Me.treeListView1.ResumeUpdate()
End IfEnd Sub
Private Sub treeListView1_QueryContinueDrag(ByVal sender As Object, ByVal e As
QueryContinueDragEventArgs)
Dim mousePos As Point = Me.treeListView1.PointToClient(Control.MousePosition)' Cancel the drag operation when the mouse cursor leaves the TreeListView space
If Not Me.treeListView1.ClientRectangle.Contains(mousePos) Thene.Action = DragAction.Cancel
End IfEnd Sub[C#]using LidorSystems.IntegralUI.Collections;using LidorSystems.IntegralUI.Lists;
using LidorSystems.IntegralUI.Lists.Collections;. . .
private void treeListView1_ItemDrag(object sender, ItemDragEventArgs e){
if (e.Button == MouseButtons.Left)
this.treeListView1.DoDragDrop(e.Item, DragDropEffects.All);}
private void treeListView1_DragOver(object sender, DragEventArgs e){
if(e.Data.GetDataPresent(typeof(LidorSystems.IntegralUI.Lists.TreeListViewNode))){// Depending on the control key pressed change the drag effectif ((e.KeyState & 8) == 8 && (e.AllowedEffect & DragDropEffects.Copy) ==DragDropEffects.Copy)
e.Effect = DragDropEffects.Copy;
else
e.Effect = DragDropEffects.Move;}else
e.Effect = DragDropEffects.None;}
private void treeListView1_DragDrop(object sender, DragEventArgs e){// Get the current mouse position
Point mousePos = this.treeListView1.PointToClient(new Point(e.X, e.Y));
if(e.Data.GetDataPresent(typeof(LidorSystems.IntegralUI.Lists.TreeListViewNode))){// Get the dragged node
LidorSystems.IntegralUI.Lists.TreeListViewNode node =(LidorSystems.IntegralUI.Lists.TreeListViewNode)e.Data.GetData(typeof(LidorSystems

49

.IntegralUI.Lists.TreeListViewNode));// Get the target node (the one that is currently hovered)
LidorSystems.IntegralUI.Lists.TreeListViewNode targetNode =this.treeListView1.GetNodeAt(mousePos);// Suspend the treelistview layout to increase performancethis.treeListView1.SuspendUpdate();// In Copy operation, create a clone node and then add it to thetargetif (e.Effect == DragDropEffects.Copy)
node =(LidorSystems.IntegralUI.Lists.TreeListViewNode)node.Clone();// Remove the node from its current parent node collection
else
node.Remove();// If there is no target node, then add the dragged node at theend

if (targetNode == null)this.treeListView1.Nodes.Add(node);else{// Get the index of the dropped node in target TreeListView

control

int newIndex = this.treeListView1.GetDropPos(targetNode,mousePos);}}if (newIndex >= 0){
if (targetNode.Parent != null)targetNode.Parent.Nodes.Insert(newIndex, node);
else
this.treeListView1.Nodes.Insert(newIndex, node);}elsetargetNode.Nodes.Add(node);// Resume the treelistview layout and update the control
this.treeListView1.ResumeUpdate();}private void treeListView1_QueryContinueDrag(object sender,
QueryContinueDragEventArgs e){
Point mousePos = this.treeListView1.PointToClient(Control.MousePosition);// Cancel the drag operation when the mouse cursor leaves the TreeListView
space
if (!this.treeListView1.ClientRectangle.Contains(mousePos))e.Action = DragAction.Cancel;}

50

How to perform drag&drop for collection of nodes
Instead of dragging a single node, you can also make dragging of collection of nodes. In thefollowing example is presented how this can be accomplished for selected nodes:
At first we need to set the SelectionMode to MultiSimple or MultiExtended.
[VB]
Imports LidorSystems.IntegralUI.Lists. . .
Private Sub treeListView1_ItemDrag(ByVal sender As Object, ByVal e As
ItemDragEventArgs)
If e.Button = MouseButtons.Left Then
Dim nodeCollection As New
LidorSystems.IntegralUI.Lists.Collections.TreeListViewNodeCollection()
For Each node As LidorSystems.IntegralUI.Lists.TreeListViewNode In
Me.treeListView1.SelectedNodes
nodeCollection.Add(node)
Next
Me.treeListView1.DoDragDrop(nodeCollection, DragDropEffects.All)
End IfEnd Sub
Private Sub treeListView1_DragOver(ByVal sender As Object, ByVal e As
DragEventArgs)
If
e.Data.GetDataPresent(GetType(LidorSystems.IntegralUI.Lists.Collections.TreeListVi
ewNodeCollection)) Then
' Depending od the control key pressed change the drag effectIf (e.KeyState And 8) = 8 AndAlso (e.AllowedEffect And DragDropEffects.Copy)= DragDropEffects.Copy Thene.Effect = DragDropEffects.Copy
Else
e.Effect = DragDropEffects.Move
End IfElse
e.Effect = DragDropEffects.None
End IfEnd Sub
Private Sub treeListView1_DragDrop(ByVal sender As Object, ByVal e As
DragEventArgs)' Get the current mouse position
Dim mousePos As Point = Me.treeListView1.ContentPanel.PointToClient(NewPoint(e.X, e.Y))
If
e.Data.GetDataPresent(GetType(LidorSystems.IntegralUI.Lists.Collections.TreeListVi
ewNodeCollection)) Then
' Get the dragged node collection
Dim nodeCollection As
LidorSystems.IntegralUI.Lists.Collections.TreeListViewNodeCollection =DirectCast(e.Data.GetData(GetType(LidorSystems.IntegralUI.Lists.Collections.TreeLi
stViewNodeCollection)),LidorSystems.IntegralUI.Lists.Collections.TreeListViewNodeCollection)51

' Get the target node (the one that is currently hovered)
Dim targetNode As LidorSystems.IntegralUI.Lists.TreeListViewNode =Me.treeListView1.GetNodeAt(mousePos)' Suspend the treelistview layout to increase performance
Me.treeListView1.SuspendUpdate()' Get the collection at which nodes will be added
If targetNode Is Nothing Then
' In Copy operation, create a clone node and then add it to the target
If e.Effect = DragDropEffects.Copy ThenFor Each node As LidorSystems.IntegralUI.Lists.TreeListViewNode In
nodeCollection
Me.treeListView1.Nodes.Add(node.Clone())
Next' In Move operation, it's best to use the while cycle, because whenmoving existing node
' it will alter the source node collection which can cause errors.
' The best approach is the code bellow.
ElseIf e.Effect = DragDropEffects.Move ThenFor Each node As LidorSystems.IntegralUI.Lists.TreeListViewNode In
nodeCollection
node.Remove()' Add the node to the TreeListView
Me.treeListView1.Nodes.Add(node)
Next
End IfElse' Get the index of the dropped node in target TreeListView control
Dim newIndex As Integer = Me.treeListView1.GetDropPos(targetNode,mousePos)' In Copy operation, create a clone node and then add it to the target
If e.Effect = DragDropEffects.Copy ThenFor Each node As LidorSystems.IntegralUI.Lists.TreeListViewNode In
nodeCollection
If newIndex >= 0 Then
If targetNode.Parent IsNot Nothing ThentargetNode.Parent.Nodes.Insert(newIndex, node.Clone())
Else
Me.treeListView1.Nodes.Insert(newIndex, node.Clone())
End IfElsetargetNode.Nodes.Add(node.Clone())
End IfNext' In Move operation, it's best to use the while cycle, because whenmoving existing node
' it will alter the source node collection which can cause errors.
' The best approach is the node bellow.
ElseIf e.Effect = DragDropEffects.Move ThenFor Each node As LidorSystems.IntegralUI.Lists.TreeListViewNode In
nodeCollection
node.Remove()' Place the node at correct position
If newIndex >= 0 Then
If targetNode.Parent IsNot Nothing Then52

targetNode.Parent.Nodes.Insert(newIndex, node)
Else
Me.treeListView1.Nodes.Insert(newIndex, node)
End IfElsetargetNode.Nodes.Add(node)
End IfNext
End IfEnd If' Resume the treelistview layout and update the control
Me.treeListView1.ResumeUpdate()
End IfEnd Sub[C#]using LidorSystems.IntegralUI.Lists;. . .
private void treeListView1_ItemDrag(object sender, ItemDragEventArgs e){
if (e.Button == MouseButtons.Left){
LidorSystems.IntegralUI.Lists.Collections.TreeListViewNodeCollection
nodeCollection = newLidorSystems.IntegralUI.Lists.Collections.TreeListViewNodeCollection();foreach (LidorSystems.IntegralUI.Lists.TreeListViewNode node inthis.treeListView1.SelectedNodes)
nodeCollection.Add(node);}

this.treeListView1.DoDragDrop(nodeCollection, DragDropEffects.All);}
private void treeListView1_DragOver(object sender, DragEventArgs e){
if(e.Data.GetDataPresent(typeof(LidorSystems.IntegralUI.Lists.Collections.TreeListVi
ewNodeCollection))){// Depending od the control key pressed change the drag effectif ((e.KeyState & 8) == 8 && (e.AllowedEffect & DragDropEffects.Copy) ==DragDropEffects.Copy)
e.Effect = DragDropEffects.Copy;
else
e.Effect = DragDropEffects.Move;}else
e.Effect = DragDropEffects.None;}
private void treeListView1_DragDrop(object sender, DragEventArgs e){// Get the current mouse position
Point mousePos = this.treeListView1.ContentPanel.PointToClient(new Point(e.X,e.Y));

53

if(e.Data.GetDataPresent(typeof(LidorSystems.IntegralUI.Lists.Collections.TreeListVi
ewNodeCollection))){// Get the dragged node collection
LidorSystems.IntegralUI.Lists.Collections.TreeListViewNodeCollection
nodeCollection =(LidorSystems.IntegralUI.Lists.Collections.TreeListViewNodeCollection)e.Data.GetData(typeof(LidorSystems.IntegralUI.Lists.Collections.TreeListViewNodeCollection));// Get the target node (the one that is currently hovered)
LidorSystems.IntegralUI.Lists.TreeListViewNode targetNode =this.treeListView1.GetNodeAt(mousePos);// Suspend the treelistview layout to increase performancethis.treeListView1.SuspendUpdate();// Get the collection at which nodes will be added
if (targetNode == null){// In Copy operation, create a clone node and then add it to the target
if (e.Effect == DragDropEffects.Copy){
foreach (LidorSystems.IntegralUI.Lists.TreeListViewNode node in
nodeCollection)
this.treeListView1.Nodes.Add(node.Clone());}// In Move operation, it's best to use the while cycle, because whenmoving existing node// it will alter the source node collection which can cause errors.
// The best approach is the code bellow.
else if (e.Effect == DragDropEffects.Move){foreach (LidorSystems.IntegralUI.Lists.TreeListViewNode node in
nodeCollection){
node.Remove();// Add the node to the TreeListView
this.treeListView1.Nodes.Add(node);
}

}

}
else
{
// Get the index of the dropped node in target TreeListView control
int newIndex = this.treeListView1.GetDropPos(targetNode, mousePos);// In Copy operation, create a clone node and then add it to the target
if (e.Effect == DragDropEffects.Copy){
foreach (LidorSystems.IntegralUI.Lists.TreeListViewNode node in
nodeCollection){
if (newIndex >= 0){
if (targetNode.Parent != null)targetNode.Parent.Nodes.Insert(newIndex, node.Clone());
else

54

this.treeListView1.Nodes.Insert(newIndex, node.Clone());}
else
targetNode.Nodes.Add(node.Clone());}}// In Move operation, it's best to use the while cycle, because whenmoving existing node// it will alter the source node collection which can cause errors.
// The best approach is the node bellow.
else if (e.Effect == DragDropEffects.Move){foreach (LidorSystems.IntegralUI.Lists.TreeListViewNode node in
nodeCollection){
node.Remove();}}}// Place the node at correct position
if (newIndex >= 0){
if (targetNode.Parent != null)targetNode.Parent.Nodes.Insert(newIndex, node);
else
this.treeListView1.Nodes.Insert(newIndex, node);}elsetargetNode.Nodes.Add(node);}// Resume the treelistview layout and update the control
this.treeListView1.ResumeUpdate();}How to perform drag&drop of a node to other controls
Other controls can accept nodes during drag&drop operation, if their AllowDrop property is set toTrue. In the following example we will demonstrate how node dragged from the TreeListView
control can be dropped in TextBox control:[VB]
Private Sub textBox1_DragOver(ByVal sender As Object, ByVal e As DragEventArgs)
If
e.Data.GetDataPresent(GetType(LidorSystems.IntegralUI.Lists.TreeListViewNode))
Thene.Effect = DragDropEffects.MoveElse
e.Effect = DragDropEffects.None
End IfEnd Sub
Private Sub textBox1_DragDrop(ByVal sender As Object, ByVal e As DragEventArgs)
If
e.Data.GetDataPresent(GetType(LidorSystems.IntegralUI.Lists.TreeListViewNode))
Then' Get the dragged node55

Dim node As LidorSystems.IntegralUI.Lists.TreeListViewNode =DirectCast(e.Data.GetData(GetType(LidorSystems.IntegralUI.Lists.TreeListViewNode)), LidorSystems.IntegralUI.Lists.TreeListViewNode)' Set the Text property of TextBox control to contain the node text
Me.textBox1.Text = node.Text
End IfEnd Sub[C#]
private void textBox1_DragOver(object sender, DragEventArgs e){
if(e.Data.GetDataPresent(typeof(LidorSystems.IntegralUI.Lists.TreeListViewNode)))e.Effect = DragDropEffects.Move;else
e.Effect = DragDropEffects.None;}
private void textBox1_DragDrop(object sender, DragEventArgs e){
if(e.Data.GetDataPresent(typeof(LidorSystems.IntegralUI.Lists.TreeListViewNode))){// Get the dragged node
LidorSystems.IntegralUI.Lists.TreeListViewNode node =(LidorSystems.IntegralUI.Lists.TreeListViewNode)e.Data.GetData(typeof(LidorSystems.IntegralUI.Lists.TreeListViewNode));}// Set the Text property of TextBox control to contain the node text
this.textBox1.Text = node.Text;}

Sorting
When you have large list of nodes, the best to search through them is if they are sorted. The
TreeListView control supports predefined sorting of nodes based on some predefined types. Also,
you can customize the sorting by creating your own implementation of IComparer interface.
Typically nodes are sorted using the Sorting property, which can have three values: None,
Ascending and Descending. By default, the Sorting property has value None, which means that
automatically sorting of nodes is disabled.
Use of predefined sorting method
When the Sorting property is set to other value then None, automatically sorting is active. So
whenever a new node is added or removed, the list will be sorted. The nodes will be sorted
depending of current value of ComparerObjectType, which can have one of these values:•••

DoubleIntegerStringAdditionally, the sorting will only work for those nodes or subitems that have their SortTag set tosome value. Nodes with their SortTag set to null, will be excluded from sorting.

56

In the following example the nodes will be sorted by their Integer value from the largest to lowest
number:[VB]' At first set the SortTag for each node to some Integer value
For i As Integer = 0 To Me.treeListView1.FlatNodes.Count - 1
Me.treeListView1.FlatNodes(i).SortTag = i
Next' Change the ComparerObjectType to Integer, so the sorting will be used comparing
Integer values
Me.treeListView1.ComparerObjectType =LidorSystems.IntegralUI.Lists.ComparerObjectType.Integer' Arrange nodes and subnodes from largest to lowest number
Me.treeListView1.Sorting = SortOrder.Descending[C#]// At first set the SortTag for each node to some Integer valuefor (int i = 0; i < this.treeListView1.FlatNodes.Count; i++)this.treeListView1.FlatNodes[i].SortTag = i;// Change the ComparerObjectType to Integer, so the sorting will be usedcomparing Integer values
this.treeListView1.ComparerObjectType =LidorSystems.IntegralUI.Lists.ComparerObjectType.Integer;// Arrange nodes and subnodes from largest to lowest number
this.treeListView1.Sorting = SortOrder.Descending;If you want to sort the nodes by specified column, then the corresponding subitems must have set
their SortTag property to specific value. Thouse subitems with their SortTag set to null will be
excluded from sorting. Here is an example where nodes are sorted by clicking on the second
column:[VB]
Imports LidorSystems.IntegralUI.Lists. . .
' Fill the subitems from the second column with data used for sorting
Private Sub InitSortList(ByVal sender As Object, ByVal e As EventArgs)' At first set the SortTag for each subitem in second column to some Integervalue
For i As Integer = 0 To Me.treeListView1.FlatNodes.Count - 1
If Me.treeListView1.FlatNodes(i).SubItems.Count > 1 Then
Me.treeListView1.FlatNodes(i).SubItems(1).SortTag = i
End IfNext' Change the ComparerObjectType to Integer, so the sorting will be usedcomparing Integer values
Me.treeListView1.ComparerObjectType =LidorSystems.IntegralUI.Lists.ComparerObjectType.[Integer]
End Sub' Handle the ColumnClick event to start sort operation

57

Private Sub treeListView1_ColumnClick(ByVal sender As Object, ByVal e As
LidorSystems.IntegralUI.ObjectClickEventArgs)
If TypeOf e.[Object] Is TreeListViewColumn Then
Dim column As TreeListViewColumn = DirectCast(e.[Object],
TreeListViewColumn)' Start the Sort operation only when second column is clicked
If column.Index = 1 Then
Select Case Me.treeListView1.Sorting
Case SortOrder.Ascending
Me.treeListView1.Sorting = SortOrder.Descending
Exit SelectCase SortOrder.Descending
Me.treeListView1.Sorting = SortOrder.Ascending
Exit SelectCase Else
Me.treeListView1.Sorting = SortOrder.Descending
Exit SelectEnd SelectEnd IfEnd IfEnd Sub[C#]using LidorSystems.IntegralUI.Lists;. . .
// Fill the subitems from the second column with data used for sorting
private void InitSortList(object sender, EventArgs e){// At first set the SortTag for each subitem in second column to some Integer
value
for (int i = 0; i < this.treeListView1.FlatNodes.Count; i++){if (this.treeListView1.FlatNodes[i].SubItems.Count > 1)
this.treeListView1.FlatNodes[i].SubItems[1].SortTag = i;}// Change the ComparerObjectType to Integer, so the sorting will be usedcomparing Integer values
this.treeListView1.ComparerObjectType =LidorSystems.IntegralUI.Lists.ComparerObjectType.Integer;}// Handle the ColumnClick event to start sort operation
private void treeListView1_ColumnClick(object sender,
LidorSystems.IntegralUI.ObjectClickEventArgs e){
if (e.Object is TreeListViewColumn){
TreeListViewColumn column = (TreeListViewColumn)e.Object;// Start the Sort operation only when second column is clicked
if (column.Index == 1){
switch (this.treeListView1.Sorting)58

{case SortOrder.Ascending:this.treeListView1.Sorting = SortOrder.Descending;break;
case SortOrder.Descending:this.treeListView1.Sorting = SortOrder.Ascending;break;
default:
this.treeListView1.Sorting = SortOrder.Descending;break;}}}}Create custom sorting
To customize the sort order, you must write a class that implements the IComparer interface andset the ListItemSorter property to an object of that class. This is useful, for example, when you
want to sort nodes by DateTime value added to the subitem Tag property.
Here is an example of custom sort operation. At first initialize the sort data:[VB]
Imports LidorSystems.IntegralUI.Lists. . .
Private Sub InitSortList(ByVal sender As Object, ByVal e As EventArgs)
Dim sampleDate As New DateTime(2008, 1, 1)' At first set the Tag for each subitem in second column to some randomdate

For i As Integer = 0 To Me.treeListView1.FlatNodes.Count - 1
If Me.treeListView1.FlatNodes(i).SubItems.Count > 1 ThensampleDate = CreateRandomDate(sampleDate)
Me.treeListView1.FlatNodes(i).SubItems(1).Text =sampleDate.ToShortDateString()
Me.treeListView1.FlatNodes(i).SubItems(1).Tag = sampleDate
End IfNext
End Sub' Use this method to create random dates
Private Function CreateRandomDate(ByVal value As DateTime) As DateTime
Dim gen As New Random()
Dim range As Integer = DirectCast((DateTime.Today - value),
TimeSpan).Days
Return value.AddDays(gen.[Next](range))
End Function[C#]using LidorSystems.IntegralUI.Lists;
. . .

59

private void InitSortList(object sender, EventArgs e){
DateTime sampleDate = new DateTime(2008, 1, 1);// At first set the Tag for each subitem in second column to some random datefor (int i = 0; i < this.treeListView1.FlatNodes.Count; i++){if (this.treeListView1.FlatNodes[i].SubItems.Count > 1){
sampleDate = CreateRandomDate(sampleDate);
this.treeListView1.FlatNodes[i].SubItems[1].Text =sampleDate.ToShortDateString();
this.treeListView1.FlatNodes[i].SubItems[1].Tag = sampleDate;}}}// Use this method to create random dates
private DateTime CreateRandomDate(DateTime value){Random gen = new Random();
int range = ((TimeSpan)(DateTime.Today - value)).Days;
return value.AddDays(gen.Next(range));}
Then create a new class that implements the IComparer interface:[VB]
Public Class CustomItemComparer
Implements System.Collections.IComparer
Private sortType As System.Windows.Forms.SortOrder =System.Windows.Forms.SortOrder.Ascending
Private col As Integer = -1
Public Sub New()End Sub
Public Sub New(ByVal order As System.Windows.Forms.SortOrder, ByVal
colIndex As Integer)
sortType = ordercol = colIndex
End Sub
Public Function Compare(ByVal x As Object, ByVal y As Object) As Integer
If sortType = System.Windows.Forms.SortOrder.Descending Then
Dim temp As Object = x
x = yy = temp
End If
Dim firstDate As Object = Nothing
Dim secondDate As Object = Nothing
If col >= 0 Then
If col < TryCast(x, TreeListViewNode).SubItems.Count Then
firstDate = TryCast(x, TreeListViewNode).SubItems(col).Tag
End If60

If col < TryCast(y, TreeListViewNode).SubItems.Count Then
secondDate = TryCast(y, TreeListViewNode).SubItems(col).Tag
End IfEnd IfIf firstDate IsNot Nothing AndAlso secondDate IsNot Nothing ThenIf firstDate.[GetType]() Is GetType(DateTime) AndAlso secondDate.
[GetType]() Is GetType(DateTime) Then
Return DateTime.Compare(DirectCast(firstDate, DateTime),
DirectCast(secondDate, DateTime))
End IfEnd IfReturn 0
End Function
End Class[C#]public class CustomItemComparer : System.Collections.IComparer{
private System.Windows.Forms.SortOrder sortType =System.Windows.Forms.SortOrder.Ascending;private int col = -1;
public CustomItemComparer(){}public CustomItemComparer(System.Windows.Forms.SortOrder order, int colIndex){
sortType = order;
col = colIndex;}
public int Compare(object x, object y){
if (sortType == System.Windows.Forms.SortOrder.Descending){object temp = x;x = y;
y = temp;}
object firstDate = null;
object secondDate = null;
if (col >= 0){
if (col < (x as TreeListViewNode).SubItems.Count)
firstDate = (x as TreeListViewNode).SubItems[col].Tag;}

if (col < (y as TreeListViewNode).SubItems.Count)secondDate = (y as TreeListViewNode).SubItems[col].Tag;

if (firstDate != null && secondDate != null){
if (firstDate.GetType() == typeof(DateTime) && secondDate.GetType() ==typeof(DateTime))61}

return DateTime.Compare((DateTime)firstDate, (DateTime)secondDate);

return 0;}}

At the end, add an object from this class to the ListItemSorter property:[VB]

Private Sub treeListView1_ColumnClick(ByVal sender As Object, ByVal e As
LidorSystems.IntegralUI.ObjectClickEventArgs)
If TypeOf e.[Object] Is TreeListViewColumn Then
Dim column As TreeListViewColumn = DirectCast(e.[Object],
TreeListViewColumn)
If column.Index = 1 Then
Select Case Me.treeListView1.Sorting
Case SortOrder.Ascending
Me.treeListView1.Sorting = SortOrder.Descending
Exit SelectCase SortOrder.Descending
Me.treeListView1.Sorting = SortOrder.Ascending
Exit SelectCase Else
Me.treeListView1.Sorting = SortOrder.Descending
Exit SelectEnd SelectMe.treeListView1.ListItemSorter = New
CustomItemComparer(Me.treeListView1.Sorting, column.Index)
End IfEnd IfEnd Sub[C#]// Handle the ColumnClick event to start sort operation
private void treeListView1_ColumnClick(object sender,
LidorSystems.IntegralUI.ObjectClickEventArgs e){
if (e.Object is TreeListViewColumn){
TreeListViewColumn column = (TreeListViewColumn)e.Object;// Start the Sort operation only when second column is clicked
if (column.Index == 1){
switch (this.treeListView1.Sorting){case SortOrder.Ascending:this.treeListView1.Sorting = SortOrder.Descending;break;
case SortOrder.Descending:this.treeListView1.Sorting = SortOrder.Ascending;break;

62}

default:
this.treeListView1.Sorting = SortOrder.Descending;break;// Apply the custom sort operation
this.treeListView1.ListItemSorter = newCustomItemComparer(this.treeListView1.Sorting, column.Index);}}}

SearchHow to find a node by using specific criteria
If you want to find a node with specific value, the best is to use the FindNode method. The search
criteria can be byKey, byPath or byTagString. Here is an example:[VB]
Dim node As LidorSystems.IntegralUI.Lists.TreeListViewNode =Me.treeListView1.FindNode ("ITM",
LidorSystems.IntegralUI.Lists.ListSearchCriteria.byKey)[C#]
LidorSystems.IntegralUI.Lists.TreeListViewNode node =this.treeListView1.FindNode("ITM",
LidorSystems.IntegralUI.Lists.ListSearchCriteria.byKey);The method will search through nodes, and compare their Key property value to match the “ITM”
value. If some node is found it will return their reference, otherwise a null will be returned.
How to get a node reference from mouse position
Sometimes, while hovering inside the TreeListView control client area, you may want to know
which node the actual mouse cursor points at. To receive the node reference, you need to use the
GetNodeAt method, here is how:
[VB]
' Convert the screen coordinates of the mouse cursor position to client
coordinates of the TreeListView control
Dim mousePos As Point =Me.treeListView1.ContentPanel.PointToClient(Control.MousePosition)' Get the node reference (if there is any), at the specified position
Dim node As LidorSystems.IntegralUI.Lists.TreeListViewNode =Me.treeListView1.GetNodeAt(mousePos)[C#]// Convert the screen coordinates of the mouse cursor position to client
coordinates of the TreeListView control
Point mousePos =this.treeListView1.ContentPanel.PointToClient(Control.MousePosition);// Get the node reference (if there is any), at the specified position

63

LidorSystems.IntegralUI.Lists.TreeListViewNode node =this.treeListView1.GetNodeAt(mousePos);

You can also use the GetHoverNode method:[VB]
Dim node As LidorSystems.IntegralUI.Lists.TreeListViewNode =Me.treeListView1.GetHoverNode()[C#]
LidorSystems.IntegralUI.Lists.TreeListViewNode node =this.treeListView1.GetHoverNode();Keyword search
There is a built-in search operations by pressing keys. For this behavior, the KeySearchModeproperty is used with following values:•••

None – The search is disabled.
Partial – The search is started whenever there is a key(s) pressed.
Full– The same as Partial search, only this time the subitems are also included insearching.

The search process begins whenever there is a single key pressed or a string with multiple
characters in it. The search begins always from index 0. For example: whenever the ‘A’ key ispressed, the search is started. Also if you pressed keys in following order ‘ABC’ the search is also
started. However, you must press the consecutive keys in time less then 500 miliseconds
between each pressed key. This is enough time to enter a search string with large length. If thenode is found it is selected and positioned to the center of control visible area.
You can also manually search for nodes, by using FindNode methods. Here is how:

1. Set the KeySearchMode to None
2. Handle the KeyDown event or use some other way to start the search (like Button click
3.

event)
Use the FindNode methods[VB]
Private Sub treeListView1_KeyDown(ByVal sender As Object, ByVal e As
KeyEventArgs)' Search for an node with matching Text starting from index 0.
' Subitems are also included in searching
Dim node As LidorSystems.IntegralUI.Lists.TreeListViewNode =Me.treeListView1.FindNode(GetAlphaNumValue(e.KeyCode), true, 0, true)
If node IsNot Nothing Then
' Select the found node
Me.treeListView1.SelectedNode = node
If Me.treeListView1.IsVScrollVisible() Then
' If the node is not in visible area, set the scrollbar position to show
' the found node in center of ListView control
If node.Bounds.Y >64

Me.treeListView1.ContentPanel.ClientRectangle.Height / 2 Then
Me.treeListView1.SetScrollPos(New Point(0, node.Bounds.Y Me.treeListView1.ContentPanel.ClientRectangle.Height / 2))
Else
Me.treeListView1.SetScrollPos(New Point(0, node.Bounds.Y node.Bounds.Height))
End IfEnd IfEnd IfEnd Sub
Protected Overridable Function GetAlphaNumValue(ByVal keyData As Keys) As String
Select Case keyData
Case Keys.A, Keys.B, Keys.C, Keys.D, Keys.E, Keys.F, _Keys.G, Keys.H, Keys.I, Keys.J, Keys.K, Keys.L, _Keys.M, Keys.N, Keys.O, Keys.P, Keys.Q, Keys.R, _Keys.S, Keys.T, Keys.U, Keys.V, Keys.W, Keys.X, _Keys.Y, Keys.Z
Return keyData.ToString()
Case Keys.D0, Keys.NumPad0
Return "0"
Case Keys.D1, Keys.NumPad1
Return "1"
Case Keys.D2, Keys.NumPad2
Return "2"
Case Keys.D3, Keys.NumPad3
Return "3"
Case Keys.D4, Keys.NumPad4
Return "4"
Case Keys.D5, Keys.NumPad5
Return "5"
Case Keys.D6, Keys.NumPad6
Return "6"
Case Keys.D7, Keys.NumPad7
Return "7"
Case Keys.D8, Keys.NumPad8
Return "8"Case Keys.D9, Keys.NumPad9
Return "9"Case Keys.Space
Return " "End SelectReturn String.Empty
End Function[C#]
private void treeListView1_KeyDown(object sender, KeyEventArgs e)

65

{// Search for an node with matching Text starting from index 0.
// Subitems are also included in searching
LidorSystems.IntegralUI.Lists.TreeListViewNode node =this.treeListView1.FindNode(GetAlphaNumValue(e.KeyCode), true, 0, true);if (node != null){// Select the found nodethis.treeListView1.SelectedNode = node;
if (this.treeListView1.IsVScrollVisible()){// If the node is not in visible area, set the scrollbar position toshow// the found node in center of ListView control
if (node.Bounds.Y >this.treeListView1.ContentPanel.ClientRectangle.Height / 2)
this.treeListView1.SetScrollPos(new Point(0, node.Bounds.Y this.treeListView1.ContentPanel.ClientRectangle.Height / 2));
else
this.treeListView1.SetScrollPos(new Point(0, node.Bounds.Y node.Bounds.Height));}}}
protected virtual string GetAlphaNumValue(Keys keyData){
switch (keyData){
case Keys.A:
case Keys.B:
case Keys.C:
case Keys.D:
case Keys.E:
case Keys.F:
case Keys.G:
case Keys.H:
case Keys.I:
case Keys.J:
case Keys.K:
case Keys.L:
case Keys.M:
case Keys.N:
case Keys.O:
case Keys.P:
case Keys.Q:
case Keys.R:
case Keys.S:
case Keys.T:
case Keys.U:case Keys.V:
case Keys.W:
case Keys.X:
case Keys.Y:
case Keys.Z:
return keyData.ToString();66

case Keys.D0:
case Keys.NumPad0:
return "0";case Keys.D1:
case Keys.NumPad1:
return "1";case Keys.D2:
case Keys.NumPad2:
return "2";case Keys.D3:
case Keys.NumPad3:
return "3";case Keys.D4:
case Keys.NumPad4:
return "4";case Keys.D5:
case Keys.NumPad5:
return "5";case Keys.D6:
case Keys.NumPad6:
return "6";case Keys.D7:
case Keys.NumPad7:
return "7";case Keys.D8:
case Keys.NumPad8:
return "8";case Keys.D9:case Keys.NumPad9:
return "9";case Keys.Space:
return " ";}}return String.Empty;

How to maintain scroll position
In order to manually change the position of scrollbar, there are two methods for this purpose:• GetScrollPos – returns the current position of vertical and horizontal scrollbar• SetScrollPos – sets the position of vertical and horizontal scrollbar to a specified value
Every node has Bounds property which holds the area in which the node content is drawn. This
property has their position in absolute coordinates related to the origin of the control client area.
So, if you want to have some specific node placed at the top of visible area, you can do that byusing this code:

67

[VB]
Me.treeListView1.SetScrollPos(New Point(0, node.Bounds.Y))[C#]
this.treeListView1.SetScrollPos(new Point(0, node.Bounds.Y));The Top position of the node is directly related to the position of vertical scrollbar.

68XML Encoding
By default the TreeListView shows nodes ordered in simplified way, a hierarchical structure where
each node contains image and a label. This is not much useful when you want to present yourdata in more custom layout.
By using XML tags you can create various different templates which will contain custom objects
placed in custom location in column, node or subitem space. These custom objects represents:
text, images, custom controls, hyperlinks, animated gifs etc. There are a set of XML tags withwhich you can design the layouts. These templates can be applied to all columns, nodes orsubitems (to keep their uniform look), or are free to create separate templates.
The result is a very rich and customizable presentation of your data.

XML Tags that are supported
The use of XML tags is very like the using of standard HTML tags. In the following section the listof supported XML tags is presented in alphabetical order:

Tag

Atribute

href

Description
Defines an anchor with which you can create a link to anotherdocument
The target URL of the linkid

The identifier of the hyperlink

style
underlined

An inline style definition
Determines whether the link text is underlined. Default value istrue.
The text is rendered as boldid

The identifier of the text enclosed with this tag

style

An inline style definition

<a>

<b>

<br>

inserts a single line break<control>Defines a custom control
height

Sets the height of a control

index

Specifies the position of the control in a collection

style

An inline style definition

width

Sets the width of a control<div>

Defines the main section of the content
style<font>

An inline style definition
specifies the font of textcolor

Defines the color of the text

face

Defines the font name of the textid

The identifier of the text enclosed with this tag

size

Defines the size of the textstyle

An inline style definition

69

<i>

The text is rendered as italicid

The identifier of the text enclosed with this tag

style

An inline style definition<img>

Defines an image
assemblypath

Specifies the path of an assembly used as a resource fileheight

Sets the height of an image

id

The identifier of the image

index

Specifies the position of the image in a collection

resource

The resource object to be retrieved from assemblysrc

The URL of the image to display

style

An inline style definition

width

Sets the width of an image

indentDefines a new section (paragraph) in the content
Specifies a space (in pixels) by which paragraph’s content is
moved to the right
An inline style definition

<p>

style
<table>defines a table
cellpaddingSpecifies the space between the table cell border and content

cellspacing

Specifies the space between table cells

style

An inline style definition

width

Specifies the width of the table. Can be specified in % or pixels.

<td>

Defines a cell in a table
alignSpecifies the horizontal alignment of cell content

colspanrowspanIndicates the number of columns this cell should spanSpecifies the height of the table cell. Can be specified in % or
pixels.
Indicates the number of rows this cell should spanstyle

An inline style definition

valignSpecifies the vertical alignment of cell content
Specifies the width of the table cell. Can be specified in % or
pixels.
Defines a new section (paragraph) in the content

height

width
<tr>
align

style

Specifies the horizontal alignment of cell content
Specifies the height of the table row. Can be specified in % or
pixels.
An inline style definition

valignSpecifies the vertical alignment of cell content

height<r>

Defines regular textid

The identifier of the text enclosed with this tag

style

An inline style definition


Defines strikethrough textid

The identifier of the text enclosed with this tag

70styleAn inline style definitionalignDefines a style used for rendering and formatting of thecontent
Specifies the content alignment

backcolor

Specifies the color of the object backgroundbackfadecolor

Specifies the fading color of the object backgroundbordercolor

Specifies the color of the object borderfillstyleSpecifies the type of gradient fill of the object backgroundfont

hovertextcolor

Specifies the color of the text
Specifies the color of the object background while mouse
cursor hovers over it
Specifies the fading color of the object background while mouse
cursor hovers over it
Specifies the color of the text while mouse cursor hovers over it

id

The identifier of the stylemarginrendering

Defines the space around an object’s border
Defines the space between the border and the content of an
objectSpecifies the rendering mode for text

selectedtextcolor

Specifies the color of the text when it is selected

textcolor

Specifies the color of the texttransparency

Specifies the percentage of transparency<style>hovercolor
hoverfadecolor

padding<u>defines underlined textid

The identifier of the text enclosed with this tag

style

An inline style definition

In the following section we will present you how to use these tags in various combinations. As aresult there would be created custom layouts for node’s content.

Working with containers: <div> and <p> tags
The simplest form of formatted content is constructed by using the <div> tag and sample text.
Here is an example:[VB]' Column
column.HeaderContent = "<div>First header line</div>"
column.FooterContent = "<div>First footer line</div>"' Nodenode.Content = "<div>Single text line</div>"[C#]// Column
column.HeaderContent = "<div>First header line</div>";
column.FooterContent = "<div>First footer line</div>";

71

// Node
node.Content = "<div>Single text line</div>";

In some cases you want to display text in multiple lines or in different paragraphs. For thissituation the <p> tag is used. Here is an example:[VB]' Column
column.HeaderContent = "<div><b>An example of a little longer header
description</b></div>"
column.FooterContent = "<div><i>An example of a little longer footer
description</i></div>"' Nodenode.Content = "<div><b>An example of text in two paragraphs:</b><pindent=""20"">The first paragraph has an indent set to 20 pixels. In this way thecontained text is moved from the left border.</p><p>The second paragraph shows
short text line.</p></div>"[C#]// Column
column.HeaderContent = "<div><b>An example of a little longer header
description</b></div>";
column.FooterContent = "<div><i>An example of a little longer footer
description</i></div>";// Nodenode.Content = "<div><b>An example of text in two paragraphs:</b><pindent=\"20\">The first paragraph has an indent set to 20 pixels. In this way thecontained text is moved from the left border.</p><p>The second paragraph shows
short text line.</p></div>";
The result is shown in following pictures:

From the pictures you can also notice that the text is wrapped in multiple lines when words arereaching the end of the node content space. This happens because the WordWrap property bydefault is set to True for all nodes in the TreeListView control.

72

The same XML tags also can be used for subitems. Here is how it would look if the following code
is applied:[VB]' At first set the type of column content to accept XML tags
this.treeListView1.Columns[0].ContentType = ColumnContentType.Custom
this.treeListView1.Columns[1].ContentType = ColumnContentType.Custom' SubItems
TreeListViewSubItem subItem = new TreeListViewSubItem();
subItem.Content = "<div>First subitem</div>"
node.SubItems.Add(subItem)
subItem = new TreeListViewSubItem()
subItem.Content = "<div>Second subitem</div>"
node.SubItems.Add(subItem)
this.treeListView1.UpdateLayout()[C#]// At first set the type of column content to accept XML tags
this.treeListView1.Columns[0].ContentType = ColumnContentType.Custom;this.treeListView1.Columns[1].ContentType = ColumnContentType.Custom;// SubItems
TreeListViewSubItem subItem = new TreeListViewSubItem();
subItem.Content = "<div>First subitem</div>";
node.SubItems.Add(subItem);
subItem = new TreeListViewSubItem();
subItem.Content = "<div>Second subitem</div>";
node.SubItems.Add(subItem);this.treeListView1.UpdateLayout();
The code for the result in second picture is:[VB]' At first set the type of column content to accept XML tags
Me.treeListView1.Columns(0).ContentType = ColumnContentType.[Custom]
Me.treeListView1.Columns(1).ContentType = ColumnContentType.[Custom]' SubItems
Dim subItem As New TreeListViewSubItem()
subItem.Content = "<div><b>First subitem:</b><p indent=""20"">The paragraph has
an indent of 20 pixels.</p><p>A short text line.</p></div>"
node.SubItems.Add(subItem)
subItem = New TreeListViewSubItem()
subItem.Content = "<div><b>Second subitem:</b><p indent=""20"">The paragraph has
an indent of 20 pixels.</p><p>A short text line.</p></div>"
node.SubItems.Add(subItem)
Me.treeListView1.UpdateLayout()[C#]// At first set the type of column content to accept XML tags

73

this.treeListView1.Columns[0].ContentType = ColumnContentType.Custom;this.treeListView1.Columns[1].ContentType = ColumnContentType.Custom;// SubItems
TreeListViewSubItem subItem = new TreeListViewSubItem();
subItem.Content = "<div><b>First subitem:</b><p indent=\"20\">The paragraph has
an indent of 20 pixels.</p><p>A short text line.</p></div>";
node.SubItems.Add(subItem);
subItem = new TreeListViewSubItem();
subItem.Content = "<div><b>Second subitem:</b><p indent=\"20\">The paragraph has
an indent of 20 pixels.</p><p>A short text line.</p></div>";
node.SubItems.Add(subItem);this.treeListView1.UpdateLayout();

By default the WordWrap property for subitems is set to False. Because of this you can see thattext is not wrapped in multiple lines when words are reaching the end of the subitem space. If wechange this property value to true, the result is different[VB]' At first set the type of column content to accept XML tags
Me.treeListView1.Columns(0).ContentType = ColumnContentType.[Custom]
Me.treeListView1.Columns(1).ContentType = ColumnContentType.[Custom]' SubItems
Dim subItem As New TreeListViewSubItem()
subItem.Content = "<div><b>First subitem:</b><p indent=""20"">The paragraph has
an indent of 20 pixels.</p><p>A short text line.</p></div>"
subItem.WordWrap = True
node.SubItems.Add(subItem)
subItem = New TreeListViewSubItem()
subItem.Content = "<div><b>Second subitem:</b><p indent=""20"">The paragraph has
an indent of 20 pixels.</p><p>A short text line.</p></div>"
subItem.WordWrap = True
node.SubItems.Add(subItem)
Me.treeListView1.UpdateLayout()

74

[C#]
// At first set the type of column content to accept XML tags
this.treeListView1.Columns[0].ContentType = ColumnContentType.Custom;this.treeListView1.Columns[1].ContentType = ColumnContentType.Custom;// SubItems
TreeListViewSubItem subItem = new TreeListViewSubItem();
subItem.Content = "<div><b>First subitem:</b><p indent=\"20\">The paragraph has
an indent of 20 pixels.</p><p>A short text line.</p></div>";
subItem.WordWrap = true;
node.SubItems.Add(subItem);
subItem = new TreeListViewSubItem();
subItem.Content = "<div><b>Second subitem:</b><p indent=\"20\">The paragraph has
an indent of 20 pixels.</p><p>A short text line.</p></div>";
subItem.WordWrap = true;
node.SubItems.Add(subItem);this.treeListView1.UpdateLayout();

More information about word wrapping can be found in “Using word wrap” section of thisdocument.

Working with <font> tag
Normally some parts of the text shown in a single content can have different font or text size. In
order to do that the <font> tag is used.
In following example we will present you how to create content with header, text in multiple lines
with some parts set to different font and color.
[VB]' At first set the type of column content to accept XML tags
Me.treeListView1.Columns(0).ContentType = ColumnContentType.[Custom]' SubItems
Dim subItem As New TreeListViewSubItem()
subItem.Content = "<div><font size=""11""color=""#000080"">Header:</font><p><font face=""Comic Sans MS"">Comic Sans MS

75

font with<font color=""Green""> text in green color</font></font></p></div>"
subItem.WordWrap = True
Me.treeListView1.SelectedNode.SubItems.Add(subItem)
Me.treeListView1.UpdateLayout()[C#]// At first set the type of column content to accept XML tags
this.treeListView1.Columns[0].ContentType = ColumnContentType.Custom;// SubItems
TreeListViewSubItem subItem = new TreeListViewSubItem();
subItem.Content = "<div><font size=\"11\"color=\"#000080\">Header:</font><p><font face=\"Comic Sans MS\">Comic Sans MS
font with<font color=\"Green\"> text in green color</font></font></p></div>";
subItem.WordWrap = true;
this.treeListView1.SelectedNode.SubItems.Add(subItem);this.treeListView1.UpdateLayout();
The result is a text in two lines. First line is shown in Microsoft Sans Serif 11pt in blue color,
and the second line is shown in Comic Sans MS font containing parts in green color:

Working with font style tags
In font style tags group are <b>, <i>, 
 and <u>. With these tags you can change the style offont for some part or whole text. Here is an example:[VB]
node.Content = "<div>Simple text line containing <b>Bold</b>, <i>Italic</i>,
strikethrough 
and <u>underline</u> text.</div>"
Me.treeListView1.UpdateLayout()[C#]node.Content = "<div>Simple text line containing <b>Bold</b>, <i>Italic</i>,
strikethrough 
and <u>underline</u> text.</div>";
this.treeListView1.UpdateLayout();76

Working with <a> tag
One of objects that you can create in content is a hyperlink object. The link you are entering canbe some file or page located on the web or on local hard disk.
If the link points to some application file like Notepad.exe, you can open it by simple clicking on
the hyperlink. However in order this to work, you will also need to handle ItemObjectClicked
event.
Here is an example of content with two hyperlinks:[VB]' At first set the type of column content to accept XML tags
Me.treeListView1.Columns(0).ContentType = ColumnContentType.[Custom]
Me.treeListView1.Columns(1).ContentType = ColumnContentType.[Custom]' SubItems
Dim subItem As New TreeListViewSubItem()
subItem.Content = "<div><a href=""www.google.com""style=""textcolor:Blue"">Search</a> portal</div>"
subItem.WordWrap = True
Me.treeListView1.SelectedNode.SubItems.Add(subItem)
subItem = New TreeListViewSubItem()
subItem.Content = "<div>Our company home page <a href=""www.lidorsystems.com""style=""textcolor:Red"">Lidor Systems</a></div>"
subItem.WordWrap = True
Me.treeListView1.SelectedNode.SubItems.Add(subItem)
Me.treeListView1.UpdateLayout()[C#]// At first set the type of column content to accept XML tags
this.treeListView1.Columns[0].ContentType = ColumnContentType.Custom;this.treeListView1.Columns[1].ContentType = ColumnContentType.Custom;// SubItems
TreeListViewSubItem subItem = new TreeListViewSubItem();
subItem.Content = "<div><a href=\"www.google.com\"style=\"textcolor:Blue\">Search</a> portal</div>";

77

subItem.WordWrap = true;
this.treeListView1.SelectedNode.SubItems.Add(subItem);
subItem = new TreeListViewSubItem();
subItem.Content = "<div>Our company home page <a href=\"www.lidorsystems.com\"style=\"textcolor:Red\">Lidor Systems</a></div>";
subItem.WordWrap = true;
this.treeListView1.SelectedNode.SubItems.Add(subItem);this.treeListView1.UpdateLayout();

As you can see from the picture, the hyperlinks have also different colors. Also, the hand cursor is
automatically shown when the mouse hovers over the hyperlink. In future versions we may
extend this to be able to add custom cursors.
In this example we have used the style attribute in which you can set different sub attributes forthe object to which this style is applied. See below for more information how to use styles.

Working with <img> tag
With this tag you can add images located on some local location or there is an option to create
ImageList and extract the image from the list by using specified index.
An example how to create content with two images located on local hard disk:[VB]' Column' An example how to create content with two images located on local hard disk
Me.treeListView1.Columns(0).HeaderContent = "<div><img
src=""C:\images\info.ico""></img> Content created with two images <img
src=""C:\images\smiley.ico""></img>at different locations.</div>"' An example how to create content with two images located in ImageList
referenced by TreeListView control
Me.treeListView1.Columns(0).FooterContent = "<div><img index=""0""></img> Content
created with two images <img index=""1""></img>. Images are contained in
ImageList.</div>"
Me.treeListView1.Columns(0).WordWrap = True

78

Me.treeListView1.UpdateLayout()[C#]// Column// An example how to create content with two images located on local hard disk
this.treeListView1.Columns[0].HeaderContent = "<div><img
src=\"C:\\images\\info.ico\"></img> Content created with two images <img
src=\"C:\\images\\smiley.ico\"></img>at different locations.</div>";// An example how to create content with two images located in ImageList
referenced by TreeListView control
this.treeListView1.Columns[0].FooterContent = "<div><img index=\"0\"></img>
Content created with two images <img index=\"1\"></img>. Images are contained in
ImageList.</div>";
this.treeListView1.Columns[0].WordWrap = true;
this.treeListView1.UpdateLayout();

By default the images have their original size. You can change their size by setting the width andheight attributes of the <img> tag. Also you can apply margin and padding attributes by setting
the style attribute values (see below how to use styles).

Working with <control> tag
With text, images and hyperlinks you can create very rich content. However, placing custom
controls will give more interaction to the user.
The <control> tag is specifically added to meet this task. Every custom control, standard or third
party, can be placed in single content of the column, node or subitem. You can add even complex
controls like Grid.
Here is an example on how to add a button and a checkbox to subitem content:[VB]' At first set the type of column content to accept XML tags
Me.treeListView1.Columns(0).ContentType = ColumnContentType.[Custom]' SubItemDim subItem As New TreeListViewSubItem()79

' At first the control must be created and added to' the subitem Controls collection
Dim cBox As New CheckBox()
cBox.Size = New Size(14, 14)
subItem.Controls.Add(cBox)' In <control> tag use the index to reference the control
subItem.Content = "<div>Content with custom control. <control
index=""0""></control></div>"
Me.treeListView1.SelectedNode.SubItems.Add(subItem)
Me.treeListView1.UpdateLayout()[C#]// At first set the type of column content to accept XML tags
this.treeListView1.Columns[0].ContentType = ColumnContentType.Custom;// SubItem
TreeListViewSubItem subItem = new TreeListViewSubItem();// At first the control must be created and added to// the subitem Controls collection
CheckBox cBox = new CheckBox();cBox.Size = new Size(14, 14);
subItem.Controls.Add(cBox);// In <control> tag use the index to reference the control
subItem.Content = "<div>Content with custom control. <control
index=\"0\"></control></div>";
this.treeListView1.SelectedNode.SubItems.Add(subItem);this.treeListView1.UpdateLayout();

The use of controls in simple format is not very useful. The controls like text or any other object
can also we wrapped and shown in next line, but that is all. Mainly in simple form there are no
attributes by which you can place the control at specific place or aligned it to the right side of thecontent space, for example.
This can be done by using table formatting which is explained in next section.

80

Working with <table>, <tr> and <td> tags
The best way to create custom layouts with different objects placed at different locations in thecontent is by using table formatting.
One of the reasons the table is used is presentation of data in ordered way for all nodes. In thefollowing example we will show you how to place a text, hyperlink and custom control in a content
using <table> tag:
[VB]
' At first set the type of column content to accept XML tags
Me.treeListView1.Columns(1).ContentType = ColumnContentType.[Custom]' SubItemDim subItem As New TreeListViewSubItem("Subitem")
Me.treeListView1.SelectedNode.SubItems.Add(subItem)
subItem = New TreeListViewSubItem()' At first the control must be created and added to' the subitem Controls collection
Dim cBox As New CheckBox()
cBox.Size = New Size(14, 14)
subItem.Controls.Add(cBox)' In <control> tag use the index to reference the control
subItem.Content = "<div><table cellspacing=""2"" cellpadding=""1""><tr><td>Simple
text line</td><td><a href=""www.lidorsystems.com"">More info</a></td><td><control
index=""0""></control></td></tr></table></div>"
Me.treeListView1.SelectedNode.SubItems.Add(subItem)
Me.treeListView1.UpdateLayout()[C#]// At first set the type of column content to accept XML tags
this.treeListView1.Columns[1].ContentType = ColumnContentType.Custom;// SubItem
TreeListViewSubItem subItem = new TreeListViewSubItem("Subitem");this.treeListView1.SelectedNode.SubItems.Add(subItem);
subItem = new TreeListViewSubItem();// At first the control must be created and added to// the subitem Controls collection
CheckBox cBox = new CheckBox();cBox.Size = new Size(14, 14);
subItem.Controls.Add(cBox);// In <control> tag use the index to reference the control
subItem.Content = "<div><table cellspacing=\"2\" cellpadding=\"1\"><tr><td>Simple
text line</td><td><a href=\"www.lidorsystems.com\">More info</a></td><td><control
index=\"0\"></control></td></tr></table></div>";
this.treeListView1.SelectedNode.SubItems.Add(subItem);this.treeListView1.UpdateLayout();

81

In this example all three objects are placed next to each other, which doesn’t give the best look.
Also, it acts like there is not table present. We can change that by specifying the width for eachtable cell. If the width is not specified the table cell will have width of the object with minimal
width.
[VB]' At first set the type of column content to accept XML tags
Me.treeListView1.Columns(1).ContentType = ColumnContentType.[Custom]' SubItemDim subItem As New TreeListViewSubItem("Subitem")
Me.treeListView1.SelectedNode.SubItems.Add(subItem)
subItem = New TreeListViewSubItem()' At first the control must be created and added to' the subitem Controls collection
Dim cBox As New CheckBox()
cBox.Size = New Size(14, 14)
subItem.Controls.Add(cBox)' In <control> tag use the index to reference the control
subItem.Content = "<div><table cellspacing=""2"" cellpadding=""1""width=""100%""><tr><td width=""50%"">Simple text line</td><td width=""50%""><a
href=""www.lidorsystems.com"">More info</a></td><td><control index=""0""></control></td></tr></table></div>"
subItem.WordWrap = True
Me.treeListView1.SelectedNode.SubItems.Add(subItem)
Me.treeListView1.UpdateLayout()[C#]// At first set the type of column content to accept XML tags
this.treeListView1.Columns[1].ContentType = ColumnContentType.Custom;// SubItem
TreeListViewSubItem subItem = new TreeListViewSubItem("Subitem");this.treeListView1.SelectedNode.SubItems.Add(subItem);
subItem = new TreeListViewSubItem();// At first the control must be created and added to// the subitem Controls collection82CheckBox cBox = new CheckBox();cBox.Size = new Size(14, 14);
subItem.Controls.Add(cBox);// In <control> tag use the index to reference the control
subItem.Content = "<div><table cellspacing=\"2\" cellpadding=\"1\"
width=\"100%\"><tr><td width=\"50%\">Simple text line</td><td width=\"50%\"><ahref=\"www.lidorsystems.com\">More info</a></td><td><control index=\"0\"></control></td></tr></table></div>";
subItem.WordWrap = true;
this.treeListView1.SelectedNode.SubItems.Add(subItem);this.treeListView1.UpdateLayout();

The change is obvious. By specifying the width of table cell in percents we have achieved the cellto shrink or expand depending of the current width of the subitem content. For the last cell thewidth is not specified. This is done to make sure that the CheckBox will remain always docked at
the right side of the content.
Here is a more complex layout, which includes column and row span:[VB]' At first set the type of column content to accept XML tags
Me.treeListView1.Columns(1).ContentType = ColumnContentType.[Custom]' SubItemDim subItem As New TreeListViewSubItem("Subitem")
Me.treeListView1.SelectedNode.SubItems.Add(subItem)
subItem = New TreeListViewSubItem()' At first the control must be created and added to' the subitem Controls collection
Dim cBox As New CheckBox()
cBox.Size = New Size(14, 14)
subItem.Controls.Add(cBox)' Use a temprary variable for storing large string
Dim content As String = "<div><table width=""100%"">"' Add the first row with four cells
content += "<tr><td rowspan=""2""><img index=""1""></img></td><td
width=""50%"">First line</td><td width=""50%""><a href=""www.lidorsystems.com""83style=""textcolor:Blue"">More info</a></td><td><control
index=""0""></control></td></tr>"' Add the second row and span the cell over three other cells
content += "<tr><td colspan=""3""><i>Second text line which is a little longer.</
i></td></tr>"' Close the table and div tags
content += "</table></div>"' Add the content string to the subItem Content property
subItem.Content = content
subItem.WordWrap = True
Me.treeListView1.SelectedNode.SubItems.Add(subItem)
Me.treeListView1.UpdateLayout()[C#]// At first set the type of column content to accept XML tags
this.treeListView1.Columns[1].ContentType = ColumnContentType.Custom;// SubItem
TreeListViewSubItem subItem = new TreeListViewSubItem("Subitem");this.treeListView1.SelectedNode.SubItems.Add(subItem);
subItem = new TreeListViewSubItem();// At first the control must be created and added to// the subitem Controls collection
CheckBox cBox = new CheckBox();cBox.Size = new Size(14, 14);
subItem.Controls.Add(cBox);// Use a temprary variable for storing large string
String content = "<div><table width=\"100%\">";// Add the first row with four cells
content += "<tr><td rowspan=\"2\"><img index=\"1\"></img></td><td
width=\"50%\">First line</td><td width=\"50%\"><a href=\"www.lidorsystems.com\"style=\"textcolor:Blue\">More info</a></td><td><control
index=\"0\"></control></td></tr>";// Add the second row and span the cell over three other cells
content += "<tr><td colspan=\"3\"><i>Second text line which is a little longer.</
i></td></tr>";// Close the table and div tags
content += "</table></div>";// Add the content string to the subItem Content property
subItem.Content = content;
subItem.WordWrap = true;
this.treeListView1.SelectedNode.SubItems.Add(subItem);this.treeListView1.UpdateLayout();
The first cell is spanned across two rows. The second cell of the second row is spanned acrossthree columns. The result is shown in following picture:84

Working with <style> tag
The styles are very powerful tool if you use them correctly. You can create several styles in
beginning and later used them for specific parts of the code only by calling their Id. Also you canuse inline coding to apply specific style to some part of the content.
Here is how to create styles at beginning of the code:[VB]' Use a temprary variable for storing large string
Dim content As String = "<div><style id=""1"" textcolor=""Red""
font=""name:Arial;size:10;style:b""></style>"content += "<style id=""2"" textcolor=""Blue""font=""name:Verdana;size:8;style:u""></style>"content += "<style id=""3"" textcolor=""Green"" font=""name:Times New
Roman;size:8;style:i""></style>"content += "<p style=""id:1"">The first text line in red.</p>"content += "<p style=""id:2"">The second in blue, <font style=""id:3"">with partsin green.</font></p>"content += "</div>"' Add the content string to the subItem Content property
subItem.Content = content
subItem.WordWrap = True[C#]// Use a temprary variable for storing large string
String content = "<div><style id=\"1\" textcolor=\"Red\"
font=\"name:Arial;size:10;style:b\"></style>";content += "<style id=\"2\" textcolor=\"Blue\"font=\"name:Verdana;size:8;style:u\"></style>";content += "<style id=\"3\" textcolor=\"Green\" font=\"name:Times New
Roman;size:8;style:i\"></style>";content += "<p style=\"id:1\">The first text line in red.</p>";content += "<p style=\"id:2\">The second in blue, <font style=\"id:3\">with partsin green.</font></p>";content += "</div>";// Add the content string to the subItem Content property
subItem.Content = content;

85

subItem.WordWrap = true;

Here is how to use inline style definition:[VB]' Use a temprary variable for storing large string
Dim content As String = "<div>"
content += "<p style=""textcolor:Red;font:Arial,10,b"">The first text line inred.</p>"content += "<p style=""textcolor:Blue;font:Verdana,8,u"">The second in blue,<font style=""textcolor:Green;font:Times New Roman,8,i"">with parts ingreen.</font></p>"content += "</div>"' Add the content string to the subItem Content property
subItem.Content = content
subItem.WordWrap = True[C#]// Use a temprary variable for storing large string
String content = "<div>";
content += "<p style=\"textcolor:Red;font:Arial,10,b\">The first text line inred.</p>";content += "<p style=\"textcolor:Blue;font:Verdana,8,u\">The second in blue,<font style=\"textcolor:Green;font:Times New Roman,8,i\">with parts ingreen.</font></p>";content += "</div>";// Add the content string to the subItem Content property
subItem.Content = content;
subItem.WordWrap = true;
The result is the same as in previous picture, only the use of styles has changed. Instead of using
predefined styles, we have used inline style definitions to change different parts of the text.
Styles can be applied for every object, not just text. For example the Margin and Padding
attributes of the style, has more value when paragraphs or tables are used. The same applies forcontent alignment which has more value when it is used with tables.

86Using word wrap
By default the WordWrap for the TreeListView control and all nodes is set to True. This means thatwhenever some object reach the end of the line, if there is not enough space for the object to beplaced at the line end, it will be placed in beginning of a new line. In this way by changing thewidth of columns in TreeListView control the content of their nodes will expand or collapse , but
always will show their full content in visible area of the control. However, for columns andsubitems the WordWrap property by default is set to False. In order to work this for them, at first
this value must be set to True.
If you don’t want to use word wrapping, then the node content will remain in exact place as nodelayout is constructed. Meaning, some objects may be placed outside the visible area of the
TreeListView control. This will trigger appearance of horizontal or vertical scrollbar, which allows
you to scroll the visible area in order to show these objects.
As stated above, all nodes can have their independent setting of word wrap. This is very useful tohave, when designing different layouts for different nodes. Some of them can have word wrapping
while others don’t. You only need to change the WordWrap property for specific nodes.

87Serialization
You can use serialization to memorize the current state of TreeListView. Also, this feature is very
useful in creation of color schemes.

How to serialize the control content in Streams
In order to serialize the control content in streams, there are two methods:• LoadFromStream – load the control content from Stream• SaveToStream – save the control content in Stream
Here is how you can use these methods:[VB]
Imports LidorSystems.IntegralUI.Serialization. . .
' Create a MemoryStream object
Private memStream As New MemoryStream()' Click on the btnLoad button to load the content of MemoryStream object' to TreeListView control
Private Sub btnLoad_Click(ByVal sender As Object, ByVal e As System.EventArgs)
Dim serializer As New TreeListViewSerializer()
memStream.Seek(0, SeekOrigin.Begin)serializer.LoadFromStream(Me.treeListView1, memStream)
End Sub' Click on the btnSave button to save the control content to' MemoryStream object
Private Sub btnSave_Click(ByVal sender As Object, ByVal e As System.EventArgs)
Dim serializer As New TreeListViewSerializer()
serializer.SaveToStream(Me.treeListView1, memStream, False)
End Sub[C#]using LidorSystems.IntegralUI.Serialization;. . .
// Create a MemoryStream object
MemoryStream memStream = new MemoryStream();// Click on the btnLoad button to load the content of MemoryStream object// to TreeListView control
private void btnLoad_Click(object sender, System.EventArgs e){
TreeListViewSerializer serializer = new TreeListViewSerializer();memStream.Seek(0, SeekOrigin.Begin);
serializer.LoadFromStream(this.treeListView1, memStream);}// Click on the btnSave button to save the control content to// MemoryStream object
private void btnSave_Click(object sender, System.EventArgs e)

88

{
}

TreeListViewSerializer serializer = new TreeListViewSerializer();
serializer.SaveToStream(this.treeListView1, memStream, false);

How to serialize the control content in files
In order to serialize the control content in files, there are two ways:• By using file streams• By using file names
Serialization using file streams[VB]
Imports LidorSystems.IntegralUI.Serialization. . .
' Click on the btnLoad button to load the content of FileStream object' to TreeListView control
Private Sub btnLoad_Click(ByVal sender As Object, ByVal e As System.EventArgs)
Dim serializer As New TreeListViewSerializer()
Dim fs As FileStream = File.OpenRead("C:\fs.xml")
serializer.LoadFromStream(Me.treeListView1, fs)
End Sub' Click on the btnSave button to save the control content to' FileStream object
Private Sub btnSave_Click(ByVal sender As Object, ByVal e As System.EventArgs)
Dim serializer As New TreeListViewSerializer()
Dim fs As FileStream = File.Create("C:\fs.xml")
serializer.SaveToStream(Me.treeListView1, fs, True)
End Sub[C#]using LidorSystems.IntegralUI.Serialization;. . .
// Click on the btnLoad button to load the content of FileStream object// to TreeListView control
private void btnLoad_Click(object sender, System.EventArgs e){
TreeListViewSerializer serializer = new TreeListViewSerializer();
FileStream fs = File.OpenRead("C:\\fs.xml");serializer.LoadFromStream(this.treeListView1, fs);}// Click on the btnSave button to save the control content to// FileStream object
private void btnSave_Click(object sender, System.EventArgs e){
TreeListViewSerializer serializer = new TreeListViewSerializer();
FileStream fs = File.Create("C:\\fs.xml");serializer.SaveToStream(this.treeListView1, fs, true);}89Serialization using file names
In order to serialize the control content in files, there are two methods:• LoadFromFile – load the control content from file
• SaveToFile – save the control content in file
[VB]
' Click on the btnLoad button to open the Load dialog, by which you can' choose the destination of the filePrivate Sub btnLoad_Click(ByVal sender As Object, ByVal e As System.EventArgs)
Dim openDlg As New OpenFileDialog()
openDlg.Filter = "XML files (*.xml)|*.xml"
openDlg.InitialDirectory = Application.ExecutablePath
If openDlg.ShowDialog() = DialogResult.OK Then
Me.treeListView1.SuspendUpdate()
Dim serializer As New
LidorSystems.IntregralUI.Serialization.TreeListViewSerializer()
serializer.LoadFromXml(Me.treeListView1, openDlg.FileName)
Me.treeListView1.ResumeUpdate()
End IfEnd Sub' Click on the btnSave button to open the Save dialog, by which you can' choose the destination of the filePrivate Sub btnSave_Click(ByVal sender As Object, ByVal e As System.EventArgs)
Dim saveDlg As New SaveFileDialog()
saveDlg.Filter = "XML files (*.xml)|*.xml"
saveDlg.AddExtension = True
saveDlg.DefaultExt = ".xml"
saveDlg.InitialDirectory = Application.ExecutablePath
If saveDlg.ShowDialog() = DialogResult.OK Then
Dim serializer As New
LidorSystems.IntregralUI.Serialization.TreeListViewSerializer()
serializer.SaveToXml(Me.treeListView1, saveDlg.FileName)End IfEnd Sub[C#]using LidorSystems.IntegralUI.Serialization;. . .
// Click on the btnLoad button to open the Load dialog, by which you can// choose the destination of the fileprivate void btnLoad_Click(object sender, System.EventArgs e){
OpenFileDialog openDlg = new OpenFileDialog();
openDlg.Filter = "XML files (*.xml)|*.xml";
openDlg.InitialDirectory = Application.ExecutablePath;
if (openDlg.ShowDialog() == DialogResult.OK){
this.treeListView1.SuspendUpdate();LidorSystems.IntregralUI.Serialization.TreeListViewSerializer serializer =new LidorSystems.IntregralUI.Serialization.TreeListViewSerializer();90

serializer.LoadFromXml(this.treeListView1, openDlg.FileName);}

this.treeListView1.ResumeUpdate();}// Click on the btnSave button to open the Save dialog, by which you can// choose the destination of the fileprivate void btnSave_Click(object sender, System.EventArgs e){
SaveFileDialog saveDlg = new SaveFileDialog();
saveDlg.Filter = "XML files (*.xml)|*.xml";
saveDlg.AddExtension = true;
saveDlg.DefaultExt = ".xml";
saveDlg.InitialDirectory = Application.ExecutablePath;
if (saveDlg.ShowDialog() == DialogResult.OK){
LidorSystems.IntregralUI.Serialization.TreeListViewSerializer serializer =LidorSystems.IntregralUI.Serialization.new TreeListViewSerializer();
serializer.SaveToXml(this.treeListView1, saveDlg.FileName);}}

How to serialize the control content in SQL database
When you want to save the control content in some SQL database, at first you need a XML field inyour table. The process of adding the control content to this field is the same as for streams,
explained previously.
Loading content from a database and filling the TreeListView control with it is also the same asusing streams. But here, at first you need to create a MemoryObject:[VB]' Create a MemoryStream object
Dim memStream As New MemoryStream()' sampleString is temporary varaiable that holds the database XMl field content' In this demonstration we are using some XML encoded text.
Dim sampleString As String = "<?xml version=""1.0"" encoding=""us-ascii""?
><TreeListView Version=""2.0""><Nodes><Node Text=""Node1""></Node></Nodes></TreeListView>"' Write the sampleString to the MemoryStream object
Dim sw As New StreamWriter(memStream, System.Text.Encoding.ASCII)
sw.Write(sampleString)sw.Flush()[C#]// Create a MemoryStream object
MemoryStream memStream = new MemoryStream();// sampleString is temporary varaiable that holds the database XMl field content// In this demonstration we are using some XML encoded text.
string sampleString = "<?xml version=\"1.0\" encoding=\"us-ascii\"?><TreeListView
Version=\"2.0\"><Nodes><Node Text=\"Node 1\"></Node></Nodes></TreeListView>";91

// Write the sampleString to the MemoryStream object
StreamWriter sw = new StreamWriter(memStream, System.Text.Encoding.ASCII);
sw.Write(sampleString);
sw.Flush();After that, you need to create a TreeListViewSerializer object:[VB]
Dim serializer As New TreeListViewSerializer()
memStream.Seek(0, SeekOrigin.Begin)serializer.LoadFromStream(Me.treeListView1, memStream)[C#]
TreeListViewSerializer serializer = new TreeListViewSerializer();memStream.Seek(0, SeekOrigin.Begin);
serializer.LoadFromStream(this.treeListView1, memStream);
As a result the control will be populated from the string placed in the MemoryStream object.

92

Sample projects
More information on IntegralUI TreeListView control can be found by examining the source code ofsample projects available on our web site:

Explorer
Demonstrates how IntegralUI TreeListViewcontrol can be used tocreate a Windows Explorer - like application. It includes various
appearances, three visual styles (Classic, XP, Vista), Advanced
Drag&Drop operations, Column reordering, Sorting and Multiple
selections. Among the advanced features is the XML encoding ofcolumn and node text.

Custom Controls
Demonstrates how custom controls can be included in IntegralUI
TreeListView. Data is presented in advanced detail view with fixedcolumns to the left and right side, with several types of custom
controls. Three visual styles (Classic, XP, Vista) are available.

93