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

DropDownList with MVVM binding to the data-value-field and not the object

1 Answer 1198 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
florim
Top achievements
Rank 1
florim asked on 29 Jul 2013, 12:10 PM
I'm binding to genders collection DataSource that is exposed through ViewModel
 
var genderDataSource = new kendo.data.DataSource({
       transport: {
           tbl: azureService.client.getTable('XconfigGender'),
           read: function (options) {
               console.log('read');
               //{ FirstNameEn: options.data.filter.filters[0].value }
               this.tbl.read({ SearchString: "*" }).done(
                   function (d) {
                       options.success(d);
                   });
           },
           update: function (options) {
               console.log('update');
               //var mod = kendo.stringify(options.data.models[0]);
               this.tbl.update(options.data.models[0]).done(function (d) {
                   options.success(d);
               }, function (err) {
                   options.error(err);
               });
           },
           create: function (options) {
               this.tbl.insert(options.data.models[0]).done(function (d) {
                   options.success(d);
               }, function (err) {
                   options.error(err);
               });
           },
       },
       schema: {
           model: { id: "id" }
       }
   });
Html:

<select data-role="dropdownlist" data-text-field="GenderEn" data-value-field="id" data-bind="source:genders, value: selectedItem.GenderID"></select>
But when a try to save selectedItem.GenderID its not bound to the value of dropdown list but to the object that is selected (instead selectedItem.GenderID to be example 2 it is the object with id and a description  so is it example {id:2, GenderEn:"Male"} ).

So my question is how do i bound to the data-value-field and not the object.

Sorry for my bad Englisht

1 Answer, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 31 Jul 2013, 12:04 PM
Hi,

 You can use the newly introduced data-value-primitive attribute which controls that behavior.
<select data-role="dropdownlist" 
          data-bind="source: items, value: value" 
          data-value-primitive="true"  
          data-text-field="name"
          data-value-field="id"></select>

Here is a sample demo: http://jsbin.com/eqimiz/1/edit

Regards,
Atanas Korchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
DropDownList
Asked by
florim
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Share this question
or