Kendo-angular: doc: DropDownList > valuePrimitive missing in example

[cluetjen]

I'm submitting a...

• Documentation issue or request

Current behavior

Example
https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/data-binding/#toc-arrays-of-complex-data

        <kendo-dropdownlist
            [data]="listItems"
            [textField]="'text'"
            [valueField]="'value'"
        >
    </kendo-dropdownlist>

leads to error if used with reactive form setup and an initial value:

ERROR Error: Expected initial value of type Object. See http://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/#toc-value-selection

Expected behavior

Example should work. For this we have to add [valuePrimitive]="true".

        <kendo-dropdownlist
            [data]="listItems"
            [textField]="'text'"
            [valueField]="'value'"
            [valuePrimitive]="true"
        >
    </kendo-dropdownlist>

[tsvetomir]

The example in question is intentionally simplified and focuses only on the data-binding aspect. Please refer to the Reactive Forms section for an example that covers this specific scenario.

[cluetjen]

Thanks @tsvetomir, but as far as I understand setting "valueField" w/o setting "valuePrimitive" simply makes no sense it will be ignored because the control's value is always the object itself. Here's an example from drop down list source code:

newState.value = this.valuePrimitive ? getter(resolved.dataItem, this.valueField) : resolved.dataItem;

Many devs may assume, that if they specify an object property name as "take value from here", the value will be taken from there, so my issue is, that mentioned example will not lead to the expected result. It would be totally fine just to remove "valueField" from example to focus on data binding... Or do I miss something?

Don't get me wrong, you make a great product - writing issues like these is just my way to try to support you.

[tsvetomir]

It is possible to supply an object for the selected value. Hence using valuePrimitive is optional. That said, binding to just the key of the item is far more common.

Your feedback is much appreciated and indicates that the documentation is not leading you in the right direction. The section should at least link to the value binding topic to clarify.

[cluetjen]

Thanks @tsvetomir, there seems to be a misunderstanding, so let me clarify...

It is possible to supply an object for the selected value.

but then imho 'valueField' makes no sense

Hence using valuePrimitive is optional.

it's not if 'valueField' is set and if you expect valueField to have any meaning.

However, time for Kamenitza

[tsvetomir]

That's a good question - and choice of beverage 🍻

In this scenario the valueField will be used for equality testing. Otherwise we'd have to rely on reference equality which can be brittle. Something that should be clarified in the docs as well.

[cluetjen]

Thanks @tsvetomir, finally I've got it. To summarize: "valueField" is not the field used as control value but the identifier that can optionally be used as value if valuePrimitive=true.

According to this helpful discussion, the correct issue report is:

https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/data-binding/#toc-arrays-of-complex-data

        <kendo-dropdownlist
            [data]="listItems"
            [textField]="'text'"
            [valueField]="'value'"
        >

The DropDownList will extract the value and text values from the selected data item and in this way will set the selected value and text.

Assuming "set selected value" means "set as control value", this seems to be not exactly correct: It does not not "extract the value ... and set the selected value". It will use the object as value and use the "valueField" as identifier. It will "set as selected value" if valuePrimitive=true.

Similar issue here:
https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/DropDownListComponent/#toc-valuefield

Thanks again for taking the time to clarify this.

[tsvetomir]

We've added a note to the docs to clarify the valueField usage in this case. Thanks for your feedback!