This is a migrated thread and some comments may be shown as answers.

Binding object to DropDownList value

3 Answers 2704 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Ota
Top achievements
Rank 1
Ota asked on 06 Jan 2020, 02:36 PM

I have been struggling to understand a data-bind behavior of a dropdownlist control. I bound the source to an observable array of objects (with Text and Field properties). I want to bind the data-text-field to the Text property of the object and data-value-field to the object itself (not to it's Value property).

I tried several options:

Option1:

<select data-role="dropdownlist" data-bind="source: dropDownData, value: selectedValue" data-text-field="Text" data-value-field="this"></select>

SelectedValue is the whole object as a string "[object Object]". Not what I want.

Option2:

<select data-role="dropdownlist" data-bind="source: dropDownData, value: selectedValue" data-text-field="Text" data-value-field="this"></select>

SelectedValue is Text property of the bound object. Not what I want.

Option3:

https://jsfiddle.net/jakubjenis/z1o3L6hd/17

<select data-role="dropdownlist" data-bind="source: dropDownData, value: selectedValue" data-text-field="Text" data-value-field="Value"></select>

Weirdly enough this works. SelectedValue is the whole bound object (with Text and Value properties), but why? This should bind the Value property of the bound object, not the object itself.

Could you please explain what the correct way to set the data-value-field is so that the value field is bound to the whole object? 

Thanks,
Jakub

 

 

3 Answers, 1 is accepted

Sort by
0
Petar
Telerik team
answered on 08 Jan 2020, 01:57 PM

Hi Ota,

The behavior in the provided jsfiddle example is an expected one because of the default value of the valuePrimitive configuration. If the valuePrimitive is set to true, then the "selectedValue" in the provided project will be the Value field of the bound object. 

The valuePrimitive could be set using the following code:

<select data-role="dropdownlist" 
    data-value-primitive="true"
    data-bind="source: dropDownData, value: selectedValue"
    data-text-field="Text" data-value-field="Value">
</select>

Here is a modified version of the jsFiddle you've sent.

You may also find useful this Value binding article

Regards,
Petar
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Ota
Top achievements
Rank 1
answered on 09 Jan 2020, 11:38 AM

Hi Petar,

thanks for clarification. The valuePrimitive makes it a little more transparent and i understand the example you provided. What is still a little unclear is how the opposite should be implemented. My desired result was to have the whole object used as a value, that means that data-value-primitive is set to false. What then should the data-value-field set to be?

<select data-role="dropdownlist"
    data-value-primitive="false"
data-bind="source: dropDownData, value: selectedValue"
data-text-field="Text" data-value-field="???">
</select>

 

0
Petar
Telerik team
answered on 13 Jan 2020, 11:19 AM

Hi Ota,

The DataValueField of the DropDownList accepts only string values as can be seen in the link to the property's API. The desired functionality of binding the object itself as a value of the DropDownList items is not a supported scenario for the component.

You could thing of editing the Value field of the DropDownList's dataSource in a way it will fit the needs of the application you are working on. 

Regards,
Petar
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
DropDownList
Asked by
Ota
Top achievements
Rank 1
Answers by
Petar
Telerik team
Ota
Top achievements
Rank 1
Share this question
or