TWebTreeview

Description

Below is a list of the most important properties methods and events for TWebTreeview. TWebTreeview is similar to a VCL TTreeview.


Designtime	Runtime

HTML template tag

The HTML tag the component can be associated with in an HTML template. Assign the ID attribute with a unique value and set the identical value to the ElementID property. Detailed information can be found in the Use of HTML templates topic.

HTML tag	<DIV ID=”UniqueID”></DIV>
ElementID	UniqueID

Properties for TWebTreeview

Property	Description
AutoExpand	When true, a click on a node will select the node but also expand the child nodes.
ElementClassName	Optionally sets the CSS classname for the label when styling via CSS is used
ElementID	Optionally sets the HTML element `ID` for a HTML element in the form HTML file the label needs to be connected with. When connected, no new label is created but the Delphi class is connected with the existing HTML element in the form HTML file
ElementNodeClassName	Optionally sets the CSS classname for the node `SPAN` element that is used for each node
ElementNodeSelectedClassName	Optionally sets the CSS classname for the node `SPAN` element that is used for each node when it is in selected state
Items	Hierarchical collection of nodes in the treeview. The interface to access nodes is similar to a the VCL nodes collection.
Selected	Gets or sets the selected `TTreeNode` in the treeview.
TopItem	Gets or sets the first visible `TTreeNode` in the treeview.

Methods for TWebTreeview

Property	Description
GetNodeElement	Gets the HTML element that is the container for the `TTreeNode`.
GetNodeFromID	Gets the `TTreeNode` from the `ID` of the HTML element.
FullCollapse	Sets all nodes in the treeview in collapsed state.
FullExpand	Sets all nodes in the treeview in expanded state.
Select(const ANode: TTreeNode);	Sets the specified node as selected node.

Events for TWebTreeview

Property	Description
OnChange	Event triggered when the selected node in the treeview changed
OnChanging	Event triggered when the selected node in the treeview is about to change. The `Allow` parameter can be used to control if the selected node can change
OnClick	Event triggered when the control is clicked.
OnClickCheckBox	Event triggered when checkbox for node is clicked.
OnClickNode	Event triggered when a `TTreeNode` is clicked.
OnCollapsed	Event triggered when a node was collapsed.
OnCollapsing	Event triggered when a node is about to be collapsed. The `Allow` parameter can be used to control whether the node can be collapsed.
OnDblClick	Event triggered when the control is double-clicked.
OnDblClickNode	Event triggered when a `TTreeNode` is double-clicked.
OnExpanded	Event triggered when a node was expanded.
OnExpanding	Event triggered when a node is about to be expanded. The `Allow` parameter can be used to control whether the node can be expanded.
OnCollapsed	Event triggered when a node was collapsed.
OnRenderNode	Event triggered when a node is about to be rendered. This returns a reference the HTML element that is the container for the node and allows further customization of the node.

Sample code

This code snippet shows how to programmatically add items to the treeview (very similar as with a VCL TTreeView)

var
  tn: TTreeNode;
begin
  WebTreeView1.BeginUpdate;

  tn := WebTreeView1.Items.Add('Root node 1');
  WebTreeView1.Items.AddChild(tn,'Child node 1');
  WebTreeView1.Items.AddChild(tn,'Child node 2');

  tn := WebTreeView1.Items.Add('Root node 2');
  WebTreeView1.Items.AddChild(tn,'Child node 1');
  WebTreeView1.Items.AddChild(tn,'Child node 2');

  WebTreeView1.EndUpdate;
end;

It is also possible to insert a checkbox or a radiobutton along with a node. To set the type of the node, the property TTreeNode.NodeType can be used. This sample code snippet shows how to create a TreeView with 2 main nodes and one main node with checkboxes for the child nodes and the other radiobuttons that behave as a radiogroup.

var
  mn,sn: TTreeNode;
begin
webtreeview1.BeginUpdate;
  mn := webtreeview1.Items.Add('Main check node');
  sn := webtreeview1.Items.AddChild(mn,'Child node 1');
  sn.NodeType := ntCheckbox;

  sn := webtreeview1.Items.AddChild(mn,'Child node 2');
  sn.NodeType := ntCheckbox;
  mn := webtreeview1.Items.Add('Main radio node');
  sn := webtreeview1.Items.AddChild(mn,'Child node 1');
  sn.NodeType := ntRadioButton;
  sn := webtreeview1.Items.AddChild(mn,'Child node 2');
  sn.NodeType := ntRadioButton;
  webtreeview1.EndUpdate;
end;

The result in the browser is: