Table of Contents

Tree view

Renders a tree view.

Node name : tree-view

Attributes

Attribute Type Required Default value Description
source object[] true Source of the tree view.
caption-property string false Name of the property to be bound corresponding to the caption.
icon-property string false Name of the property to be bound corresponding to the icon.
children-property string false Name of the property to be bound corresponding to the child nodes.
loading-property string false Name of the property to be bound indicating whether the node is loading.
loaded-property string false Name of the property to be bound indicating whether the node is loaded.
selected-property string false Name of the property to be bound indicating whether the node is selected.
expanded-property string false Name of the property to be bound indicating whether the node is expanded.
visible-property string false Name of the property to be bound indicating whether the node is visible.
draggable-property string false Name of the property to be bound indicating whether the node is draggable. See the drag and drop section.
node-load string false Name of the method called when a node is expanded for the first. It can be useful when the tree source is not complete. Among other things, it allows you to perform lazy loading on the children of the nodes in your tree.
node-expand string false Name of the method called when a node is expanded. The node-click method is not called when the user presses the expansion arrow.
node-collapse string false Name of the method called when a node is collapsed. The node-click method is not called when the user presses the collapsed arrow.
node-click string false Name of the method called when a node is clicked
node-dragover string false Name of the method called when a node is dragged over another node. See the drag and drop section.
node-drop string false Name of the method called when a node is dropped. See the drag and drop section.
Note

In the node-load, node-expand, node-collapse and node-click methods, the node is passed as the first parameter of the method.

Note

The node-load method is called before the node-expand method.

Example

<tree-view
  source="@Fields.Nodes"
  caption-property="Caption"
  icon-property="Icon"
  children-property="Children"
  loading-property="Loading"
  loaded-property="Loaded"
  selected-property="Selected"
  expanded-property="Expanded"
  visible-property="Visible"
  draggable-property="Draggable"
  node-load="NodeLoad"
  node-expand="NodeExpand"
  node-collapse="NodeCollapse"
  node-click="NodeClick"
  node-dragover="NodeDragover"
  node-drop="NodeDrop" />

In this example, the tree view is bound to the Nodes field of the current UI view. The type of the source must be an enumerable of the type of the items bound to the nodes. All the properties xxx-property are bound to the corresponding properties of the items.

Add a header

It's possible to add a header to the tree view by using the tree-view-header node. The header can contain any component.

Example

<tree-view [...]>
  <tree-view-header>
    <button type="action" action-name="AddRootProductFamily" />
  </tree-view-header>
</tree-view>

Redefine the node template

It's possible to redefine the node template by using the tree-view-node node.

To use the template item which is the current node, use the variable $Item. Also, you can set an alias for the template item by setting the attribute item on the tree-view-node node.

In the template, if an attribute expects a method, the template context will be passed as the first parameter of the method.

Examples

Without alias

<tree-view [...]>
  <tree-view-node>
    <text>$Item.Caption</text>
  </tree-view-node>
</tree-view>

With alias

<tree-view [...]>
  <tree-view-node item="Node">
    <text>$Node.Caption</text>
  </tree-view-node>
</tree-view>

With method button

<tree-view [...]>
  <tree-view-node item="Node">
    <if condition="$Node.Selected">
      <text>$Node.Caption</text>
      <button type="method" method-name="AddProductFamilyAsync" variant="ghost">
        <image name="add" style:color="positive-500" />
      </button>
    </if>
    <else>
      <text>$Node.Caption</text>
    </else>
  </tree-view-node>
</tree-view>

The method AddProductFamilyAsync will have a first parameter of type YourRootNamespace.Application.Abstractions.DataObjects.ProductFamilyTreeNode?.

Drag and drop

To enable drag & drop, these two attributes must be filled in: draggable-property and node-drop.

The property you specify in the draggable-property attribute will indicate whether the node is draggable or not. For example, if you set IsCustomer, the component will look at the value of property IsCustomer on the item bound to the node to determine whether it can be dragged.

The method you assign to the node-drop attribute is executed when a dragged node is dropped. The method takes as parameter an object of type ITreeViewDragEventArgs<T> (where T is the type of item bound to the node) and returns void. The method must be synchronous.

By default, a dragged node can be dropped anywhere in the tree view. If you want to condition the drop, you need to specify a method to the node-dragover attribute. The method takes as its parameter an object of type ITreeViewDragEventArgs<T> (where T is the type of item bound to the node) and must return a boolean indicating whether the dragged node can be dropped. The method must be synchronous.

In the arguments of type ITreeViewDragEventArgs<T>, you'll find the following properties:

  • DraggedNode (T) : The dragged node.
  • ParentNode (T?) : The parent node of the dragged node. null means the dragged node is at the root level.
  • NewIndex (int) : The index where the dragged node is being dropped.
  • NewParentNode (T?) : The parent node where the dragged node is being dropped. null means the node is being dropped at the root level.

Binding

To bind data to the tree view you can either use a field/computed which will be a list of data object or directly the datasource of the UI view.

Data object

To illustrate the use of the data object as the source of the tree view, let take an example with a product families tree view.

First, we need to create a data object named ProductFamilyTreeNode with the following properties:

  • Caption : The caption of the product family.
  • Icon : The icon of the product family.
  • Children : The children of the product family. This list will be of the same type as the current data object.
  • Loaded : Indicates whether the children of the product family are loaded.
  • Selected : Indicates whether the product family is selected.
  • Expanded : Indicates whether the product family is expanded.
  • Visible : Indicates whether the product family is visible.
  • Draggable : Indicates whether the product family is draggable.

This properties are optional. You just need to create the properties you need in the tree view. The type of the properties must be the same as the type of the tree view attributes.

Then, we need to create a field in the UI view. This field will be of type System.Collections.Generic.List<ProductFamilyTreeNode>.

Finally, we need to init the field when you need it. Here are a few examples to fill in the field:

  • in the Initialize event of the UI view by a server method
  • in the Retrieved event of the UI view by a conversion of the datasource Datasource.Select(e => new ProductFamilyTreeNode { ... });). Be careful: with this method, it is important to use events linked to the modification of the datasource to update the field (addition, deletion, modification) if you want to keep the tree view up to date.

Datasource

A link between a tree view and a datasource is useful when the UI view elements can be presented in tree view. This involves having a tree view that is updated according to the data in the datasource.

To ensure the tree view state (such as node selection, expansion, etc.) is preserved in the datasource, the model must include the tree view properties (Selected, Loaded, Expanded). This requires creating unbound UI view properties. You need to keep in mind that unbound properties need to be initialized at each retrieval.