JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdn.kendostatic.com/2011.3.1407/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1407/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1407/styles/kendo.default.min.css">
<button type="button" id="refreshButton">Create Grid</button>
<div id="demoGrid">
</div>
JavaScript
function createGrid() {
var dataSource = {
data: [
{
FirstName: "Harold",
LastName: "Kumar",
City: "London",
Title: "Mr",
Age: 63}
]
};
$("#demoGrid").empty().kendoGrid({
height: 250,
scrollable: true,
sortable: true,
filterable: true,
pageable: true,
groupable: true,
dataSource: dataSource,
columns: [
{
field: "FirstName",
title: "First Name"},
{
field: "LastName",
title: "Last Name"},
{
field: "City"},
{
field: "Title"},
{
field: "Age"}
]
});
$("#refreshButton").text("Refresh Grid");
};
// createGrid();
$("#refreshButton").click(function() {
createGrid();
});