Load Hierarchical Dataset

The Hierarchy Selector widget supports a tree data structure. If your dataset does not match this structure, you need to create your own utility helper to convert your current structure to the supported tree structure. To see the supported tree structure, see the test data section in the Hierarchy_SampleData_conf.js file.

The Hierarchy Selector supports an On Initialize event property for scripting. For example, if by default, you want to load the actual dataset from a database lookup once the widget is launched, add your script in On Initialize. But if you are using the Hierarchy_SampleData_conf.js file, the widget loads the sample data first, and then triggers the script in On Initialize.

During runtime, if you switch to a different configuration file, the widget triggers the script in the On Initialize event. If you switch to a configuration with sample data, the same behavior described applies—the widget loads the sample data first—and then calls the script in the On Initialize event.

To load the parent-child hierarchical dataset

1. In the corresponding widget configuration file, define the dataset that you want to load under the defaultNodesMapping section. The section looks similar to the following:

   

2. Replace the current value for each of the properties listed with the ones that you have in your dataset. You can use the test data to see how this works. For info on using the test data, see Using the test data in Hierarchy Selector .

Things to take note of:

• If the groupName and childName properties under the defaultNodesMapping section are incorrectly mapped, their corresponding data doesn't get loaded, and you see an empty node image like in following screenshot. To resolve this issue, check your configuration file and fix the column mapping accordingly.

  

• The value that you specify for each of the listed properties is case sensitive. It must match the name from the dataset to load the data properly.

• The showGroupAsEnabled property allows you to map a property or a column name in a dataset to indicate if a group or parent node is selectable or not through an enable or disable visual cue.

  The value of the mapped column name or property is expected to be a boolean data type, where in, if the value is False, the parent or group node is shown as disabled and takes the color assigned to the defaultParentDisabledColor property in the configuration file. If the value is True, the node's color is kept as is, where it takes the color assigned to the defaultParentNonSelectedColor property.

• The childColor property supports a null value. If no color is specified, then the widget uses the default color of the selected child item. For information on the default color of the selected child node, see Set Color for Child Node.

• The following are the supported color codes. It also supports the actual color name. For example, green, blue, and so on.

  	Color	Example
  	Hex	#ff0000
  	RGB	rgb(255, 0, 0)
  	HSL	hsl(0, 100%, 50%)

If you provide an invalid color code or string, a color rendering issue is encountered. For example, #Z34FF9, "#blue". To fix it, correct the invalid value.