IntegralUI TreeListView User Guide - Lidor Systems

User Guide 

for IntegralUI TreeListView v3.2 

© 2011 Lidor Systems. All rights reserved

Table of contents 

Introduction 4 

Architecture 5 

Object Model 5 

Event Model 8 

Editor 9 

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 

Themes 22 

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 width 25 

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 


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 


2

Standard selection 45 

Frame selection 45 

Drag&Drop operations 45 

Use of permissions 46 

How to create a custom drag&drop operation 46 

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 

Search 62 

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: and tags 70 

Working with tag 74 

Working with font style tags 75 




Working with , and tags 79 


Using word wrap 86 

Serialization 87 

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 database 90 

Sample projects 92 

3

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 rich 

hierarchical structure of your data. 

Here are some of the main features: 

• Highly customizable appearance 

• Rich content: Text, Images, Hyperlinks, Controls, CheckBox, Flags; can be included in 

every 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 support 

4

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 class 

which is a parent class for all list controls in IntegralUI class library. Because of this, you will find 

many 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 and 

subitems. 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. By 

default a plain text is used to present data in these objects. However, by using XML tags you can 

create 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 the 

styles 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 Occurs after the node's check box is checked 

• AfterCollapse Occurs after the node is collapsed 

• AfterExpand Occurs after the node is expanded 

• AfterLabelEdit Occurs after the node text is edited 

• AfterSelect Occurs after the node is selected 

• AfterSubItemSelect Occurs after the subitem is selected 

• BeforeCheck Occurs before the node's check box is checked 

• BeforeCollapse Occurs before the node is collapsed 

• BeforeExpand Occurs before the node is expanded 

• BeforeLabelEdit Occurs before the node text is edited 

• BeforeSelect Occurs before the node is selected 

• BeforeSubItemSelect Occurs before the subitem is selected 

• ColumnAdded Occurs after new column is added 

• ColumnAdding Occurs before new column is added 

• ColumnRemoved Occurs after column is removed from collection 

• ColumnRemoving Occurs before column is removed from collection 

• FocusedNodeChanged Occurs after the focused node is changed 

• FocusedNodeChanging Occurs before the focused node is changed 

• NodeAdded Occurs after new node is added 

• NodeAdding Occurs before new node is added 

• ItemDrag Occurs when the user begins dragging an node 

• ItemMouseHover Occurs when the mouse cursor hovers for some time over 

an node space 

• ItemObjectClicked Occurs after the user clicks an custom object (placed with 

XML encoding) in the control space 

• ItemObjectClicking Occurs before the user clicks an custom object (placed with 

XML encoding) in the control space 

• NodeRemoved Occurs after node is removed from collection 

• NodeRemoving Occurs before node is removed from collection 

• ScrollPosChanged Occurs when position of scrollbar has changed 

• SelectionModeChanged Occurs when selection type changes 

• SubItemSelectionChanged Occurs when selection of subitems is changed 

8

Editor 

There 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 node 

CreateSubItems(node, i.ToString()) 

' Create child nodes for this node 

