JSFiddle - React, Tailwind, and code Playground

by Thiru Medampalli

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>
<script src="https://dl.dropboxusercontent.com/content_link/6w0xbeumz0lTlNQttBv8G8oRgh94t4LW4djbhP1z0tljJr8ddjAVhHpx4o0FV9al"></script>
<p>This is a demo page to show how to show the confirmation window if there a dirty data in the grid using my Kindow Windo extensions</p>
<div>
    <button class="k-button" id="windowBtn">Open modal window</button>
</div>
<div id='demoKendoWindow'>
    <div id="grid"></div>
</div>

JavaScript

$(function () {
    $("#windowBtn").click(function () {
        var gridDataSource = new kendo.data.DataSource({
            data: [{
                name: "Jane Doe",
                age: 30
            }, {
                name: "John Doe",
                age: 33
            }],
            schema: {
                model: {
                    id: "ID",
                    fields: {
                        "name": {
                            editable: true
                        },
                            "age": {
                            editable: true
                        }
                    }
                }
            }
        });
        var modalGrid = $("#grid").kendoGrid({
            dataSource: gridDataSource,
            editable: true
        }).data('kendoGrid');

        var demoWindow = $('#demoKendoWindow').kendoWindow({
            modal: true,
            visible: true
        }).data('kendoWindow');

        demoWindow.enableConfirmChangesForGrid(modalGrid);

    });

});