JSFiddle - React, Tailwind, and code Playground

by valchev

HTML

<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<div id="grid"></div>

JavaScript

var Datas = [
    { IsChecked: true, "foo": "Original"},
    {IsChecked: true, "foo": "A1"},
    {IsChecked: true, "foo": "B1"},
    {IsChecked: true, "foo": "C1"},
    {IsChecked: true, "foo": "C2"},
    {IsChecked: true, "foo": "D1"},
    {IsChecked: true, "foo": "D2"},
    {IsChecked: true, "foo": "D3"},
    {IsChecked: true, "foo": "D4"},
    {IsChecked: true, "foo": "D5"},
    {IsChecked: true, "foo": "D6"},
    {IsChecked: true, "foo": "D7"},
    {IsChecked: true, "foo": "D8"},
    {IsChecked: true, "foo": "D9"},
    {IsChecked: true, "foo": "D0"},
    {IsChecked: true, "foo": "D1"},
    {IsChecked: true, "foo": "F2"}
];
var DataSource = new kendo.data.DataSource({data: Datas});

var grid = $("#grid").kendoGrid({
    dataSource: DataSource,
    columns: [
      { field: "IsChecked", title: " ", width: 50
       , 
       template: '#= GetImageControl(uid, "InvertCheck(\'" + uid + "\')", IsChecked) #', sortable: false 
      },
        {
            field: "IsChecked", 
            width: 40
        },
        {
            field: "foo", 
            width: 80
        },
        {
            field: "na", 
            width: 100
        }
    ],
    height: 300,
    sortable: true,
    
}).data("kendoGrid");

var Control = $("#grid").data("kendoGrid");
$('#grid').on('contextmenu', 'tr', function (e) { e.preventDefault(); });


var data = Control.dataSource.data();

//alert(data[0].foo);
//data[0].set("foo",'Changed');
//alert(data[0].foo);

  $('#grid').find('div.k-grid-content').on('click touchend', 'tr', function () {
        var Entity = Control.dataSource.getByUid($(this).data("uid"));
        Entity.set('foo', 'clicked, this is a very long text that should make the row bigger thus making it almost impossible to scroll. iPads detect scroll using a certain speed / element size algorithm. ');
      });

function GetImageControl(controlID, callbackString, imageSource, title)
{
    var ControlName = 'ETL_Kendo_CallbackControl_' + controlID;
    var...