Flexible TreeView 5.1.9 Help
Node controls. Get started

Node control is a minimal building block of the treeview. This is an area within a node, where it displays and edits one node class member's data or dynamic (virtual) data.

 

Your treeview can contain unlimited node controls count for viewing and editing data.
Please note that every node will show all node controls you've added to the treeview, but you can dynamically or statically hide any node control for any node using node control filtration!
The treeview holds all node controls in the NodeControls property, so to show any data, you need to add particular node controls using Visual Studio designer or programmatically.

Flexible TreeView provides these built-in node controls to display and manage different types of data:

 

 

Data binding


To display data inside a node control, you need to bind that node control to the appropriate data. See the 'Data binding' article for details.

 

 

Create node control


You can add node control in the Visual Studio designer of the NodeControls property:

 

or programmatically:

NodeCheckBox ctrl = new NodeCheckBox();
// bind the node control to the Node.CheckState property.
// Note that the NodeCheckBox node control is bound to that property by default so you don't need this line apparently.
ctrl.DataFieldName = "CheckState";
 
// show this node control within the targetColumn column (for treeviews with columns only).
ctrl.ColumnId = targetColumn.Id;     // or ctrl.AttachToColumn(targetColumn);
tree.NodeControls.Add(ctrl);
 
// add node.
Node node = new Node("Test node");
// NodeCheckBox shown checked for this node.
node.CheckState = eCheckState.Checked;
// set check type: check box.
node.CheckType = eCheckType.CheckBox;
// or for radio button:
// node.CheckType = eCheckType.RadioButton;
node.AttachTo(tree);
Dim ctrl As New NodeCheckBox()
' bind the node control to the Node.CheckState property.
' Note that the NodeCheckBox node control is bound to that property by default so you don't need this line apparently.
ctrl.DataFieldName = "CheckState"

' show this node control within the targetColumn column (for treeviews with columns only).
ctrl.ColumnId = targetColumn.Id
' or ctrl.AttachToColumn(targetColumn);
tree.NodeControls.Add(ctrl)

' add node.
Dim node As New Node("Test node")
' NodeCheckBox shown checked for this node.
node.CheckState = eCheckState.Checked
' set check type: check box.
node.CheckType = eCheckType.CheckBox
' or for radio button:
' node.CheckType = eCheckType.RadioButton;
node.AttachTo(tree)



Node control visibility


Flexible TreeView allows to flexibly control the node control visibility. See this topic for details.

 

 

FillFreeSpace


By default, a node control fills an area equal to the size of the data it shows, but often you need to use all of a column's or treeview's width to display data. To do that, enable the FillFreeSpace property and node control will fill all the available space to display data.
You may need this mode to center or right align a node control horizontally (within a column or treeview) by using the ContentAlign property, etc.

Note that when the FillFreeSpace property is enabled, all node controls after that one will be invisible.



ContentAlign


Generally, every node control bounds are equal in size to the node control content. But, sometimes you can force the node control to grab a bigger area than its content required (for instance, by enabling the FillFreeSpace property). In this case, you have the ability to align the node control within that wider grabbed area using the ContentAlign property.
For example, below we will tell the NodeButton node control to grab all the remain column space and align its content to the middle-right side.

NodeTextBox tb = new NodeTextBox();
tb.DataFieldName = "Text";
tb.AttachTo(tree);
tb.AttachToColumn(column1);
 
NodeButton btn = new NodeButton();
btn.StaticValue = "View details";
btn.FillFreeSpace = true;
btn.ContentAlign = ContentAlignment.MiddleCenter;
btn.AttachTo(tree);
btn.AttachToColumn(column1);
 
Node node = new Node();
node.Text = "Order #003492";
node.AttachTo(tree);
Dim tb As New NodeTextBox()
tb.DataFieldName = "Text"
tb.AttachTo(tree)
tb.AttachToColumn(column1)

Dim btn As New NodeButton()
btn.StaticValue = "View details"
btn.FillFreeSpace = True
btn.ContentAlign = ContentAlignment.MiddleCenter
btn.AttachTo(tree)
btn.AttachToColumn(column1)

Dim node As New Node()
node.Text = "Order #003492"
node.AttachTo(tree)