CreateSubNodes(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 



node = New TreeListViewNode(("Node " & sufix) + i.ToString()) 


CreateSubItems(node, sufix + i.ToString()) 


CreateSubNodes(node, level + 1, sufix + i.ToString()) 

parentNode.Nodes.Add(node) 

Next 

End If 

End 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 node 

CreateSubItems(node, i.ToString()); 

// Create child nodes for this node 

CreateSubNodes(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 


for (int i = 0; i < 2; i++) 

{ 

node = new TreeListViewNode("Node " + sufix + i.ToString()); 


CreateSubItems(node, sufix + i.ToString()); 


CreateSubNodes(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 the 

control, starting from the background, border, columns, nodes, subitems etc. This is done by 

numerous styles with which you can set colors, fonts, alignment, rendering mode. Here is the list 

of 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 and 

subitems. 

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 then 

the standard rectangular form. To achieve this goal several properties of the control FormatStyle 

needs 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 = 


Me.treeListView1.ColumnFormatStyle.HeaderBorderCornerShape.TopRight = 


Me.treeListView1.ColumnFormatStyle.HeaderPadding = New Padding(3, 2, 3, 2) 

Me.treeListView1.ColumnFormatStyle.FooterBorderCornerShape.BottomLeft = 


Me.treeListView1.ColumnFormatStyle.FooterBorderCornerShape.BottomRight = 


Me.treeListView1.ColumnFormatStyle.FooterBorderCornerShape.TopRight = 


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 = 


Me.treeListView1.NodeFormatStyle.BorderCornerShape.BottomRight = 


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 = 


this.treeListView1.ColumnFormatStyle.HeaderBorderCornerShape.BottomRight = 


this.treeListView1.ColumnFormatStyle.HeaderBorderCornerShape.TopRight = 


this.treeListView1.ColumnFormatStyle.HeaderPadding = new Padding(3, 

2, 3, 2); 

this.treeListView1.ColumnFormatStyle.FooterBorderCornerShape.BottomLeft = 


this.treeListView1.ColumnFormatStyle.FooterBorderCornerShape.BottomRight = 


this.treeListView1.ColumnFormatStyle.FooterBorderCornerShape.TopRight = 


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 = 


this.treeListView1.NodeFormatStyle.BorderCornerShape.BottomRight = 


this.treeListView1.NodeFormatStyle.BorderCornerShape.TopRight = 


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 and 

hovered state: 

[VB] 

' Set the StyleFromParent to False, so that 

' a specific style changes be applied 

column.StyleFromParent = False 

' Change the look of the column, when it is in normal state 

column.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 state 

column.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 applied 

column.StyleFromParent = false; 

// Change the look of the column, when it is in normal state 

column.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 state 

column.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 and 


[VB] 



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 



17

[C#] 



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; 





Use of subitem’s individual styles 

By default subitems doesn’t have color settings, except for the text color. In general the 

appearance 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 and 


[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 



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 



[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; 



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; 





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 Then 

node.NormalStyle = evenNodeStyle 

Else 

node.NormalStyle = oddNodeStyle 

End If 

Next 

' Update the control 

Me.treeListView1.UpdateLayout() 

End Sub 


String) 




subItem = New TreeListViewSubItem(("Item " & sufix) + j.ToString()) 


Next 

End Sub 

[C#] 


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 in 

this.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) 

{ 




{ 

subItem = new TreeListViewSubItem("Item " + sufix + j.ToString()); 

} 

} 


As you can see from the code we have used the FlatNodes collection to cycle through nodes. This 

is 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 performance 

is great. 

21

Style serialization and reuse 

If you want to create some predefined color schemes and apply it to the control at specific 

conditions, one way to do that is by serializing the control layout. You only would need to set the 

color 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. 

Themes 

If 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 VisualStyle 

a 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

Behavior 

Working with Columns 

Add/Remove operations 

The columns displayed in the TreeListView control are stored in Columns property. This is an 

object 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 a 

list 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] 


. . . 

Dim column As New TreeListViewColumn("Header", "Footer") 


[C#] 


. . . 

TreeListViewColumn column = new TreeListViewColumn("Header", "Footer"); 


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] 


. . . 

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#] 


. . . 

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 be 

done by setting the FixedWidth property to True. However, at first the column width needs to be 

set. 

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 is 

no 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] 


. . . 

Private Sub InitList(ByVal sender As Object, ByVal e As EventArgs) 





j.ToString()) 


Next 

' Reset the node counter 

nodeIndex = 0 

' Create root nodes 



node = New TreeListViewNode("Node " & i.ToString()) 

nodeIndex += 1 


CreateSubItems(node, i.ToString()) 


CreateSubNodes(node, 0, i.ToString()) 


Next 


End Sub 


String) 




subItem = New TreeListViewSubItem() 

Select Case Me.treeListView1.Columns(j).ContentType 

Case Else 

subItem.Text = ("Item " & sufix) + j.ToString() 

Exit Select 

End Select 


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 

26

' Create child nodes for specified node 



node = New TreeListViewNode(("Node " & sufix) + i.ToString()) 

nodeIndex += 1 


CreateSubItems(node, sufix + i.ToString()) 


CreateSubNodes(node, level + 1, sufix + i.ToString()) 

parentNode.Nodes.Add(node) 

Next 

End If 

End Sub 

[C#] 


. . . 

private void InitList(object sender, EventArgs e) 

{ 

// Create two columns with header and footer description 


for (int j = 0; j < 2; j++) 

{ 



} 

} 


// Reset the node counter 

nodeIndex = 0; 

// Create root nodes 


for (int i = 0; i < 3; i++) 

{ 

node = new TreeListViewNode("Node " + i.ToString()); 

nodeIndex++; 

} 


CreateSubItems(node, i.ToString()); 


CreateSubNodes(node, 0, i.ToString()); 



private void CreateSubItems(TreeListViewNode parentNode,string sufix) 

{ 


27

} 



{ 

subItem = new TreeListViewSubItem(); 

} 

switch (this.treeListView1.Columns[j].ContentType) 

{ 

default: 

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

break; 

} 


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 


for (int i = 0; i < 2; i++) 

{ 

node = new TreeListViewNode("Node " + sufix + i.ToString()); 

nodeIndex++; 

} 

} 

} 


CreateSubItems(node, sufix + i.ToString()); 


CreateSubNodes(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. All 

data 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. The 

changes are marked in Red: 

[VB] 






j.ToString()) 

28

Select Case j 

' Set the second column to show custom controls 

Case 1 

column.ContentType = ColumnContentType.Image 

Exit Select 

' Make a first column a little wider 

Case Else 


Exit Select 

End Select 


Next 

. . . 

End Sub 


String) 






Case ColumnContentType.Image 

