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.

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:

• NodeTextBox – displays text data;
• ExpandableTextBox – allows you to show only a title text when node is not focused and the title text plus description text when node is focused or under the mouse cursor (when the soft selection is enabled). That allows you to not overload the treeview with information, to be intuitive and understandable, while at the same time to provide more information on the selected node;
• ExpandablePanel – identical to the ExpandableTextBox, but it allows you to display a custom content in the expandable area in an impressive and very professional way;
• NodeImage – displays an image. Allows you to show cute eye-catching image animation;
• NodeNumeric – displays numeric values;
• NodeComboBox – allows to select one item from the list;
• NodeCheckBox – displays the check box or radio button;
• NodeLink – allows you to insert a clickable hyperlink;
• NodePaintBox — allows you to paint any custom content in the node;
• NodePopupContainer – allows you to show any custom content or control in the popup. The treeview stays clear and understandable while informative for separate nodes;
• NodeColorPicker – allows you to select a color or color gradient using the Office2007 style color picker;
• NodeControlContainer – allows you to host any custom control inside a node;
• NodeExpandableControlContainer – allows you to host any custom control in the expandable area of an expandable node control;
• NodeSeparator - allows you to show a nice looking horizontal line to divide two nodes.

Data binding

To display data inside a node control, you need to bind that node control to the appropriate data. See the 'Node controls. 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 radio button: node.CheckType = eCheckType.RadioButton;
node.AttachTo(tree);

Control the 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.

ContentAlign

Generally, every node control is equal in size to its 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 grabbed area using the ContentAlign property.

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

Find a node control in the treeview

To find a node control in the treeview, use these methods:

• Treeview.GetNodeControlAt – allows you to find a node control at the specified location.

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

• SupportHtml - defines whether the node control can display HTML text. Not supported by all node controls;
• TextWrapMode - defines whether the node control auto–wraps a text when it exceeds the treeview or column bounds. Not supported by all node controls;
• Cursor - defines the mouse cursor for the node control;

Methods

• GetValue - get the bound node member`s value. Protected method that`s accessible to inherited node control classes;
• GetValue<T>/GetValueAsString - get the bound node member`s typed value. Protected method that`s accessible to inherited node control classes;
• GetFont - get text font according to the specified node and context. You can use it to display text in your own custom-designed node controls, etc;
• GetTextColor - get text color according to the specified node and context. You can use it to display text in your own custom-designed node controls, etc;
• GetBounds - get the node control`s bounds rectangle;
• AttachToColumn - binds the node control to a column where it will be displayed;
• AttachTo - binds the node control to a treeview where it will be displayed.

• •