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">

JavaScript

$(function () {
  $("#grid").kendoGrid({
    dataSource: [
      { index: "1" },
      { index: "2" }
    ],
    pageable: true,
    height: 550,
    resizable: true,
    toolbar: ["create"],
    columns: [
      { field: "checkBox", filterable: false, title: "<input type=\'checkbox\' class='selectAll' />", width: "35px", template: "<input type=\'checkbox\' class=\'selectAll\' />" },
      { field: "index", filterable: true, title: "#", width: "35px" },
      { field: "Priority", editor: categoryDropDownEditor,  filterable: true, title: "Priority Two", width: "120px" },
    ],
    editable: true,
  })
});

function categoryDropDownEditor(container, options) {
  $("<input data-bind='value:" + options.field + "'/>")
    .appendTo(container)
    .kendoDropDownList({
    dataSource: [
      { title: "Yes" },
      { title: "No" }
    ],
    dataTextField: "title",
    dataValueField: "title",
    valuePrimitive: true,
  });
}