JSFiddle - React, Tailwind, and code Playground

by korchev

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>

<input data-role="combobox" data-bind="source: Suffixes, value: Contact1.Suffix" data-text-field="text" data-value-field="value" />
<input data-role="combobox" data-bind="source: Suffixes, value: Contact2.Suffix" data-text-field="text" data-value-field="value"/>
<button data-bind="click: click">log JSON to console</button>

CSS

.selected{
  background: red;
  color: white;    
}

JavaScript

var vmContact = new kendo.observable({
    Suffixes: [
        { value: null, text: ''},
        { value: 'Sr.', text: 'Sr.' },
        { value: 'Jr.', text: 'Jr.' },
        { value: 'III', text: 'III' },
        { value: 'IV', text: 'IV' },
        { value: 'V', text: 'V' }
    ],
    Salutations: [
        { text: "Mr." },
        { text: "Master" },
        { text: "Ms." },
        { text: "Mrs." },
        { text: "Miss." },
        { text: "Dr." }
    ],
    Contact1: {
        
    },
    Contact2: {
        Suffix: "Jr."
    },
    
    click: function() {
        console.log(kendo.stringify(this));
    }
});

kendo.bind(document.body, vmContact);