JSFiddle - React, Tailwind, and code Playground

by stevescotthome

HTML

<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.default.min.css">
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<div id="grid" data-role="grid" data-sortable="true" data-pageable="true" data-editable="inline" data-bind="source: gridSource" data-row-template="row-template"></div>

<script id="row-template" type="text/x-kendo-template">
      <tr class="k-grid-edit-row">
      <td>
      <input class='k-textbox' data-bind="value: Name, events: { focus: focusHandler }" />
      </td>
      <td>
      <input class='k-textbox' data-bind="value: Price, events: { focus: focusHandler }"/>
      </td>
      <td>
      <input class='k-textbox' data-bind="value: UnitsInStock, events: { focus: focusHandler }" />
      </td>
      </tr>
</script>

<pre data-bind="text: displayGridSource"></pre>

JavaScript

var viewModel = kendo.observable({
    focusHandler: function(e) {
        var item = e.data;
        console.log(this.get("gridSource").indexOf(item));
        this.displayGridSource();
    },
    gridSource: [
        {
        Name: "1Chai",
        Price: 18.00,
        UnitsInStock: 39},
    {
        Name: "2Chai",
        Price: 18.00,
        UnitsInStock: 39},
    {
        Name: "3Chai",
        Price: 18.00,
        UnitsInStock: 39},
    {
        Name: "4Chai",
        Price: 18.00,
        UnitsInStock: 39},
    {
        Name: "5Chai",
        Price: 18.00,
        UnitsInStock: 39},
        ],
    displayGridSource: function() {
        var gridSource1 = this.get("gridSource");
        return $.map(gridSource1, function(product) {
            return "\t" + kendo.stringify(product);
        }).join(",\r\n");
    }
});

kendo.bind(document.body, viewModel);