2013-05-10 73 views
9

是否存在与Kendo Grid的onEditComplete等价的事件,其中事件仅在单元格的内容被编辑后触发?Kendo Grid相当于onEditComplete

Documentation提到“编辑”事件,但是一旦单元格进入编辑模式就会触发(所以这相当于onBeginEdit)。

我发现的具有所需行为的最接近事件是“保存”事件,但此事件仅在单元格内容发生更改时触发。我希望一旦细胞退出编辑模式就会触发事件。

网格的editmode设置为incell。

+0

由于这个问题似乎已经开放三年了,而且Telerik没有提供正式的解决方案 - 您是否在Telerik开放功能请求?网格中有一个“itemChange”事件,但它没有记录,也没有告诉你列名。 – Rolf 2016-04-14 13:57:34

回答

8

所以由于评论我已经打消了我以前的答案 - 使用的输入框(或其他元素的blur事件)似乎工作:

在grid.edit事件上,使用jquery绑定到文本框(或任何其他内联编辑控件)的blur事件时会在焦点丢失时触发。将此附加到网格定义中......并且显然将您的代码替换为警报。

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

我已经通过修改样本联编辑代码here

编辑的我完全本地源测试,这一点 - 只看到对电网高清编辑事件:

<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 2013-06-06 07:35:46

+1

我设法挂钩到文本框中的模糊事件,应该只在文本框失去焦点时触发 - 我已经测试过。如果你想钩入除文本框之外的任何其他元素,只需更改grid.edit事件代码中的jquery选择器 - 请参阅我的编辑 – 2013-06-06 09:02:14

1

您是否尝试过Change Event

“改变

当用户选择网格中的一个表行或单元格被解雇。”

示例 - 使用电池时选择获得所选择的数据项目(S)

<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 2013-06-06 06:00:01

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

此事件是否适用于具有incell编辑模式的网格? – l46kok 2013-06-06 07:36:43

+0

从我所知道的没有像“onEditComplete”这样的事件。但你可以用CSS选择器获取元素并设置模糊功能。这个:“.k-grid-content> table> tbody> tr> td”将成为http://demos.kendoui.c​​om/web/grid/editing-custom.html的css选择器。 – user23031988 2013-06-06 08:28:24