添加新行與它的價值劍道電網清除先前添加的行

Question

我使用kendoGrid並點擊按鈕添加新行的值，但我的問題是，當我加入第二行的值第一行變清晰了，當我添加第三行時，第一行和第二行的值得到了清除。 這是我的代碼。

<script type="text/javascript"> 
    $(".AddNewRemark").click(function() { 
    //grid.addRow(); 
    var dataSource = grid.dataSource; 
    var total = dataSource.data().length; 
    dataSource.insert(total + 1, {}); 
    var it = $(this).text().trim(); 
    $(".RemarkDescription")[total].value = it; 
    $(".RemarkDescription").attr('readonly', 'readonly'); 
    }) 
</script> 

     @(Html.Kendo().Grid<Invoice.Models.ViewModels.RemarkViewModel>() 
       .Name("RemarkAdd") 
       .TableHtmlAttributes(new { style = "height:20px; " }) 
       .Columns(columns => 
       { 
        columns.Bound(p => p.RemarkID).Hidden(true).ClientTemplate("#= RemarkID#" + "<input type='hidden' class='RemarkID' value='#=RemarkID#' />"); 

        columns.Bound(p => p.RemarkDescription).Title("Type").Width(10).ClientTemplate("#= RemarkDescription#" + "<input type='text' class='RemarkDescription' value='#data.RemarkDescription#' />"); 
        columns.Bound(p => p.Remark).Title("Remark").Width(50).ClientTemplate("#= Remark#" + "<input type='hidden' class='Remark' value='#=Remark#' />"); 

       }) 
       .Editable(editable => editable.Mode(GridEditMode.InCell)) 
       .Navigatable() 
       .Sortable() 
       .Scrollable(scr => scr.Height(200)) 
       .Scrollable() 
       .DataSource(dataSource => dataSource 
        .Ajax() 
        .Batch(true) 
        .ServerOperation(false) 
        .Events(events => events.Error("error_handler")) 
        .Model(model => model.Id(p => p.RemarkID)) 
        .Create("Editing_Create", "Grid") 
        .Read("Remark_Read", "Document") 
           .Update("Editing_Update", "Grid")//.Events(e=>e.Change("Edit")) 
        .Destroy("Editing_Destroy", "Grid") 
        ) 
      ) 
      <button class="AddNewRemark">Add Remark</button> 

Answer 1

這是因爲每次修改dataSource時都會反彈Grid，因爲您沒有更新基礎模型（您只需修改html）。

更好看看this example：

當數據綁定：

function editAll() { 
    var theGrid = $("#grid").data("kendoGrid"); 
    $("#grid tbody").find('tr').each(function() { 
    var model = theGrid.dataItem(this); 
     kendo.bind(this,model); 
    }); 
    $("#grid").focus(); 
}