Load JSON Data in TreeView Component
In cases where you have a custom data source that uses different field names for nodes than the ones used by the TreeView component, you can still populate the tree view with the data, but first you need to map the field names of your data source to the ones that are already in use. Here you will learn how data binding works in TreeView with custom data source, in this case a JSON file.
A sample code that shows how to load a tree structure from a JSON file into the TreeView is available in JavaScript, Angular, React and Vue, in following sections below.
a suite of native Web Components for Angular, React and Vue
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
This demo shows a TreeView that is populated using a JSON file as a data source. The names of the data fields are different from the ones used by the tree view. Using data binding, an object is provided which maps the custom field names with the ones that treeview uses.
The complete sample code is available in Quick Start application as part of IntegralUI Web library.
Data Binding in TreeView Component
When you have a data with different field names, prior populating the TreeView you need to bind the data fields with the ones that are already in use. This is required only for fields that are already predefined.
To do the data binding, use the dataFields property of the TreeView. This property accepts an object that replaces the default field names with your own. Here is a list of fields that are predefined and already in use:
dataFields = {
allowDrag: 'allowDrag', // Determines whether item is draggable or not
allowDrop: 'allowDrop', // Determines whether item can accept drops over its space
allowEdit: 'allowEdit', // Determines whether item is editable
allowFocus: 'allowFocus', // Determines whether item can accept input focus
checked: 'checked', // Determines whether item is checked or not
checkState: 'checkState', // Specifies the current item check state: Unchecked, Indeterminate or Checked
data: 'data', // Specifies a custom object associated with the item
enabled: 'enabled', // Specifies whether the item is enabled or disabled
expanded: 'expanded', // Determines whether the item is expanded or collapsed
hasChildren: 'hasChildren', // Determines whether the item has or can hold any child items
icon: 'icon', // Specifies the name of a custom CSS class that represents an icon
iconUrl: 'iconUrl', // Specifies the URL that represents an icon
id: 'id', // Specifies an unique identifier for the item
isRoot: 'isRoot', // Determines whether the item is at the root in tree hierarchy
items: 'items', // An array that holds references to all child items
pid: 'pid', // Specifies the unique identifier of item's parent
selected: 'selected', // Specifies whether the item is selected
style: 'style', // An object with custom CSS settings
text: 'text', // Specifies the item label
tooltip: 'tooltip', // A message displayed as a Tooltip
value: 'value', // A custom object, simple numeric or text value associated with the item
visible: 'visible' // Specifies whether the item will show in the list or it will be excluded
}
IntegralUI Web
Native Web Components for Angular, React and Vue
In this example, the data source is a JSON file where the most used field names: id, pid, expanded, items and text are replaced by different ones. As you can see from code below, the treeFields object replaces the item id to itemId, items to children, text to label etc.
Currently ReactJS doesn't have full support for Web Components. Mainly because of the way data is passed to the component via attributes and their own synthetic event system. For this reason, you can use available wrappers located under /integralui/wrappers directory, which are ReactJS components that provide all public API from specific IntegralUI component.
When new field names are in use, you also need to update the item template with the new names, based on objects from the data source.
Populate the TreeView by Loading JSON Data
Once the new data field names are provided, you can load the data from the JSON file into the TreeView. For this purpose, depending on framework of your choice (Angular, React, Vue or other), loading json data may be different. Angular uses http service, in React you can just import the data from a file or using javascript you can fetch the data from provided location. Here is an example:
Once the data is successfully loaded, a good practice is to suspend any updates of the tree view layout. This increases the loading performance, and then you can add the data using the loadData method. At last, because the layout is already suspended you need to resume it and update the TreeView.
The loadData method is also useful in cases when you need to add or update children of a single node. The second parameter of this method accepts a parent node, when specified states that the new data will add or replace the existing child nodes. In addition, the last parameter states whether the provided data is a flat list or a tree hierarchy.
When JSON data is a flat list, the id and pid fields are required so that correct parent-child relations are created. Based on this information, the tree hierarchy is automatically created from the flat list when loadData method is called.
Here is the JSON data as a flat list and a tree hierarchy.
Depending on the data format (flat list or a tree), you need to set the last parameter of the loadData method to true or false.
Conclusion
Populating the IntegralUI TreeView component with data from a custom data source like a JSON file is simple. If you have a data source that uses different names than the ones used by the tree view, you can provide an object that matches the names from your data source and the data fields in TreeView. This allows you to keep the format of your data and populate the tree view from a local or remote data source.
TreeView is a native Web Component, part of IntegralUI Web that you can use in Angular, React, Vue and any other JavaScript framework.