Jquery 当更改未保存在剑道内联编辑网格中时，如何在弹出窗口关闭时显示消息框

我有一个弹出窗口，其中我创建了两个选项卡。打开时，每个选项卡都包含剑道内联可编辑网格。此网格包含三列，其中一列包含编辑和删除按钮。单击编辑按钮时，所选行将进入编辑模式，允许用户修改数据。单击此编辑按钮后，其名称将作为更新。编辑后，如果我没有单击更新按钮，只是切换选项卡，则会显示一个消息框，提示“有未保存的更改，请保存更改”。我如何做到这一点？如果有人能帮我解决这个问题，我会很有帮助的。 代码如下

 <% Html.Kendo().TabStrip()
    .Name("tab")           
    .Animation(false)       
    .Items(tabstrip =>
     {
         tabstrip.Add().Text("General Points")
           .Selected(true)               
           .Content(() =>
           { %>
                <div id="generalPointGrid"></div> 
                 <% });              
           tabstrip.Add().Text("Important Points")
          .Content(() => { %> <div id="importantPointGrid"></div><% }); 
          })
          .Render(); 
      %>

   <scripts>
   $(document).ready(function () {
        dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: xyzread,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    type: "GET"
                },
                update: {
                    url: xyzupdate,
                    dataType: "json",
                    type: "PUT"
                },
                create: {
                    url: xyzcreate,
                    dataType: "json",
                    type: "POST"
                },
                destroy: {
                    url: function (data) {
                        return xyzdelete,
                    },
                    type: "Delete",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json"
                }
            },
            schema: {
                model: {
                    id: "id",
                    fields: {
                        Remarks: {
                            type: "string"
                        },                           
                        description: {
                            type: "string"
                        }                            
                    }
                }
            }
        });

 var grid = $("#generalPointGrid").kendoGrid({

        dataSource: dataSource,
        toolbar: ["create"],
        columns: [ {
            field: "remarks",
            title: "Remarks"              
        }, {
            field: "description",
            title: "Description"               
        }, {
            command: ["edit", "destroy"],
            title: "&nbsp;"              
        }],
        editable: "inline",
        destroy: true
    });


dataSource1 = new kendo.data.DataSource({
            transport: {
                read: {
                    url: xyzread,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    type: "GET"
                },
                update: {
                    url: xyzupdate,
                    dataType: "json",
                    type: "PUT"
                },
                create: {
                    url: xyzcreate,
                    dataType: "json",
                    type: "POST"
                },
                destroy: {
                    url: function (data) {
                        return xyzdelete,
                    },
                    type: "Delete",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json"
                },
            },
            schema: {
                model: {
                    id: "id",
                    fields: {
                        Remarks: {
                            type: "string"
                        },                           
                        description: {
                            type: "string"
                        }                            
                    }
                }
            }
        });

 var grid = $("#importantPointGrid").kendoGrid({

        dataSource: dataSource,
        toolbar: ["create"],
        columns: [ {
            field: "remarks",
            title: "Remarks"              
        }, {
            field: "description",
            title: "Description"               
        }, {
            command: ["edit", "destroy"],
            title: "&nbsp;"              
        }],
        editable: "inline",
        destroy: true
    });

{
tabstrip.Add（）.Text（“常规点”）
.已选择（真）
.Content（（）=>
{ %>
{ %> 
$（文档）.ready（函数（）{
dataSource=新建kendo.data.dataSource({
运输：{
阅读：{
网址：xyzread，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
键入：“获取”
},
更新：{
url:xyzupdate，
数据类型：“json”，
类型：“PUT”
},
创建：{
url:xyzcreate，
数据类型：“json”，
类型：“职位”
},
销毁：{
url：函数（数据）{
返回xyzdelete，
},
键入：“删除”，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”
}
},
模式：{
型号：{
id:“id”，
字段：{
备注:{
类型：“字符串”
},                           
说明：{
类型：“字符串”
}                            
}
}
}
});
var grid=$（“#generalPointGrid”）.kendoGrid({
数据源：数据源，
工具栏：[“创建”]，
列：[{
字段：“备注”，
标题：“备注”
}, {
字段：“说明”，
标题：“说明”
}, {
命令：[“编辑”、“销毁”]，
标题：“
}],
可编辑：“内联”，
毁灭：真的
});
dataSource1=新建kendo.data.DataSource({
运输：{
阅读：{
网址：xyzread，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
键入：“获取”
},
更新：{
url:xyzupdate，
数据类型：“json”，
类型：“PUT”
},
创建：{
url:xyzcreate，
数据类型：“json”，
类型：“职位”
},
销毁：{
url：函数（数据）{
返回xyzdelete，
},
键入：“删除”，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”
},
},
模式：{
型号：{
id:“id”，
字段：{
备注:{
类型：“字符串”
},                           
说明：{
类型：“字符串”
}                            
}
}
}
});
var grid=$（“#importantPointGrid”）.kendoGrid({
数据源：数据源，
工具栏：[“创建”]，
列：[{
字段：“备注”，
标题：“备注”
}, {
字段：“说明”，
标题：“说明”
}, {
命令：[“编辑”、“销毁”]，
标题：“
}],
可编辑：“内联”，
毁灭：真的
});

---

剑道UI选项卡条有一个select事件，您可以使用该事件在导航到新选项卡之前执行检查。以下是相关文档：