2014-03-06 92 views
0

我有以下Kendo UI网格。我正在尝试提醒网格中的更新值。但我得到以下错误Kendo UI Grid错误 - 保存未定义

Uncaught ReferenceError: save is not defined

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

Fiddle

enter image description here

身体

<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

回答

1

绑定点击功能类似这样的,而不是常用的直列

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

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

DEMO

OR

把你的脚本后,您的DOM准备好,

DEMO2

enter image description here

+0

能否请您详细说明这是你在第二小提琴更新行? – Lijo

+1

我没有更新任何代码,但更改了选项(从onLoad到No wrap-in ),如上图所示。您可以在jsFiddle的左侧获得选项。 –

+0

Ohhh ..你提到关于jsFiddle :-)这两个选项有什么不同? – Lijo