Kendo UI Grid錯誤-未定義保存

Question

我有以下Kendo UI網格。 我試圖從網格中提醒更新的值。 但我收到以下錯誤

未捕獲ReferenceError：未定義保存

我們如何解決此錯誤並顯示網格中的所有更新值？

小提琴

身體

<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. 網格/批量編輯
2. Kendoui網格編輯提示和技巧
3. 行模板
4. 彈出式資料編輯

Answer 1

像這樣綁定單擊功能，而不是內聯

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

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

DEMO

要么

准備好您的dom后放好腳本，

DEMO2