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

2 posts, 0 answers
  1. florim
    florim avatar
    1 posts
    Member since:
    Aug 2007

    Posted 29 Jul 2013 Link to this post

    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) {
                   //{ FirstNameEn: options.data.filter.filters[0].value }
                   this.tbl.read({ SearchString: "*" }).done(
                       function (d) {
               update: function (options) {
                   //var mod = kendo.stringify(options.data.models[0]);
                   this.tbl.update(options.data.models[0]).done(function (d) {
                   }, function (err) {
               create: function (options) {
                   this.tbl.insert(options.data.models[0]).done(function (d) {
                   }, function (err) {
           schema: {
               model: { id: "id" }

    <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
  2. Atanas Korchev
    Atanas Korchev avatar
    8462 posts

    Posted 31 Jul 2013 Link to this post


     You can use the newly introduced data-value-primitive attribute which controls that behavior.
    <select data-role="dropdownlist" 
              data-bind="source: items, value: value" 

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

    Atanas Korchev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top