JSFiddle - React, Tailwind, and code Playground

by Gang Wu

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<script src="http://demos.telerik.com/kendo-ui/content/shared/js/people.js"></script>
Click Button to update value:</br>
<a href="#" id="button" class="k-button">Button 1</a>

<input id='Instrument' />

CSS

.myclass {
  border: 3px solid red !important;
}

JavaScript

var data = [{
  "symbol": "GOOG"
}, {
  "symbol": "AAPL"
}, {
  "symbol": "HPQ"
}, {
  "symbol": "CSCO"
}];

$("#Instrument").kendoDropDownList({
  dataTextField: "symbol",
  dataValueField: "symbol",
  dataSource: data,
  index: 0
});

$("#button").on("click", function()  {
  $("#Instrument").data('kendoDropDownList').value("CSCO");
});