双击编辑 Kendo Grid incell 或内联编辑答案

【问题标题】：Editing Kendo Grid incell or inline editing on double click双击编辑 Kendo Grid incell 或内联编辑
【发布时间】：2012-12-06 17:34:16
【问题描述】：

我在应用程序中使用 Kendo Grid。要求是使网格在双击时可编辑。我正在处理.dblclick 事件并使用.editCell(cell) 以编程方式使单元格可编辑。问题是当有人在单元格外单击或按下输入或返回按钮时我需要保存更改并在有人单击 ESC 时撤消。此外，当日期无效时，我不应该保存它。

我尝试了聚焦、模糊、点击事件，但有些有效，有些无效，有些重叠并且不让单元格打开。

这是我的代码。

//code for double click;
$('#grid').delegate('tbody>tr>td','dblclick', function (e) {
        console.log("double clicked");
        if($(".k-grid-edit-row").length <= 0) {
            $("#grid").data("kendoGrid").editCell($(this));
           }
    });

$('#grid tbody').on('blur','input,select,textarea',saveGrid);
    $('#grid').delegate('tbody>tr>td','focusout',function() {
        console.log("inside focusout");
        if($(this).hasClass("k-edit-cell"))
            return;
        saveGrid();
    });
    $('#grid').delegate('tbody>tr>td','click', function(e){
        console.log("singleClick called");
        if($(this).hasClass("k-edit-cell"))
            return;
        saveGrid();
    });

    function saveGrid() {
        console.log("save grid called");
        var grid = $("#grid").data("kendoGrid");
        var editedCellIndex =grid.cellIndex(grid.tbody.find(">tr td.k-edit-cell"));
        console.log("this cell index:"+grid.cellIndex($(this)));
        console.log(" Edited cell index :"+editedCellIndex);
        if(editedCellIndex<0) {
            return false;
        } 
        if($(".k-grid-edit-row").hasClass("k-invalid")) {
            return false;
        }
        grid.closeCell();
        console.log("saving changes");
        grid.saveChanges();
    }

如果您需要更多信息，请告诉我。

【问题讨论】：

谁能帮我解决这个问题。
你能把它放在一个 jsfiddle 或 jsbin 中并尽你所能实现它吗？这样我们就可以进来看看我们是否可以帮助实施其余/部分不起作用的地方。

标签： php jquery kendo-ui

【解决方案1】：

要在有人按下网格外时获取事件（调整函数以检查单元格外），请使用以下内容：

$('html').on('click', function (e) {
if (!$(e.target).parent().hasClass('k-master-row') && !$(e.target).hasClass('k-input')) {
    var grid = $("#Grid").data("kendoGrid")
    //use this if the row was selected
    //grid.clearSelection();

    //do something
    grid.saveChanges();
}

});

请注意，这会扰乱其他点击事件，它会阻止我在我的项目中在任何其他 jQuery 代码中使用 .on()（所以我使用已弃用的 .live() ），所以它不是一个理想的解决方案

【讨论】：