Value Binding

The DropDownTree value can either be a primitive (strings, numbers, or other) or a complex value (objects).

To set the value, apply any of the following approaches:

• Use the value property. If the value is set through the value property, you have to hook up to the valueChange event and manually update the value of the value property.
• Use the ngModel value binding. If the value is set by the ngModel value binding, the framework will automatically update the corresponding field from the model after the value of the component changes.
• Use the formControlName value binding available in the Reactive forms. If the value is set by the formControlName value binding, the framework will automatically update the corresponding field from the form model after the value of the component changes.

The DropDownTree does not support the simultaneous usage of the value property and the ngModel value binding.

When binding the DropDownTree value, the component provides options for:

• Using primitive values (strings, numbers, or other)
• Using complex values (objects)

Primitive Values

If the value is of a primitive type, the valuePrimitive property needs to be set to true and dataItem must be provided. The value property of the dataItem will be associated with the valueField and the text to display will be extracted from the textField of the objects.

Primitive data types include:

• String
• Number
• Undefined
• Null

Heterogenous Data Type

When valueField and textField are string[], always specify valueDepth. If you do not provide a value for the field, the DropDownTree will look for the first property match from dataItem in the valueField which may result in an incorrect value match.

Object Values

If the DropDownTree is bound to a dataset of objects, its value will be an object of the same type.

The following table lists the valid configuration scenarios.

Suggested Links

• API Reference of the DropDownTree
• Data Binding