JSFiddle - React, Tailwind, and code Playground

by Ignacio Fuentes

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.silver.min.css">
<script src="http://demos.kendoui.com/content/shared/js/people.js"></script>
<div id="grid"></div>
<button id="button">Regenerate</button>

JavaScript

$("#grid").kendoGrid({
    dataSource: [{
        productName: "Tea",
        category: 1
    }, {
        productName: "Ham",
        category: 2
    }]
});


var grid = $("#grid").data("kendoGrid");

var columns = [{
    field: "productName"
}, {
    field: "category",
    values: [{
        text: "Beverages",
        value: 1
    }, {
        text: "Food",
        value: 2
    }]
}];

$(document).on("click", "#button", function () {
    grid.destroy();
    $("#grid").kendoGrid({
        dataSource: [{
            productName: "Tea",
            category: 1
        }, {
            productName: "Ham",
            category: 2
        }],
        columns: columns
    });

});