I'm trying to use a treelist to display some local data until I'm ready to submit it to the server. Since it starts empty and it'll only be submitting later, which I'll be doing with a different bit of javascript, I don't have any ajax calls back to the server. I just want it using local data. I built the following example using your demo dojo.
<!DOCTYPE html>
<html>
<head>
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel=
"stylesheet"
href=
"http://cdn.kendostatic.com/2015.1.408/styles/kendo.common.min.css"
/>
<link rel=
"stylesheet"
href=
"http://cdn.kendostatic.com/2015.1.408/styles/kendo.blueopal.min.css"
/>
<link rel=
"stylesheet"
href=
"http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.min.css"
/>
<link rel=
"stylesheet"
href=
"http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.blueopal.min.css"
/>
<script src=
"http://cdn.kendostatic.com/2015.1.408/js/jquery.min.js"
></script>
<script src=
"http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"
></script>
</head>
<body>
<div id=
"example"
>
<div id=
"treelist"
></div>
<button id=
"btnClick"
onclick=
"clickMe()"
>Click Me</button>
<script>
$(document).ready(
function
() {
var
dataSource =
new
kendo.data.TreeListDataSource({
schema: {
model: {
id:
"id"
,
expanded:
true
}
}
});
$(
"#treelist"
).kendoTreeList({
dataSource: dataSource,
editable:
true
,
height: 540,
columns: [
{ field:
"Position"
},
{ field:
"Name"
},
{ command: [
"edit"
] }
]
});
});
function
clickMe(){
$(
"#treelist"
).data(
"kendoTreeList"
).dataSource.add(
{
id: 123232,
parentId:
null
,
Position:
"CEO"
,
Name:
"Jeff Bezos"
});
}
</script>
</div>
</body>
</html>
As you can see, it's a pretty simple example where I click a button to add a row to the treelist's datasource and the new row adds just fine. The problem is when I try to edit the row after adding it. When I click "Update" it just removes the row instead of saving the changes.
Please advise.