New to Kendo UI for Angular? Start a free 30-day trial

Value Binding

The DropDownTree value can either be a primitive value (string, number, or other) or an object.

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:

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
Example
View Source
Edit In Stackblitz  
Change Theme:

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 incorrect value match.

Example
View Source
Edit In Stackblitz  
Change Theme:

Object Values

Example
View Source
Edit In Stackblitz  
Change Theme:

The following table lists the valid configuration scenarios.

Data TypeValueValuePrimitiveValueFieldValueDepthDataItem
Hierarchical HomogenousprimitivetruesetNot setSet
Hierarchical HomogenouscomplexNot setsetNot setNot set
Hierarchical Heterogenousprimitivetrueset [Array]SetSet
Hierarchical Heterogenousprimitivetrueset [Array]Not set (inferred)Set
Hierarchical HeterogenouscomplexNot setset [Array]SetNot set
Hierarchical HeterogenouscomplexNot setset [Array]Not set (inferred)Not set
FlatprimitivetruesetNot setSet
FlatcomplexNot setsetNot setNot set