Binding object to DropDownList value

4 posts, 0 answers
  1. Ota
    Ota avatar
    4 posts
    Member since:
    Jul 2017

    Posted 06 Jan Link to this post

    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

     

     

  2. Petar
    Admin
    Petar avatar
    269 posts

    Posted 08 Jan Link to this post

    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.
  3. Ota
    Ota avatar
    4 posts
    Member since:
    Jul 2017

    Posted 09 Jan Link to this post

    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>

     

  4. Petar
    Admin
    Petar avatar
    269 posts

    Posted 13 Jan Link to this post

    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.
Back to Top