I have a popup in which i have created two tabs. Each tab, when opened, contains a kendo inline editable grid. This grid contains three columns among which one contains Edit and Delete button. On edit button click,the selected row will go into edit mode which allows the user to modify the data. This Edit button, once clicked will take its name as Update. After editing, if i do not click on the Update button and simply switch the tab, a message box should be displayed saying that "There are unsaved changes, please save the changes". How do i achieve this? It will be helpful if somebody can please help me resolve this issue. Code below.
<% 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: " "
}],
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: " "
}],
editable: "inline",
destroy: true
});