subItem.Image = imgCountries.Images(nodeIndex Mod 9) 

Exit Select 

Case Else 


Exit Select 

End Select 

. . . 

End Sub 

[C#] 


{ 



for (int j = 0; j < 2; j++) 

{ 



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

} 

} 

} 

. . . 


break; 



{ 




{ 


} 


{ 

case ColumnContentType.Image: 

subItem.Image = imgCountries.Images[nodeIndex % 9]; 

break; 

} 

. . . 

default: 


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] 


[C#] 


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 in 

each subitem which corresponds to the second column. The changes are marked in Red: 

[VB] 






j.ToString()) 

Select Case j 


Case 1 


Exit Select 


Case 2 

column.ContentType = ColumnContentType.Control 

column.ContentControlVisibility = 

ContentControlVisibility.AlwaysVisible 

Exit Select 

Case Else 



Exit Select 

End Select 


Next 

. . . 

31

End Sub 


String) 








Exit Select 

Case ColumnContentType.Control 

Dim pBar As New ProgressBar() 

pBar.Size = New Size(100, 16) 

progressValue = RandomValue(progressValue) 

pBar.Value = progressValue 

subItem.Control = pBar 

Exit Select 

Case Else 


Exit Select 

End 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#] 


{ 



for (int j = 0; j < 3; j++) 

{ 



switch (j) 

{ 

// Set the second column to show custom controls 

case 1: 


break; 


case 2: 

column.ContentType = ColumnContentType.Control; 


ContentControlVisibility.AlwaysVisible; 

break; 

} 

} 

} 

. . . 


default: 


break; 



{ 




{ 



{ 



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

} 

} 

. . . 


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 the 

control: 

• 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 in 

custom 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) 





j.ToString()) 

Select Case j 


Case 1 


Exit Select 

' Set the third column to show custom controls 

Case 2 

column.ContentType = ColumnContentType.Control 


ContentControlVisibility.AlwaysVisible 

Exit Select 

' Set the fourth column to show custom objects 

Case 3 

column.ContentType = ColumnContentType.[Custom] 


Exit Select 

Case Else 



Exit Select 

End Select 


Next 

. . . 

End Sub 


String) 








Exit Select 

Case ColumnContentType.Control 

Dim pBar As New ProgressBar() 

pBar.Size = New Size(100, 16) 

35

progressValue = RandomValue(progressValue) 

pBar.Value = progressValue 

subItem.Control = pBar 

Exit Select 

Case 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 If 

subItem.Controls.Add(cBox) 

' Set the image index 

Dim imgIndex As Integer = nodeIndex Mod 9 

' Create a custom content 

Dim content As String = "" 

content += "More info" 

content += "" 

content += "" 

' Add the created content to the subitem 

subItem.Content = content 

Exit Select 

Case Else 


Exit Select 

End Select 

. . . 

End Sub 

36

[C#] 


{ 



for (int j = 0; j < 4; j++) 

{ 



switch (j) 

{ 


case 1: 


break; 

// Set the third column to show custom controls 

case 2: 

column.ContentType = ColumnContentType.Control; 


ContentControlVisibility.AlwaysVisible; 

break; 

} 

} 

} 

. . . 

// Set the fourth column to show custom objects 

case 3: 

column.ContentType = ColumnContentType.Custom; 


break; 


default: 


break; 



{ 




{ 



{ 



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 = ""; 

content += "More info"; 

content += ""; 


} 

} 

. . . 

// Add the created content to the subitem 

subItem.Content = content; 

break; 

default: 


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 


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 


• 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"); 


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] 


. . . 

Dim nodes As TreeListViewNode() = New Node(6) {} 


nodes(i) = New TreeListViewNode("Item " & i.ToString()) 

Next 

Me.treeListView1.Nodes.AddRange(nodes) 

[C#] 


. . . 

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 by 

setting the LabelEdit property to True. After that whenever the user clicks on the node and 

releases 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 the 

AfterLabelEdit event. In the following example the edit is allowed only for labels which don’t 

contain some characters: 

[VB] 


. . . 

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 invalid 

characters are: '@','.', ',', '!'", "Node Label Edit") 

node.BeginEdit() 

End If 

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." & vbLf & "The label cannot be 

blank", "Node Label Edit") 

node.BeginEdit() 

End If 

End If 

End If 

End Sub 

[C#] 


. . . 

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 invalid 

characters 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 and 

unchecked) 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 do 

that, 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 the 

nodes, and in this way the CheckedItems collection. In order to prevent this from happening, we 

have 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] 


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 If 

End 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 the 

second 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 the 

SelectionMode 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 or 

MultiExtended 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 the 

node, and in this way the SelectedNodes collection. In order to prevent this from happening, we 

have 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] 


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 the 

second node is selected. But along with this by calling the Clear method, we try to remove all 

44

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 


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, then 

automatically 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 


• 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 specific 

subitem 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 his 

