2014-03-06 88 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