Home/Trees

Trees are interface components which enable users to view and edit hierarchical data structures. Try out the experiments shown in the operational form below. Use the experiment selector (bar) to test how trees work for yourself.

Node loading Click on the nodes Controlled expansion Drag & Drop Multi selection Node selection

Initialize framework...

Node loading: the hierarchical structures displayed in this tree may be very large as nodes are loaded only when a node is expanded for the first time. Try expanding and closing a given node a number of times: delay will be noticeable only on the initial run. Click here to go to the next experiment.

Click on the nodes: the tree sends a number of event notifications to the form where it is contained, including a click on a node allowing to display the category, product and order data. Click here to see the event documentation OnActivateNode and OnActivateDoc, or click here to go to the next experiment.

Code-controlled expansion: the tree model enables users to command node expansion at various levels. For instance, click here to bring the tree back to its original structure and expand the first category. Click here to go to the next experiment.

Drag & Drop: the tree can support drag & drop, e.g. users can shift a product from category one to category two. A notification for the drop event is sent to the form and users will be able to operate it as they wish. Click here to see the event documentation OnDropNote and OnDropDoc or click here to go to the next experiment.

Multi selection: the tree supports multi selection as well. Click here to enable or disable multi selection in the tree in question. Select one or more nodes and the total count of those selected will be displayed in the bar of the application heading. You can also select what nodes can or cannot be selected, i.e. be assigned a check-box. Click here to go to the next experiment.

Node selection: nodes can be selected and enabled via the tree properties. For instance, click here to select the "Chang" product. The tree will be expanded and repositioned to retrieve the selected node and display it on the screen.