bounds 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 order 

to create your own operation, the DragDropMode must be set to Custom. This case is described 

in 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 color 

of 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.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 If 

End 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 effect 

If (e.KeyState And 8) = 8 AndAlso (e.AllowedEffect And DragDropEffects.Copy) 

= DragDropEffects.Copy Then 

e.Effect = DragDropEffects.Copy 

Else 

e.Effect = DragDropEffects.Move 

End If 

Else 

e.Effect = DragDropEffects.None 

End If 

End Sub 

Private Sub treeListView1_DragDrop(ByVal sender As Object, ByVal e As 


' 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 Then 

node = 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 


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 Then 

targetNode.Parent.Nodes.Insert(newIndex, node) 

Else 

Me.treeListView1.Nodes.Insert(newIndex, node) 

End If 

Else 

48

targetNode.Nodes.Add(node) 

End If 

End If 

' Resume the treelistview layout and update the control 

Me.treeListView1.ResumeUpdate() 

End If 

End 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) Then 

e.Action = DragAction.Cancel 

End If 

End Sub 

[C#] 

using LidorSystems.IntegralUI.Collections; 


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 effect 

if ((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 


{ 

// Get the dragged 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 performance 


// In Copy operation, create a clone node and then add it to the 

target 

if (e.Effect == DragDropEffects.Copy) 

node = 

(LidorSystems.IntegralUI.Lists.TreeListViewNode)node.Clone(); 

// Remove the node from its current parent node collection 

else 

node.Remove(); 

end 

control 

mousePos); 

} 

} 

// If there is no target node, then add the dragged node at the 

if (targetNode == null) 


else 

{ 

// Get the index of the dropped node in target TreeListView 

} 

int newIndex = this.treeListView1.GetDropPos(targetNode, 

if (newIndex >= 0) 

{ 

if (targetNode.Parent != null) 

targetNode.Parent.Nodes.Insert(newIndex, node); 

else 

this.treeListView1.Nodes.Insert(newIndex, node); 

} 

else 

targetNode.Nodes.Add(node); 

// Resume the treelistview layout and update the control 


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 the 

following example is presented how this can be accomplished for selected nodes: 

At first we need to set the SelectionMode to MultiSimple or MultiExtended. 

[VB] 


. . . 

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() 


Me.treeListView1.SelectedNodes 

nodeCollection.Add(node) 

Next 

Me.treeListView1.DoDragDrop(nodeCollection, DragDropEffects.All) 

End If 

End Sub 

Private Sub treeListView1_DragOver(ByVal sender As Object, ByVal e As 


If 

e.Data.GetDataPresent(GetType(LidorSystems.IntegralUI.Lists.Collections.TreeListVi 

ewNodeCollection)) Then 

' Depending od the control key pressed change the drag effect 

If (e.KeyState And 8) = 8 AndAlso (e.AllowedEffect And DragDropEffects.Copy) 

= DragDropEffects.Copy Then 

e.Effect = DragDropEffects.Copy 

Else 


End If 

Else 


End If 

End Sub 

Private Sub treeListView1_DragDrop(ByVal sender As Object, ByVal e As 


' Get the current mouse position 

Dim mousePos As Point = Me.treeListView1.ContentPanel.PointToClient(New 

Point(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 = 


' Suspend the treelistview layout to increase performance 


' Get the collection at which nodes will be added 

If targetNode Is Nothing Then 




nodeCollection 

Me.treeListView1.Nodes.Add(node.Clone()) 

Next 

' In Move operation, it's best to use the while cycle, because when 

moving 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 Then 



node.Remove() 

' Add the node to the TreeListView 


Next 

End If 

Else 

' Get the index of the dropped node in target TreeListView control 

Dim newIndex As Integer = Me.treeListView1.GetDropPos(targetNode, 

mousePos) 







targetNode.Parent.Nodes.Insert(newIndex, node.Clone()) 

Else 

Me.treeListView1.Nodes.Insert(newIndex, node.Clone()) 

End If 

Else 

targetNode.Nodes.Add(node.Clone()) 

End If 

Next 

' In Move operation, it's best to use the while cycle, because when 


' it will alter the source node collection which can cause errors. 

' The best approach is the node bellow. 

ElseIf e.Effect = DragDropEffects.Move Then 



node.Remove() 

' Place the node at correct position 



52

targetNode.Parent.Nodes.Insert(newIndex, node) 

Else 

Me.treeListView1.Nodes.Insert(newIndex, node) 

End If 

Else 

targetNode.Nodes.Add(node) 

End If 

Next 

End If 

End If 

' Resume the treelistview layout and update the control 


End If 

End Sub 

[C#] 


. . . 

private void treeListView1_ItemDrag(object sender, ItemDragEventArgs e) 

{ 

if (e.Button == MouseButtons.Left) 

{ 

LidorSystems.IntegralUI.Lists.Collections.TreeListViewNodeCollection 

nodeCollection = new 

LidorSystems.IntegralUI.Lists.Collections.TreeListViewNodeCollection(); 


this.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 effect 

if ((e.KeyState & 8) == 8 && (e.AllowedEffect & DragDropEffects.Copy) == 

DragDropEffects.Copy) 

e.Effect = DragDropEffects.Copy; 

else 


} 

else 


} 

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.GetDa 

ta(typeof(LidorSystems.IntegralUI.Lists.Collections.TreeListViewNodeCollection)); 

// Get the target node (the one that is currently hovered) 

LidorSystems.IntegralUI.Lists.TreeListViewNode targetNode = 


// Suspend the treelistview layout to increase performance 


// 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 


{ 


nodeCollection) 

this.treeListView1.Nodes.Add(node.Clone()); 

} 

// In Move operation, it's best to use the while cycle, because when 


// it will alter the source node collection which can cause errors. 

// The best approach is the code bellow. 

else if (e.Effect == DragDropEffects.Move) 

{ 



{ 


// Add the node to the TreeListView 


} 

} 

} 

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 


{ 



{ 


{ 


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 when 


// it will alter the source node collection which can cause errors. 

// The best approach is the node bellow. 

else if (e.Effect == DragDropEffects.Move) 

{ 



{ 


} 

} 

} 

} 

} 

// Place the node at correct position 


{ 


targetNode.Parent.Nodes.Insert(newIndex, node); 

else 

this.treeListView1.Nodes.Insert(newIndex, node); 

} 

else 

targetNode.Nodes.Add(node); 

// Resume the treelistview layout and update the control 


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 to 

True. 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 


Then 


Else 


End If 

End Sub 

Private Sub textBox1_DragDrop(ByVal sender As Object, ByVal e As DragEventArgs) 

If 


Then 

' Get the dragged node 

55


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 If 

End Sub 

[C#] 

private void textBox1_DragOver(object sender, DragEventArgs e) 

{ 

if 



else 


} 

private void textBox1_DragDrop(object sender, DragEventArgs e) 

{ 

if 


{ 

// Get the dragged node 


(LidorSystems.IntegralUI.Lists.TreeListViewNode)e.Data.GetData(typeof(LidorSystems 

.IntegralUI.Lists.TreeListViewNode)); 

} 

} 

Sorting 

// Set the Text property of TextBox control to contain the node text 

this.textBox1.Text = node.Text; 

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: 

• Double 

• Integer 

• String 

Additionally, the sorting will only work for those nodes or subitems that have their SortTag set to 

some 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 value 

for (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 used 

comparing 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] 


. . . 

' 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 Integer 

value 


If Me.treeListView1.FlatNodes(i).SubItems.Count > 1 Then 

Me.treeListView1.FlatNodes(i).SubItems(1).SortTag = i 

End If 

Next 

' Change the ComparerObjectType to Integer, so the sorting will be used 


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 


Exit Select 

Case SortOrder.Descending 

Me.treeListView1.Sorting = SortOrder.Ascending 

Exit Select 

Case Else 


Exit Select 

End Select 

End If 

End If 

End Sub 

[C#] 


. . . 

// 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 


{ 

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 used 


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

} 

} 

} 

{ 

} 

Create custom sorting 

case SortOrder.Ascending: 


break; 

case SortOrder.Descending: 

this.treeListView1.Sorting = SortOrder.Ascending; 

break; 

default: 


break; 

To customize the sort order, you must write a class that implements the IComparer interface and 

set 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] 


. . . 

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 random 

date 


If Me.treeListView1.FlatNodes(i).SubItems.Count > 1 Then 

sampleDate = CreateRandomDate(sampleDate) 

Me.treeListView1.FlatNodes(i).SubItems(1).Text = 

sampleDate.ToShortDateString() 

Me.treeListView1.FlatNodes(i).SubItems(1).Tag = sampleDate 

End If 

Next 

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#] 


. . . 

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 date 


{ 

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 = order 

col = 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 = y 

y = 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 If 

60

If col < TryCast(y, TreeListViewNode).SubItems.Count Then 

secondDate = TryCast(y, TreeListViewNode).SubItems(col).Tag 

End If 

End If 

If firstDate IsNot Nothing AndAlso secondDate IsNot Nothing Then 

If firstDate.[GetType]() Is GetType(DateTime) AndAlso secondDate. 

[GetType]() Is GetType(DateTime) Then 

Return DateTime.Compare(DirectCast(firstDate, DateTime), 

DirectCast(secondDate, DateTime)) 

End If 

End If 

Return 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 0; 

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

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 


Exit Select 

Case SortOrder.Descending 

Me.treeListView1.Sorting = SortOrder.Ascending 

Exit Select 

Case Else 


Exit Select 

End Select 

Me.treeListView1.ListItemSorter = New 

CustomItemComparer(Me.treeListView1.Sorting, column.Index) 

End If 

End If 

End 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: 


break; 

case SortOrder.Descending: 

this.treeListView1.Sorting = SortOrder.Ascending; 

break; 

62

} 

default: 


break; 

// Apply the custom sort operation 

this.treeListView1.ListItemSorter = new 

CustomItemComparer(this.treeListView1.Sorting, column.Index); 

} 

} 

} 

Search 

How 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] 


