JSFiddle - React, Tailwind, and code Playground

by RaptorCZ

HTML

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.all.min.js"></script>
<script src="http://rniemeyer.github.io/knockout-kendo/js/knockout-kendo.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.default.min.css">
<!-- This one works fine -->
<label>valuePrimitive = true</label><br />
<input data-bind="kendoDropDownList: {
data: Names,
value: SelectectedValue1,
dataTextField: 'Name',
dataValueField: 'ID',
valuePrimitive: true
}" />

<br />

<!-- This one doesn't work -->
<label>valuePrimitive = false</label><br />
<input data-bind="kendoDropDownList: {
data: Names,
value: SelectectedValue2,
dataTextField: 'Name',
dataValueField: 'ID',
valuePrimitive: false
}" />

<br />
<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

JavaScript

var datajs = 
    [{'ID':1,'Name':'Name 1'},
     {'ID':2,'Name':'Name 2'},
     {'ID':3,'Name':'Name 3'},
     {'ID':4,'Name':'Name 4'},
     {'ID':5,'Name':'Name 5'}
    ];

var ViewModel = function() 
{
    this.Names = ko.observableArray(datajs);
    this.SelectectedValue1= ko.observable(null);
    this.SelectectedValue2= ko.observable(null);
};

ko.applyBindings(new ViewModel());