JSFiddle - React, Tailwind, and code Playground
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" data-role="grid" data-bind="source: gridDataSource" data-editable="inline" data-columns='[
{ "command": ["edit", "destroy"], "title": " ", "width": "120px" },
{ "field": "title", "width": "100px", "editor": "titleEditor"},
{ "field": "year", "width": "100px" }
]'>
</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 viewmodel = new kendo.data.ObservableObject({
gridDataSource: new kendo.data.DataSource({
data: movies,
schema: {
fields: {
title: {editable: true},
year: {editable: true}
}
}
})
});
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);
};
$('#grid table tr td').on('click', function () {
if(!$(this).parent().attr('data-role')) {
$("#grid").data("kendoGrid").saveRow();
$("#grid").data("kendoGrid").editRow($(this).parent());
$(this).find(":input").focus();
}
});
kendo.bind($("#grid"), viewmodel);