Question

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

 <% 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
    });

Answer 1

Kendo UI TabStrip有一个可以使用的select事件，可以在导航到新选项卡之前执行检查。以下是有关它的文档：

http://docs.telerik.com/kendo-ui/api/javascript/ui/tabstrip#events-select

如果在Kendo内联编辑网格中未保存更改时，如何在弹出窗口中显示消息框

1 个答案: