JSFiddle - React, Tailwind, and code Playground

by Ignacio Fuentes

HTML

<script src="http://cdn.kendostatic.com/2014.1.226/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.226/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.226/styles/kendo.default.min.css">
<title>Kendo UI Example</title>
  <div id="grid"></div>
  
  <script id="popup_editor" text="text/x-kendo-template">
          <input type="text" class="k-textbox" data-bind="value: textField"/>       
  </script>
  <div id="test">
              <select data-role="multiselect"
                   data-placeholder="Type a product e.g. 'Chai'"
                   data-value-primitive="true"
                   data-text-field="text"
                   data-value-field="value"
                   data-bind="source: testProp"
                   style="width: 300px"></select></div>

JavaScript

var sampleData = [{
  textField: 'Text1',
  selectedIds:null
}, {
  textField: 'Text2',
  selectedIds:null
}];

var categories = [{
  text: 'Kendo UI',
  value: 1
}, {
  text: 'Telerik',
  value: 2
}];

var myDataSource = new kendo.data.DataSource({
  data: categories
});

$('#grid').kendoGrid({
  dataSource: {
    data: sampleData
  },
  editable: {
    mode: "popup",
    template: kendo.template($('#popup_editor').html())
  },
  columns: [
    { field: 'textField', title: 'Text' },
    { field: 'selectedIds', title: 'Categories' },
    
    { command: ['edit'], title: '&nbsp;' }
  ]
});

var testVM = new kendo.observable({
  testProp: myDataSource,
  selectedProp: 1
});

kendo.bind($('#test'), testVM);