JSFiddle - React, Tailwind, and code Playground

by siliconsoul

HTML

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

JavaScript

$.fn.reverse = [].reverse;//save a new function from Array.reverse

$(document).ready(function() {
    var data = [
        { id: 1, name: "Michael", phone: "897-894-8956" },
        { id: 2, name: "George Michael", phone: "897-555-5555" },
        { id: 3, name: "George Sr.", phone: "897-444-4444" },
        { id: 4, name: "Gob", phone: "897-333-3333" },
        { id: 5, name: "Lucille", phone: "897-222-2222" },
        { id: 6, name: "Tobias", phone: "897-111-1111" },
        { id: 7, name: "Maeby", phone: "897-666-6666" },
        { id: 8, name: "Buster", phone: "897-777-7777" },
        { id: 9, name: "Lindsay", phone: "897-888-8888" }
    ];
    
    var dataDestiny = [
          { id: 0, name: "", phone: "" },
    ];

    var dataModel = kendo.data.Model.define({
        id: "id",
        fields: {
            id: { type: "number" },
            name: { type: "string" },
            phone: { type: "string" }
        }
    });
    
    var dataModelDestiny = kendo.data.Model.define({
        id: "id",
        fields: {
            id: { type: "number" },
            name: { type: "string" },
            phone: { type: "string" }
        }
    });

    var mainDataSource = new kendo.data.DataSource({
        schema: {
            model: dataModel
        },
        data: data
    });
    
    var destinynDataSource = new kendo.data.DataSource({
        schema: {
            model: dataModelDestiny
        },
        data: dataDestiny
    });
    
    var mainGrid = $("#grid").kendoGrid({
        dataSource: mainDataSource,
        columns: ["id", "name", "phone"],
        scrollable: false
    }).data("kendoGrid");
    
    var destinyGrid = $("#gridD").kendoGrid({
        dataSource: destinynDataSource,
        columns: ["id", "name", "phone",
         {
             command: [{
                 name: "edit", text: {
                     edit: "Editar",               // This is the localization for Edit button
                     update: "Guardar",         ...