JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<div id="grid"></div>
<script>
    $(document).ready(function() {
        window.onbeforeunload = function() {
            var grid = $("#grid").data("kendoGrid");
            var hasChanges = grid.dataSource.hasChanges();

            if (hasChanges) {
                return "The grid has changes, leaving the page will lose those changes";
            }
        }
    });
</script>

JavaScript

/* code from Kendo demo to initialise the grid with some data */
var crudServiceBaseUrl = "http://demos.kendoui.com/service",
    dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: crudServiceBaseUrl + "/Products",
                dataType: "jsonp"
            },
            update: {
                url: crudServiceBaseUrl + "/Products/Update",
                dataType: "jsonp"
            },
            destroy: {
                url: crudServiceBaseUrl + "/Products/Destroy",
                dataType: "jsonp"
            },
            create: {
                url: crudServiceBaseUrl + "/Products/Create",
                dataType: "jsonp"
            },
            parameterMap: function (options, operation) {
                if (operation !== "read" && options.models) {
                    return {
                        models: kendo.stringify(options.models)
                    };
                }
            }
        },
        batch: true,
        pageSize: 20,
        schema: {
            model: {
                id: "ProductID",
                fields: {
                    ProductID: {
                        editable: false,
                        nullable: true
                    },
                    ProductName: {
                        validation: {
                            required: true
                        }
                    },
                    UnitPrice: {
                        type: "number",
                        validation: {
                            required: true,
                            min: 1
                        }
                    },
                    Discontinued: {
                        type: "boolean"
                    },
                    UnitsInStock: {
                        type: "number",
                        validation: {
                            min: 0,
                            required: true
                        }
  ...