Me.treeListView1.FindNode ("ITM", 

LidorSystems.IntegralUI.Lists.ListSearchCriteria.byKey) 

[C#] 


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 



[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



You can also use the GetHoverNode method: 

[VB] 


Me.treeListView1.GetHoverNode() 

[C#] 


this.treeListView1.GetHoverNode(); 

Keyword search 

There is a built-in search operations by pressing keys. For this behavior, the KeySearchMode 

property 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 in 

searching. 

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 is 

pressed, 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 the 

node 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 

event) 

3. 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 


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 If 

End If 

End If 

End 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" 


Return "1" 


Return "2" 


Return "3" 


Return "4" 


Return "5" 


Return "6" 


Return "7" 


Return "8" 


Return "9" 

Case Keys.Space 

Return " " 

End Select 

Return 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 


this.treeListView1.FindNode(GetAlphaNumValue(e.KeyCode), true, 0, true); 

show 

if (node != null) 

{ 

// Select the found node 

this.treeListView1.SelectedNode = node; 

if (this.treeListView1.IsVScrollVisible()) 

{ 

// If the node is not in visible area, set the scrollbar position to 

// 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: 


return "1"; 

case Keys.D2: 


return "2"; 

case Keys.D3: 


return "3"; 

case Keys.D4: 


return "4"; 

case Keys.D5: 


return "5"; 

case Keys.D6: 


return "6"; 

case Keys.D7: 


return "7"; 

case Keys.D8: 


return "8"; 

case Keys.D9: 


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 by 

using 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 your 

data 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 with 

which you can design the layouts. These templates can be applied to all columns, nodes or 

subitems (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 list 

of supported XML tags is presented in alphabetical order: 

Tag Atribute Description 

 

Defines an anchor with which you can create a link to another 

document 

href The target URL of the link 

id The identifier of the hyperlink 

style An inline style definition 

underlined 

The text is rendered as bold 

Determines whether the link text is underlined. Default value is 

true. 

id The identifier of the text enclosed with this tag 


inserts a single line break 

Defines a custom control 

height Sets the height of a control 

index Specifies the position of the control in a collection 


width Sets the width of a control 

Defines the main section of the content 


specifies the font of text 

color Defines the color of the text 

face Defines the font name of the text 


size Defines the size of the text 


69

The text is rendered as italic 



Defines an image 

assemblypath Specifies the path of an assembly used as a resource file 

height 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 assembly 

src The URL of the image to display 


width Sets the width of an image 

Defines a new section (paragraph) in the content 

indent 

Specifies a space (in pixels) by which paragraph’s content is 

moved to the right 


defines a table 

cellpadding Specifies the space between the table cell border and content 

cellspacing Specifies the space between table cells 


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

Defines a cell in a table 

align Specifies the horizontal alignment of cell content 

colspan Indicates the number of columns this cell should span 

height 

Specifies the height of the table cell. Can be specified in % or 

pixels. 

rowspan Indicates the number of rows this cell should span 


valign Specifies the vertical alignment of cell content 

width 

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

pixels. 

Defines a new section (paragraph) in the content 

align Specifies the horizontal alignment of cell content 

height 

Specifies the height of the table row. Can be specified in % or 

pixels. 


valign Specifies the vertical alignment of cell content 

Defines regular text 



Defines strikethrough text 


70


Defines a style used for rendering and formatting of the 

content 

align Specifies the content alignment 

backcolor Specifies the color of the object background 

backfadecolor Specifies the fading color of the object background 

bordercolor Specifies the color of the object border 

fillstyle Specifies the type of gradient fill of the object background 

font Specifies the color of the text 

hovercolor 

hoverfadecolor 

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 

hovertextcolor Specifies the color of the text while mouse cursor hovers over it 

id The identifier of the style 

margin Defines the space around an object’s border 

padding 

Defines the space between the border and the content of an 

object 

rendering Specifies the rendering mode for text 

selectedtextcolor Specifies the color of the text when it is selected 

textcolor Specifies the color of the text 

transparency Specifies the percentage of transparency 

defines underlined text 



In the following section we will present you how to use these tags in various combinations. As a 

result there would be created custom layouts for node’s content. 

Working with containers: and tags 

The simplest form of formatted content is constructed by using the tag and sample text. 

Here is an example: 

[VB] 

' Column 

column.HeaderContent = "First header line" 

column.FooterContent = "First footer line" 

' Node 

node.Content = "Single text line" 

[C#] 

// Column 

column.HeaderContent = "First header line"; 

column.FooterContent = "First footer line"; 

71

Node 

node.Content = "Single text line"; 

In some cases you want to display text in multiple lines or in different paragraphs. For this 

situation the tag is used. Here is an example: 

[VB] 

' Column 

column.HeaderContent = "An example of a little longer header 

description" 

column.FooterContent = "An example of a little longer footer 

description" 

' Node 

node.Content = "An example of text in two paragraphs:The first paragraph has an indent set to 20 pixels. In this way the 

contained text is moved from the left border.The second paragraph shows 

short text line." 

[C#] 

// Column 

column.HeaderContent = "An example of a little longer header 

description"; 

column.FooterContent = "An example of a little longer footer 

description"; 

// Node 

node.Content = "An example of text in two paragraphs:The first paragraph has an indent set to 20 pixels. In this way the 

contained text is moved from the left border.The second paragraph shows 

short text line."; 

The result is shown in following pictures: 

From the pictures you can also notice that the text is wrapped in multiple lines when words are 

reaching the end of the node content space. This happens because the WordWrap property by 

default 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 = "First subitem" 

node.SubItems.Add(subItem) 

subItem = new TreeListViewSubItem() 

subItem.Content = "Second subitem" 


this.treeListView1.UpdateLayout() 

[C#] 

// At first set the type of column content to accept XML tags 

this.treeListView1.Columns[0].ContentType = ColumnContentType.Custom; 


// SubItems 


subItem.Content = "First subitem"; 

node.SubItems.Add(subItem); 


subItem.Content = "Second subitem"; 



The code for the result in second picture is: 

[VB] 


Me.treeListView1.Columns(0).ContentType = ColumnContentType.[Custom] 


' SubItems 

Dim subItem As New TreeListViewSubItem() 

subItem.Content = "First subitem:The paragraph has 

an indent of 20 pixels.A short text line." 



subItem.Content = "Second subitem:The paragraph has 




[C#] 


73



// SubItems 



an indent of 20 pixels.A short text line."; 







By default the WordWrap property for subitems is set to False. Because of this you can see that 

text is not wrapped in multiple lines when words are reaching the end of the subitem space. If we 

change this property value to true, the result is different 

[VB] 




' SubItems 




subItem.WordWrap = True 








74

[C#] 




// SubItems 




subItem.WordWrap = true; 








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

document. 

Working with 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 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] 



' SubItems 


subItem.Content = "Header:Comic Sans MS 

75

font with text in green color" 


Me.treeListView1.SelectedNode.SubItems.Add(subItem) 


[C#] 



// SubItems 


subItem.Content = "Header:Comic Sans MS 

font with text in green color"; 


this.treeListView1.SelectedNode.SubItems.Add(subItem); 


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 , , and . With these tags you can change the style of 

font for some part or whole text. Here is an example: 

[VB] 

node.Content = "Simple text line containing Bold, Italic, 

strikethrough and underline text." 


[C#] 

node.Content = "Simple text line containing Bold, Italic, 

strikethrough and underline text."; 


76


One of objects that you can create in content is a hyperlink object. The link you are entering can 

be 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] 




' SubItems 


subItem.Content = "Search portal" 




subItem.Content = "Our company home page Lidor Systems" 




[C#] 




// SubItems 


subItem.Content = "Search portal"; 

77




subItem.Content = "Our company home page Lidor Systems"; 




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 for 

the object to which this style is applied. See below for more information how to use styles. 


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 = " Content created with two images at different locations." 

' An example how to create content with two images located in ImageList 

referenced by TreeListView control 

Me.treeListView1.Columns(0).FooterContent = " Content 

created with two images . Images are contained in 

ImageList." 

Me.treeListView1.Columns(0).WordWrap = True 

78


[C#] 

// Column 

// An example how to create content with two images located on local hard disk 

this.treeListView1.Columns[0].HeaderContent = " Content created with two images at different locations."; 

// An example how to create content with two images located in ImageList 

referenced by TreeListView control 

this.treeListView1.Columns[0].FooterContent = " 

Content created with two images . Images are contained in 

ImageList."; 

this.treeListView1.Columns[0].WordWrap = true; 


By default the images have their original size. You can change their size by setting the width and 

height attributes of the tag. Also you can apply margin and padding attributes by setting 

the style attribute values (see below how to use styles). 


With text, images and hyperlinks you can create very rich content. However, placing custom 

controls will give more interaction to the user. 

The 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] 



' SubItem 


79

' At first the control must be created and added to 

' the subitem Controls collection 




' In tag use the index to reference the control 

subItem.Content = "Content with custom control. " 



[C#] 



// SubItem 


// At first the control must be created and added to 

// the subitem Controls collection 




// In tag use the index to reference the control 

subItem.Content = "Content with custom control. "; 



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 the 

content space, for example. 

This can be done by using table formatting which is explained in next section. 

80

Working with , and tags 

The best way to create custom layouts with different objects placed at different locations in the 

content is by using table formatting. 

One of the reasons the table is used is presentation of data in ordered way for all nodes. In the 

following example we will show you how to place a text, hyperlink and custom control in a content 

using tag: 

[VB] 



' SubItem 

Dim subItem As New TreeListViewSubItem("Subitem") 









subItem.Content = "Simple 

text lineMore info" 



[C#] 



// SubItem 

TreeListViewSubItem subItem = new TreeListViewSubItem("Subitem"); 









subItem.Content = "Simple 

text lineMore info"; 



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 each 

table cell. If the width is not specified the table cell will have width of the object with minimal 

width. 

[VB] 



' SubItem 










subItem.Content = "Simple text lineMore info 

" 




[C#] 



// SubItem 






82





subItem.Content = "Simple text lineMore info 

"; 




The change is obvious. By specifying the width of table cell in percents we have achieved the cell 

to shrink or expand depending of the current width of the subitem content. For the last cell the 

width 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] 



' SubItem 









' Use a temprary variable for storing large string 


' Add the first row with four cells 

content += "First line

style=""textcolor:Blue"">More info" 

' Add the second row and span the cell over three other cells 

content += "Second text line which is a little longer." 

' Close the table and div tags 

content += "" 

' Add the content string to the subItem Content property 





[C#] 



// SubItem 









// Use a temprary variable for storing large string 


// Add the first row with four cells 

content += "First lineMore info"; 

// Add the second row and span the cell over three other cells 

content += "Second text line which is a little longer."; 

// Close the table and div tags 


// Add the content string to the subItem Content property 





The first cell is spanned across two rows. The second cell of the second row is spanned across 

three columns. The result is shown in following picture: 

84


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 can 

use inline coding to apply specific style to some part of the content. 

Here is how to create styles at beginning of the code: 

[VB] 



content += "" 

content += "" 

content += "The first text line in red." 

content += "The second in blue, with parts 

in green." 

content += "" 




[C#] 





content += "The first text line in red."; 

content += "The second in blue, with parts 

in green."; 




85


Here is how to use inline style definition: 

[VB] 



content += "The first text line in 

red." 

content += "The second in blue, 

with parts in 

green." 

content += "" 




[C#] 



content += "The first text line in 

red."; 

content += "The second in blue, 

with parts in 

green."; 





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 for 

content 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 that 

whenever some object reach the end of the line, if there is not enough space for the object to be 

placed at the line end, it will be placed in beginning of a new line. In this way by changing the 

width 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 and 

subitems 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 node 

layout 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 to 

have, 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) 


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

{ 

} 


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 



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 



Dim fs As FileStream = File.Create("C:\fs.xml") 

serializer.SaveToStream(Me.treeListView1, fs, True) 

End Sub 

[C#] 


. . . 

// Click on the btnLoad button to load the content of FileStream object 

// to TreeListView control 


{ 


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 


{ 


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 file 


Dim openDlg As New OpenFileDialog() 

openDlg.Filter = "XML files (*.xml)|*.xml" 

openDlg.InitialDirectory = Application.ExecutablePath 

If openDlg.ShowDialog() = DialogResult.OK Then 


Dim serializer As New 

LidorSystems.IntregralUI.Serialization.TreeListViewSerializer() 

serializer.LoadFromXml(Me.treeListView1, openDlg.FileName) 


End If 

End Sub 

' Click on the btnSave button to open the Save dialog, by which you can 

' choose the destination of the file 


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 If 

End Sub 

[C#] 


. . . 

// Click on the btnLoad button to open the Load dialog, by which you can 

// choose the destination of the file 


{ 

OpenFileDialog openDlg = new OpenFileDialog(); 

openDlg.Filter = "XML files (*.xml)|*.xml"; 

openDlg.InitialDirectory = Application.ExecutablePath; 

if (openDlg.ShowDialog() == DialogResult.OK) 

{ 


LidorSystems.IntregralUI.Serialization.TreeListViewSerializer serializer = 

new LidorSystems.IntregralUI.Serialization.TreeListViewSerializer(); 

90

} 

} 

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


// Click on the btnSave button to open the Save dialog, by which you can 

// choose the destination of the file 


{ 

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 in 

your 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 as 

using 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 = "" 

' 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 = ""; 

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] 


memStream.Seek(0, SeekOrigin.Begin) 

serializer.LoadFromStream(Me.treeListView1, memStream) 

[C#] 


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 of 

sample projects available on our web site: 

Explorer 

Demonstrates how IntegralUI TreeListViewcontrol can be used to 

create 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 of 

column and node text. 

Custom Controls 

Demonstrates how custom controls can be included in IntegralUI 

TreeListView. Data is presented in advanced detail view with fixed 

columns to the left and right side, with several types of custom 

controls. Three visual styles (Classic, XP, Vista) are available. 

93

IntegralUI TreeListView User Guide - Lidor Systems

Create successful ePaper yourself

Delete template?

Save as template?