2013-05-10 22 views
9

剣道グリッドのonEditCompleteに相当するイベントは、セルの内容を編集した後でのみ発生しますか?剣道グリッドonEditComplete

Documentationには「編集」イベントが記載されていますが、セルが編集モードになるとすぐに発生します(これはonBeginEditと同じです)。

私が見つけた望ましい動作の最も近いイベントは「保存」イベントでしたが、このイベントはセルの内容が変更されたときにのみ発生します。セルが編集モードから外れるとすぐに発生するイベントが欲しいです。

グリッドのeditmodeがincellに設定されています。

+0

Telerikの機能要求はTelerikで公開されましたか?この問題は3年前から開かれているようです。グリッドには「itemChange」イベントがありますが、文書化されておらず、列名も教えていません。 – Rolf

答えて

8

のでコメントに私は私の以前の回答を削除したため - 入力ボックス(または他の要素にblurイベントを使用して)は動作しているようです:

jqueryを使用して、テキストボックス(または他のインライン編集コントロール)のフォーカスが失われたときに発生するブラーイベントにバインドします。これをグリッド定義に追加してください...そして明らかにアラートをあなたのコードに置き換えてください。

edit: function (e) { 
     alert('Edit Fired'); 
     $('input.k-input.k-textbox').blur(function() { 
      alert('blur event called'); 
     }); 
    }, 

私は編集の私の完全なローカルソースがhere

サンプルインライン編集コードを変更することで、これをテストしてみた - グリッドDEFにのみ編集イベントを参照してください。

<div id="example" class="k-content"> 
    <div id="grid"></div> 

    <script> 
     $(document).ready(function() { 
      var crudServiceBaseUrl = "http://demos.kendoui.com/service", 
       dataSource = new kendo.data.DataSource({ 
        transport: { 
         read: { 
          url: crudServiceBaseUrl + "/Products", 
          dataType: "jsonp" 
         }, 
         update: { 
          url: crudServiceBaseUrl + "/Products/Update", 
          dataType: "jsonp" 
         }, 
         destroy: { 
          url: crudServiceBaseUrl + "/Products/Destroy", 
          dataType: "jsonp" 
         }, 
         create: { 
          url: crudServiceBaseUrl + "/Products/Create", 
          dataType: "jsonp" 
         }, 
         parameterMap: function (options, operation) { 
          if (operation !== "read" && options.models) { 
           return { models: kendo.stringify(options.models) }; 
          } 
         } 
        }, 
        batch: true, 
        pageSize: 20, 
        schema: { 
         model: { 
          id: "ProductID", 
          fields: { 
           ProductID: { editable: false, nullable: true }, 
           ProductName: { validation: { required: true } }, 
           UnitPrice: { type: "number", validation: { required: true, min: 1 } }, 
           Discontinued: { type: "boolean" }, 
           UnitsInStock: { type: "number", validation: { min: 0, required: true } } 
          } 
         } 
        } 
       }); 

      $("#grid").kendoGrid({ 
       dataSource: dataSource, 
       pageable: true, 
       height: 430, 
       toolbar: ["create"], 
       // added in hook to here to bind to edit element events. 
       // blur is fired when an element loses focus 
       edit: function (e) { 
        alert('Edit Fired'); 
        $('input.k-input.k-textbox').blur(function (e) { 
         alert('blur event called'); 
        }); 
       }, 
       columns: [ 
        "ProductName", 
        { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "100px" }, 
        { field: "UnitsInStock", title: "Units In Stock", width: "100px" }, 
        { field: "Discontinued", width: "100px" }, 
        { command: ["edit", "destroy"], title: "&nbsp;", width: "172px" }], 
       editable: "inline" 
      }); 
     }); 
    </script> 
</div> 
+0

データソースをリモートでバインドし、これを使用すると、データソース自体が変更されたときにイベントが発生することを意味します。私は、データソースがそのままであることを願っています。文字通り、セルが編集モードから外れる場合は、イベントを発生させるだけです。 – l46kok

+1

私はテキストボックス上のぼかしイベントにフックすることができました。これは、テキストボックスがフォーカスを失ったときにのみ発動する必要があります。テキストボックス以外の要素にフックする場合は、grid.editイベントコードのjqueryセレクタを変更してください - 私の編集を参照 –

1

あなたはChange Event

を試してみました「ユーザーがグリッドにテーブル行またはセルを選択したときに発生し

を変更します。」

例 - セル選択を使用するときに選択したデータ項目(複数可)を取得

<div id="grid"></div> 
<script> 
function grid_change(e) { 
    var selectedCells = this.select(); 
    var selectedDataItems = []; 
    for (var i = 0; i < selectedCells.length; i++) { 
    var dataItem = this.dataItem(selectedCells[i].parentNode); 
    if ($.inArray(dataItem, selectedDataItems) < 0) { 
     selectedDataItems.push(dataItem); 
    } 
    } 
    // selectedDataItems contains all selected data items 
} 
$("#grid").kendoGrid({ 
    columns: [ 
    { field: "name" }, 
    { field: "age" } 
    ], 
    dataSource: [ 
    { name: "Jane Doe", age: 30 }, 
    { name: "John Doe", age: 33 } 
    ], 
    selectable: "multiple, cell" 
}); 
var grid = $("#grid").data("kendoGrid"); 
grid.bind("change", grid_change); 
</script> 
+0

また、OPで明示的に指定されているように、編集がセルで完了したときに起動するイベントが必要です。あなたが提案したものは、onBeginEditと多少似ています。私が必要とするのはonEditCompleteです。 – l46kok

2

なぜあなたは "ぼかし"イベントを使用していませんか?

http://www.kendoui.com/forums/ui/window/possible-to-close-window-when-it-loses-focus-.aspx

$("#window").blur(function(){ 
     if ($(document.activeElement).closest(".k-window").length == 0) { 
     $("#window").data("kendoWindow").close(); 
     } 
    }); 

http://api.jquery.com/blur/

+0

このイベントは、インセル編集モードでグリッドで機能しますか? – l46kok

+0

私が知っているところでは、 "onEditComplete"のようなイベントはありません。 CSSセレクターで要素を取得し、ぼかし関数を設定することができます。これは: ".k-grid-content> table> tbody> tr> td"はhttp://demos.kendoui.c​​om/web/grid/editing-custom.htmlのCSSセレクタになります – user23031988