JSFiddle - React, Tailwind, and code Playground

by doriansao

HTML

<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<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.blueopal.min.css">
  <div id="tabstrip">
    <ul>
      <li>Grid</li>
      <li>Tab 2</li>
      <li>Tab 3</li>
    </ul>
    <div >
        <div id="grid"></div></div>
    <div id="tab2"></div>
    <div id="tab3"></div>
  </div>

JavaScript

var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
  tabstrip.select(0);

  $("#grid").kendoGrid({
    editable: true,
    columns: [
    { field: "FirstName", title: "First Name" },
    { field: "LastName", title: "Last Name", editor: fieldDropDownEditor }
  ],
    dataSource: {
      data: [
      { FirstName: "Joe", LastName: "Smith" },
      { FirstName: "Jane", LastName: "Smith" }
    ]
    }
  });

  function fieldDropDownEditor(container, options) {
    $('<input name="' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
          dataTextField: "LastName",
          dataValueField: "LastName",
          autoBind: false,
          dataSource: [{ LastName: "Smith" }, { LastName: "Jackson"}, {LastName: "Griffin"}],
          select: function (e) {
            
          }
        });
  }