Editor In ListView
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.metro.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<div id='container'>
<div id='list'/>
<script type="text/x-kendo-tmpl" id="viewTemplate">
<div class="viewTemplate">
<span>${SkillName}</span>
<span class="edit-buttons">
<a class="k-button k-button-icontext k-edit-button" href="\\#">
<span class="k-icon k-edit"></span>Edit
</a>
<a class="k-button k-button-icontext k-delete-button" href="\\#">
<span class="k-icon k-delete"></span>Delete
</a>
</span>
</div>
</script>
<script type="text/x-kendo-tmpl" id="editTemplate">
<div class="editTemplate">
<span>
<input name="SkillName" required="required" validationMessage="required" />
<span data-for="SkillName" class="k-invalid-msg"></span>
</span>
<span class="edit-buttons">
<a class="k-button k-button-icontext k-update-button" href="\\#">
<span class="k-icon k-update"></span>Save
</a>
<a class="k-button k-button-icontext k-cancel-button" href="\\#">
<span class="k-icon k-cancel"></span>Cancel
</a>
</span>
</div>
</script>
</div>
JavaScript
var employee = {
ID: 1,
Name: 'Frank',
Skills: [{
ID: 1,
SkillID: 23,
SkillName: 'Code'},
{
ID: 2,
SkillID: 24,
SkillName: 'Design'}]
};
var listView = $("#list").kendoListView({
dataSource: employee.Skills,
template: kendo.template($("#viewTemplate").html()),
editTemplate: kendo.template($("#editTemplate").html()),
save: function(e) {
//i guess i transfer my data back to my original model here, since it does not do it for me
//the problem is, how do i know if the validation failed...
//why does it call save if it is bad?
console.warn(e.model);
},
edit: function(e) {
var item = $(e.item[0]);
var name = item.find('[name="SkillName"]');
name.kendoComboBox({
autobind: false,
placeholder: "gumby",
filter: "contains",
dataSource: ["one","two"]
});
}
}).data("kendoComboBox");