ユーザー編集中に行データの変更をキャッチできるイベントはありますか？

私はAngularJS 'watch' functionのようなものが欲しいです。ユーザーが行を編集中に、イベントを発生させたい。 In this exampleこのイベントは、ユーザーが行をクリックしたときにキャッチしますが、ユーザーがデータを変更したときにしかキャッチできないイベントが必要です。ユーザー編集中に行データの変更をキャッチできるイベントはありますか？

出典

2016-09-14 GomuGomuNoRocket

グリッドのeditイベントでは、編集データ項目（e.model）とbindからそのchangeイベントへの参照を取得します。

edit: function(e) { 
    e.model.bind("change", function(j) { 
     // ... 
    }); 
}

UPDATE

あなたは、グリッド内のデータ項目やその他のコンテンツを更新したいテキストボックスまたは編集ウィジェットにkeyupハンドラをアタッチし、changeをトリガー、モデルとなるようにしたい場合更新。必要に応じて、モデル自体のchangeイベントを使用して、ページ上の他の値またはコンテンツを変更します。

 $(document).ready(function() { 
 
      var dataSource = new kendo.data.DataSource({ 
 
      pageSize: 20, 
 
      data: products, 
 
      schema: { 
 
       model: { 
 
       id: "ProductID", 
 
       fields: { 
 
        ProductID: { editable: false, nullable: true }, 
 
        ProductName: { validation: { required: true } }, 
 
        UnitsInStock: { type: "number", validation: { required: true } } 
 
       } 
 
       } 
 
      } 
 
      }); 
 

 
      $("#grid").kendoGrid({ 
 
      dataSource: dataSource, 
 
      pageable: true, 
 
      height: 550, 
 
      toolbar: ["create"], 
 
      columns: [ 
 
       { field: "ProductName", title: "Product Name" }, 
 
       { field: "UnitsInStock", title: "Units in Stock" }, 
 
       { title: "Product Name readonly", template: "<span id='Product#= ProductID#'>#= ProductName #</span>" }, 
 
       { command: "edit", title: " ", width: "150px" }], 
 
      editable: "inline", 
 
      edit: function(e) { 
 
       var model = e.model; 
 

 
       var input = e.container.find("[name=ProductName]"); 
 

 
       input.keyup(function(){ 
 
       input.trigger("change"); 
 
       }); 
 

 
       model.bind("change", function(j){ 
 
       if (j.field == "ProductName") { 
 
        model.set("UnitsInStock", model.get("UnitsInStock") + 1); 
 
        $("#Product" + model.get("ProductID")).html(model.get("ProductName")); 
 
       } 
 
       }); 
 
      } 
 
      }); 
 
     }); 
 

 
     function readOnlyEditor(container, options) { 
 
      container.html(options.model.get(options.field)); 
 
     }

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"/> 
 
    <title>Kendo UI Snippet</title> 
 

 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css"/> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.silver.min.css"/> 
 

 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script> 
 
    </head> 
 
    <body> 
 

 
    <script src="http://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script> 
 

 
     <div id="grid"></div> 
 

 
    </body> 
 
</html>

出典

2016-09-15 18:50:31 dimodi

私はこれは私が欲しいということであると思ういけません。このデータ値更新の例（http://demos.telerik.com/kendo-ui/mvvm/elements）を参照してください。ユーザーがいなければ、他の場所のテキストモデルをすぐに更新する。私は編集可能なモードで私の剣道のグリッドでこの動作をしたいです – GomuGomuNoRocket

私は "どこでもユーザーがクリックせずに"を意味するのか分かりません。 Model状態は、最初に 'kendo.bind（）'呼び出しの結果として構築されます。その後、モデル状態は、「入力」または「選択」の「変更」イベントが発生した場合にのみ変化する。グリッド編集フォームの動作は似ています。 – dimodi

この例では2つの入力を示しています。最初はモデルを変更しますが、rigth形式では、別のイベントが発生するまで変更が表示されません。 2番目の入力には異なる動作があり、モデルの変更をすぐに見ることができます。グリッドは編集可能モードでは最初の入力と同じ動作をしています。変更して2番目の入力と同じように動作します – GomuGomuNoRocket

ユーザー編集中に行データの変更をキャッチできるイベントはありますか？

答えて

関連する問題