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">
<div id="grid">
    
</div>

JavaScript

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 },
{ title: "Star Wars: The Empire Strikes Back", year: 1980 },
{ title: "Star Wars: Return of the Jedi", year: 1983 }
];

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

$("#grid").kendoGrid({
    dataSource: localDataSource,
    editable: "inline",
    columns: [
        { command: ["edit", "destroy"], title: "&nbsp;", width: "120px" },
        { field: "title", width: "100px", editor: titleEditor},
        { field: "year", width: "100px" }
    ]
});

function titleEditor(container, options) {
    var inputField = $('<input data-text-field="title" data-value-field="title" data-bind="value:' + options.field + '"/>');
    var button = $('<span unselectable="on" class="k-icon k-i-search">select</span>');
    button.click(function(e) {
        lookupdialog.dialog({
            
        });
    });
    inputField.after(button);        
    inputField.appendTo(container);
};