Kendo UI Grid 错误 - 未定义保存

Question

我关注Kendo UI 网格。我试图从网格中提醒更新的值。但我收到以下错误

未捕获的引用错误：未定义保存

我们如何解决这个错误并显示网格中所有更新的值？

Fiddle

身体

<div id="grid"></div>
<br />
<input type="button" value="Save Row" onclick="save();" />
<input type="button" value="Submit To Server" onclick="" />

<script id="gridItems" type="text/x-kendo-template">
    <tr data-uid="#= uid #">
        <td title="#= EmpName #">
            #= EmpName #
        </td>
        <td title="#= Department #">
            #= Department #
        </td>
    </tr>
</script>

Javascript

var records = [
    {
        "foo": 1,
         "EmpName":"A1",
         "Department": "D1"
    },
    {
        "foo": 2,
        "EmpName":"A2",
        "Department": "D2"
    }
              ];

var myDataSource = new kendo.data.DataSource({
    data: records,
    schema: {
        model: {
            id: "foo",
            fields: {
                    foo: {type: "number"},
                    EmpName: {type: "string"},
                    Department: {type: "string"}
                    }
                }            
            }
});

var grid = $("#grid").kendoGrid({
    dataSource: myDataSource,
    columns: ["EmpName", "Department"],
    editable: "inline",
    selectable: "row",
    rowTemplate: kendo.template($("#gridItems").html()),

    dataBound: function() 
    {
        //Click on each row
        $("#grid tbody tr").on("click", function(e) 
        {          
            if (!$(this).hasClass('k-grid-edit-row')) 
            {
                //Make the row editable
                $("#grid").data("kendoGrid").editRow($(this));
            }
        });
    }
}).data("kendoGrid");

function save() 
{
    var row = $("#grid tbody").find(".k-grid-edit-row"); 
    if(row.length == 1) 
    {
        $("#grid").data("kendoGrid").saveRow(row);
    }

    var updatedData = grid.dataSource.data();
    alert(updatedData.length);

    for (var i = 0; i < updatedData.length; i++) 
    {
       var dataitem = updatedData[i].EmpName;
       alert(dataitem);
    }


}

参考文献

1. Grid / Batch editing
2. Kendoui Grid Editing Tips and tricks
3. Row-Template
4. Pop-up Data Editing

Answer 1

像这样绑定点击函数而不是内联使用

<input type="button" id="saveVal" value="Save Row"  />

$('#saveVal').click(function (){
     save();
});

DEMO

或

在你的 dom 准备好后放置你的脚本，

DEMO2