JSFiddle - React, Tailwind, and code Playground

by korchev

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>
<button id="data">Get Data</button>

<div id="grid"></div>

JavaScript

var data = [
    { id: 1, text: "text 1"},
    { id: 2, text: "text 2"},
    { id: 3, text: "text 3"}
]

kendo.data.ObservableArray.fn.toJSON = function() {
    return [].slice.call(this);
}
    
var dataSource = new kendo.data.DataSource({
        data: data,        
        schema: {
            model: {
                id: "id",
                fields: {
                    id: { type: "number" },
                    text: { type: "string" }
                }
            }
        }
    });

var grid = $("#grid").kendoGrid({
    dataSource: dataSource,  
    scrollable: false,    
    columns: ["id", "text"]            
}).data("kendoGrid");

$('#data').on('click', function(){
    console.log(JSON.stringify(grid.dataSource.data()));
});