Particularly, the node control content may be aligned in different ways as shown on the sample image below where a button (NodeButton node control is used) is differently aligned.

 

 

Padding


By default, all node controls stick together when shown in the node. To improve usability, you can set a gap size in pixels for every node control's border using the Padding property.

 

 

ExcludeFromSelection


Flexible TreeView highlights every node control in a selected node according to the Options.Selection.HighlightMode settings.

If you want to fine-tune the selected node's appearance and exclude a node control from this highlighted area, enable the ExcludeFromSelection property for that node control.

 

 

StaticValue


A node control's content can be retrieved from a node class instance or generated dynamically, but sometimes there's a needs just to show some static content without binding it to a node. To do that, set a static data to show in the StaticValue node control property and you won't need to store it in every node.

 

 

Virtual data mode


Many node controls support virtual data binding, when a node control doesn't bind to a node property. Every time it needs data to display, the treeview raises the NodeControlValueGet and NodeControlValueSet events. In these events you need to supply or save data stored somewhere (database, file, network, etc.), so you don't need to store these data in the node.
To enable virtual mode, enable the VirtualMode node control property and subscribe to NodeControlValueGet and NodeControlValueSet treeview events as stated below.

// node control class's member to show virtual data.
private NodeTextBox textBox;
// virtual data storage.
private string nodeText;
 
// create the node control to show virtual data.
textBox = new NodeTextBox();
// enable virtual mode to request data through the NodeControlValueGet event.
textBox.VirtualMode = true;
// allow data edit to store text changes through the NodeControlValueSet event.
textBox.Editable = true;
textBox.AttachTo(tree);
 
Node node = new Node();
// default node title.
nodeText = "Node title";
node.AttachTo(tree);
 
// subscribe to events to provide/save data.
tree.NodeControlValueGet += tree_NodeControlValueGet;
tree.NodeControlValueSet += tree_NodeControlValueSet;
 
bool tree_NodeControlValueGet(FlexibleTreeView pTreeview, NodeControlValueEventArgs pArgs)
{
  // provide data for our text box.
  if (pArgs.NodeControl == textBox)
  {
    pArgs.Value = nodeText;
    return true;
  }
  return false;
}
 
void tree_NodeControlValueSet(FlexibleTreeView pTreeview, NodeControlValueEventArgs pArgs)
{
  // save data changes.
  if (pArgs.NodeControl == textBox)
  {
    nodeText = pArgs.Value as string;
  }
}
' node control class's member to show virtual data.
Private textBox As NodeTextBox
' virtual data storage.
Private nodeText As String

' create the node control to show virtual data.
textBox = New NodeTextBox()
' enable virtual mode to request data through the NodeControlValueGet event.
textBox.VirtualMode = True
' allow data edit to store text changes through the NodeControlValueSet event.
textBox.Editable = True
textBox.AttachTo(tree)

Dim node As New Node()
' default node title.
nodeText = "Node title"
node.AttachTo(tree)
' subscribe to events to provide/save data.
tree.NodeControlValueGet += tree_NodeControlValueGet
tree.NodeControlValueSet += tree_NodeControlValueSet

Private Function tree_NodeControlValueGet(pTreeview As FlexibleTreeView, pArgs As NodeControlValueEventArgs) As Boolean
    ' provide data for our text box.
    If pArgs.NodeControl = textBox Then
        pArgs.Value = nodeText
        Return True
    End If
    Return False
End Function
Private Sub tree_NodeControlValueSet(pTreeview As FlexibleTreeView, pArgs As NodeControlValueEventArgs)
    ' save data changes.
    If pArgs.NodeControl = textBox Then
        nodeText = TryCast(pArgs.Value, String)
    End If
End Sub



Find node control


To find a node control in the treeview the GetNodeControlAt treeview method can be used. It expects, as an input parameter, the node where to search for node controls and the node control location within this node.

 

 

Customize node control text format


Node control allows you to flexibly customize the text format and appearance. See this topic for details.

 

 

Sortable


If you want that treeview to use a node control's content on sorting, enable the Sortable node control property (enabled by default).

 

 

Additional API reference

Properties:

Methods:

 

 


Copyright © 2006-2016 ARMSoft

www.FlexibleTreeView.com