Editor In ListView

by grippstick

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: "Skill Name",
            dataTextField: "Name",
            dataValueField: "SkillID",
            filter: "contains",
            dataSource: {
                schema: {
                    data: 'd.Data',
                    total: 'd.Total'
                },
                pageSize: 10,
                serverPaging: true,
                serverFiltering: true,
                serverSorting: true,
                transport: {
                    read: {
                        url: "/echo/json/",
                        //using jsfiddle echo service to simulate JSON endpoint
                        dataType: "json",
                        type: "POST",
                        data: {
                            // /echo/json/ echoes the JSON which you pass as an argument
                            json: JSON.stringify({
                                d: {
                                    Data: [{
                                        ID: 23,
                                        Name: 'Code'},
                                    {
                                        ID: 24,
                     ...