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="http://dynamic.mavistech.com/scripts/kendoextensions.js"></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 () {
    
    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: false,
            visible: true
        }).data('kendoWindow');
        demoWindow.enableConfirmChangesForGrid(modalGrid);
        demoWindow.close();
    
    $("#windowBtn").click(function () {
        demoWindow.open();
    });

});