Getting Started

• Aug 02, 2022
• 4 minutes to read

Upon the installation of the ExpressOrgChart package, your component palette will include an ExpressOrgCharts page with two components:

TdxOrgChart: Non-Data Aware version of the ExpressOrgChart.

TdxDbOrgChart: Data Aware version of the ExpressOrgChart.

Using the non-data aware version of ExpressOrgChart

1. Drop a TdxOrgChart component onto a form.

2. If you wish to associate images with individual chart nodes, drop a standard ImageList component onto the form and add all required images using the Image List Editor.

3. Using the Object Inspector, determine individual properties such as Alignment, Border Style, Color, etc. If tree nodes are dynamically created in the process of program work, then TdxOrgChart is ready for use.

4. To create a data structure at design-time, call the component editor by double clicking the TdxOrgChart component or right click within the component and select the Items Editor menu item to activate the Items Editor dialog window.

5. Using the Org Chart Item Editor window, you can begin to build the hierarchy and layout of the chart.

A. To insert a new node, press the Insert New Item command button.

B. To insert a sub node, first select the parent node to which the new sub node will belong then press the Insert New Sub Item command button.

C. To delete a node, first select it using your mouse then press the Delete Item command button.

D. If your node structure exceeds the boundaries of the chart client area, press the Zoom command button to resize it within the Org Chart Item Editor window.

E. To change the rotation of the chart by a 90 degree angle, use the rotate on/off command button.

F. To set the properties of individual nodes within the chart, use the Item Properties pane of the Item Editor. Once you have determined the properties of an individual parent node, you can copy the “template” to all children by pressing the Set Properties for all children command button located in the lower right portion of the Item Editor window.

G. Using Drag and Drop, you can reorganize the chart nodes as your need require.

H. Set additional properties of the OrgChart using the Object Inspector.

I. Press the OK command button to commit your changes and return to the application form.

Using the data aware version of ExpressOrgChart

The data-aware version of the ExpressOrgChart is suited for self-referenced tree structures. In general terms, in order to use the TdxDbOrgChart, developers must assign a KeyField, ParentField, and a Text Field.

Note

Parent and KeyField must be of the same type.

Additionally, developers may assign an OrderField to the OrgChart so as to manage the ordering of node objects within the tree hierarchy.

1. Drop a TdxDbOrgChart component onto a form.

2. If you wish to associate images with individual chart nodes, drop a standard ImageList component onto the form and add all required images using the Image List Editor.

3. In order to activate the TdxDbOrgChart, it is necessary to connect it to your database. Using the appropriate access components (TTable, query, TDataSource) create links to your data.

4. Set the DataSource property of the TdxDbOrgChart to the DataSource component on your form.

5. Using the Object Inspector, set the KeyFieldName and ParentFieldName properties and optional field names – TextFieldName and ImageFieldName.

6. Run your application to see the data represented within the OrgChart.

Options

Both components provide a wide set of possibilities to easily add end-user functionality without writing code:

• Setting standard width and height of tree nodes (DefaultNodeWidth and DefaultNodeHeight properties)

• Setting thickness of contour and connecting lines (LineWidth property)

• Setting distance between the neighboring nodes horizontally and vertically (IndentX and IndentY properties)

• Different modes of location and justification of the text inside the nodes and also text editing (EditMode property)

• Autoscaling (Zoom property)

• Rotated display (Rotated property)

• Embedded Drag & Drop interface with dynamic display of the dragging node (ocCanDrag and ocShowDrag in Options modes)

• Possibility to add and delete nodes by Ins, Ctrl-Ins and Del keys (ocInsDel in Options mode)

• 3-Dimensional display of nodes (ocRect3D in Options mode)

• Animated expansion and collapse of nodes (ocAnimate in Options mode)