JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.common.min.css">
<script src="https://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.default.min.css">
<div id="grid">
</div>

JavaScript

var names = [
  {"item": "Alpha"},
  {"item": "Bravo"},
  {"item": "Charlie"},
  {"item": "Delta"},
];

var dataSource = new kendo.data.DataSource({data:names});
var arr = new kendo.data.DataSource({data:[
    {text: "Mike", value: 1},
    {text: "November", value: 2},
    {text: "Oscar", value: 3},
    {text: "Papa", value: 4},
    {text: "Alpha", value: 5},
    {text: "Bravo", value: 6},
    {text: "Charlie", value: 7},
    {text: "Delta", value: 8},
  ]
});

   $("#grid").kendoGrid({
        dataSource: dataSource,
        navigatable: true,
        pageable: true,
        height: 550,
        filterable: {
            mode: "row"
        },
        sortable: {
            mode: "single",
            allowUnsort: false
        },
        toolbar: ["create"],
        columns: [
            { field: "item", title: "Item", width: "300px", editor: categoryDropDownEditor }
        ],
        editable: true
    });

    function categoryDropDownEditor(container, options) {
        $('<input data-bind="value:' + options.field + '" />')
            .appendTo(container)
            .kendoDropDownList({
                dataSource: arr,
                dataTextField: "text",
                dataValueField: "text",
            });
    }