Skip to content

Instantly share code, notes, and snippets.

@MatteoOreficeIT

MatteoOreficeIT/treelist-problem-restoring-deleted-node.html

Last active November 23, 2017 12:01
Show Gist options
  • Save MatteoOreficeIT/60fe4b9ccfe1d7b79b88793442376124 to your computer and use it in GitHub Desktop.
Save MatteoOreficeIT/60fe4b9ccfe1d7b79b88793442376124 to your computer and use it in GitHub Desktop.
Download ZIP
Kendo TreeList cannot restore deleted node's children upon dataSource errors
Raw
treelist-problem-restoring-deleted-node.html
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/treelist/editing">
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="treelist"></div>
<script>
$(document).ready(function() {
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service";
var dataSource = new kendo.data.TreeListDataSource({
error: function(e) {
kendo.confirm('Now I will execute dataSource.cancelChanges() ... ')
.then(
function(e) {
dataSource.cancelChanges();
return kendo.confirm('But unfortunate children were lost... The last chance is calling dataSource.read(), should I execute it ?');
},
function(e) {
return false;
}
)
.then(
function() {
dataSource.read();
}
)
},
transport: {
destroy: function(e) {
kendo.confirm('DESTROYING: ' + e.data.LastName).done(function() {
e.error({}, "500", "fake error");
})
},
read: function(e) {
// on success
e.success([{
EmployeeId: 1,
ReportsTo: null,
FirstName: 'Matteo',
LastName: 'Orefice',
HireDate: new Date(),
Phone: '+39.32597',
HireDate: new Date(),
BirthDate: new Date(),
Extension: '1'
},
{
EmployeeId: 2,
ReportsTo: null,
FirstName: 'Paolo',
LastName: 'Lozito',
HireDate: new Date(),
Phone: '+39.32597',
HireDate: new Date(),
BirthDate: new Date(),
Extension: '1'
},
{
EmployeeId: 3,
ReportsTo: 2,
FirstName: 'Fabio',
LastName: 'Barbara',
HireDate: new Date(),
Phone: '+39.32597',
HireDate: new Date(),
BirthDate: new Date(),
Extension: '1'
}
]);
// on failure
//e.error({error:'myerror'}, "500", "fake error");
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {
models: kendo.stringify(options.models)
};
}
}
},
schema: {
model: {
id: "EmployeeId",
parentId: "ReportsTo",
fields: {
EmployeeId: {
type: "number",
editable: false,
nullable: false
},
ReportsTo: {
nullable: true,
type: "number"
},
FirstName: {
validation: {
required: true
}
},
LastName: {
validation: {
required: true
}
},
HireDate: {
type: "date"
},
Phone: {
type: "string"
},
HireDate: {
type: "date"
},
BirthDate: {
type: "date"
},
Extension: {
type: "number",
validation: {
min: 0,
required: true
}
},
Position: {
type: "string"
}
},
expanded: true
}
}
});
$("#treelist").kendoTreeList({
dataSource: dataSource,
toolbar: ["create"],
editable: true,
height: 540,
columns: [{
field: "FirstName",
expandable: true,
title: "First Name",
width: 220
},
{
field: "LastName",
title: "Last Name",
width: 100
},
{
field: "Position"
},
{
field: "HireDate",
title: "Hire Date",
format: "{0:MMMM d, yyyy}"
},
{
field: "Phone",
title: "Phone"
},
{
field: "Extension",
title: "Ext",
format: "{0:#}"
},
{
title: "Edit",
command: ["createChild", "destroy"],
width: 250,
attributes: {
style: "text-align: center;"
}
}
]
});
});
</script>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment