JSFiddle - React, Tailwind, and code Playground

by Teac

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<script src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css">
<script type="text/x-kendo-template" id="popupEditorTemplate">
    <div>
      <div class="k-edit-label">
        <label for="year">Year</label>
      </div>
    
      <div data-container-for="year" class="k-edit-field" >
        <input name="year" 
          data-type="number"
          data-bind="value:year"
          data-role="numerictextbox" />
      </div>
    
      <div class="k-edit-label">
        <label for="title">Title</label>
      </div>
      <div data-container-for="title" class="k-edit-field" >
          <input type="text" class="k-input k-textbox" name="title" data-bind="value:title" />
      </div>
    
        <div data-container-for="positions" >
          <div data-role="grid"
            data-bind="source: positions">
          </div>
        </div>
    </div>
</script>

<div id="grid">
    
</div>

JavaScript

$(document).ready(function() {
    var lookupdialog = $("<div id='lookupDialog'>");
    var lookuptextbox = $("<input class='k-input text-input' id='searchSomething' type='text' data-role='textbox'>");

    lookuptextbox.appendTo(lookupdialog);

    var movies = [
        {
        title: "Star Wars: A New Hope",
        year: 1977,
        positions: {
            title: "aaa",
            material: {
                id: 1,
                name: "aaa"
            }
        }},
    {
        title: "Star Wars: The Empire Strikes Back",
        year: 1980,
        positions: {
            title: "bbb",
            material: {
                id: 1,
                name: "bbb"
            }
        }},
    {
        title: "Star Wars: Return of the Jedi",
        year: 1983,
        positions: {
            title: "ccc",
            material: {
                id: 1,
                name: "ccc"
            }
        }}
    ];

    var localDataSource = new kendo.data.DataSource({
        data: movies,
        schema: {
            fields: {
                title: {
                    editable: true
                },
                year: {
                    editable: true
                },
                positions: [{
                    title: null}]
            }
        }
    });

    $("#grid").kendoGrid({
        dataSource: localDataSource,
        editable: {
            mode: "popup",
            template: kendo.template($("#popupEditorTemplate").html())
        },
        columns: [
            {
            command: ["edit", "destroy"],
            title: "&nbsp;",
            width: "120px"},
        {
            field: "title",
            width: "100px"},
        {
            field: "year",
            width: "100px"}
        ]
    });
});