JSFiddle - React, Tailwind, and code Playground

by malovicn

HTML

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common-material.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.material.min.css">
<div id="grid">

</div>

JavaScript

function comboEditor(container, options) {
	$('<input id="editor" data-delay="200" data-filter="startswith" data-min-length="2"' +
                  'data-suggest="true" data-text-field="code" data-value-field="id"' + 
                  'data-value-primitive="true" data-bind="value:' + options.field + '"/>')
   		.appendTo(container)
   		.kendoComboBox({
          dataSource:  {
            data: [
              { id: 1, code: "1000", name: "Jane Doe"},
              { id: 2, code: "1001", name: "John Doe"}
            ]
          },
          template: '<div class="generalLedgerAccountTemplate">'+                                               '<span class="k-state-default code"><strong>${data.code}</strong></span>' +
            '<span class="k-state-default name">${data.name}</span>' + 
            '</div>'
       });
};

var grid = $("#grid").kendoGrid({
    columns: [
      { field: "personId", editor: comboEditor },
      { field: "account" },
    ],
    toolbar: ["create"],
    editable: {      
			update: true, 
      destroy: true,
		},
    dataSource: {
      data: [
        { personId: 1, account: "123-456-78"},
      ],
      schema: {
        model: {
          id: "id",
          fields: {
            "id": { type: "number" },
            "personId": {type: "number", editable: true },
            "account": {type: "string", editable: true }
          }
        }
      }
    }
});