Tree Views

What is a Tree View Component?

Tree Views provides a graphical illustration of hierarchical data, making it easier to visualize complex structures. This component is particularly useful for displaying large amounts of nested data. The Tree View is the primary component for organizing and displaying hierarchical data, while Tree View Item serves as a sub-component to represent individual nodes. Additionally, Tree View Children is used to display the children of a single node, ensuring a clear and organized representation of nested relationships.

When to use

Use the Tree View component when you need to illustrate parent/child relationships within your data or when you need to allow users to navigate through different levels of data. Tree views are ideal for organizational charts, family trees, or any structure where entities are nested within each other. Tree views help to effectively communicate and visualize relationships.

When not to use

If your data does not have hierarchical relationships and is better represented in a flat or tabular format, using the tree view would be unnecessary and could complicate the presentation.

Properties

Component Properties

Users can change the Tree Type to suit their needs:

• Standard: Basic hierarchical data visualization.
• Filter: Narrow down data based on criteria.
• Search: Locate specific nodes quickly.

Create a Tree View

1. Start by creating a Dashboard Dataset Business Rule, which will return the representation of our tree in tabular form as XFTreeItemCollection type. An example of this can be found in the CreateAutomotiveTree method in the DTK_HelperQueries assembly.
2. Declare and set the return object as a new List<XFTreeItem>().
3. Declare and set the childrenOf variables as a new List<XFTreeItem>().

• This only needs to be done for items that have a parent in the hierarchy.

4. Declare and set child variable noChildren as null as this is what will be passed in for members that don’t have children.
5. Next, create child item instances as XFTreeItem and assign to respective parent items list (from step 3).
6. Create parent items also as individual instances of type XFTreeItem.
7. Pass in child items as a List<XFTreeItem> through the constructor when creating parent items.
8. Add parent items to the return object.
9. Create a Dataset from the XFTreeItemCollection using the .CreateDataSet utility method, and return the output to finish generating the Dashboard DataSet. This can also be found in the DTK_HelperQueries assembly.
10. Next, set up a Data Adapter to execute the rule. The one in the sample is called dat_AutomotiveExample_TreeView. In the screenshot below, you can see that the Method Query is calling the code that was created in steps 1 – 9.

11. Test the Data Adapter to see the returned dataset consists of two Datatables, Items and Relationships. To generate a Tree View, these tables are needed to list the items and to determine relationships in the hierarchy respectively.
12. Create a Tree View component. Add the Data Adapter that was previously created along with a Bound Parameter to capture the result of the user selection. The Tree View is titled trv_AutomotiveExample_DTK. Under Component Properties, the Bound Parameter is set to SelectedTreeItem_DTKC.

Under Data Adapters, the Data Adapter is set to dat_AutomotiveExample_TreeView.

13. This component can now be attached to a Dashboard and will render a tree from the DataSet Business Rule.

Example Tree View

Below is an example implementation of the above steps in both C# and Visual Basic.

C#

public static XFTreeItemCollection CreateAutomotiveTree(SessionInfo si)
{
	try
	{
		// initialize list variables
		List<XFTreeItem> treeObj = new();
		List<XFTreeItem> childrenOfFord = new();
		List<XFTreeItem> childrenOfGM = new();

		// create child items and assign to parent items list
		XFTreeItem mustangItem = new("Mustang", "Mustang", "", false, true, false, false, XFImageFileSourceType.Unknown, "", "", null);
		childrenOfFord.Add(mustangItem);
		XFTreeItem camaroItem = new("Camaro", "Camaro", "", false, true, false, false, XFImageFileSourceType.Unknown, "", "", null);
		childrenOfGM.Add(camaroItem);

		// create parent items, pass in child items, and add parent items to treeObj return object
		treeObj.Add(new XFTreeItem("Ford", "Ford", "", true, true, false, false, XFImageFileSourceType.Unknown, "", "", childrenOfFord));
		treeObj.Add(new XFTreeItem("Chevrolet", "Chevrolet", "", true, true, false, false, XFImageFileSourceType.Unknown, "", "", childrenOfGM));
		XFTreeItemCollection treeCollection = new(treeObj);
		treeCollection.CreateDataSet(si);
		return treeCollection;
	}
	catch (Exception ex)
	{
		throw ErrorHandler.LogWrite(si, new XFException(si, "Unhandled Exception in CreateAutomotiveTree() function.", ex.Message, ex.InnerException));
	}
}

VB

Public Shared Function CreateAutomotiveTree(ByVal si As SessionInfo) As XFTreeItemCollection

	Try
		'initialize list variables
		Dim treeObj As List(Of XFTreeItem) = New List(Of XFTreeItem)()
		Dim childrenOfFord As List(Of XFTreeItem) = New List(Of XFTreeItem)()
		Dim childrenOfGM As List(Of XFTreeItem) = New List(Of XFTreeItem)()

		'create child items and assign to parent items list
		Dim mustangItem As New XFTreeItem("Mustang", "Mustang", "", False, True, False, False, XFImageFileSourceType.Unknown, "", "", Nothing)
		childrenOfFord.Add(mustangItem)
		Dim camaroItem As New XFTreeItem("Camaro", "Camaro", "", False, True, False, False, XFImageFileSourceType.Unknown, "", "", Nothing)
		childrenOfGM.Add(camaroItem)

		'create parent items, pass in child items, and add parent items to treeObj return object
		treeObj.Add(New XFTreeItem("Ford", "Ford", "", True, True, False, False, XFImageFileSourceType.Unknown, "", "", childrenOfFord))
		treeObj.Add(New XFTreeItem("Chevrolet", "Chevrolet", "", True, True, False, False, XFImageFileSourceType.Unknown, "", "", childrenOfGM))
		Dim treeCollection As New XFTreeItemCollection(treeObj)
		treeCollection.CreateDataSet(si)
		Return treeCollection

	Catch ex As Exception
		Throw ErrorHandler.LogWrite(si, New XFException(si, "Unhandled Exception in CreateAutomotiveTree() function.", ex.Message, ex.InnerException))
	End Try

End Function