如何禁用Kendo可拖动事件

Question

在我的Angular-Kendo环境中，我在两个网格的行上附加了拖放事件。

我的代码是基于这个例子：http://jsfiddle.net/BtkCf/4/

行阻力实际上是工作正常，但现在它与行编辑功能的干扰。

如何在行编辑时关闭此功能？我试过在我的网格如下：

$('#userKriGrid tbody tr').off(); 

但我仍然无法在编辑时访问行文本。

我真的需要一些关于如何进一步控制这些CLICK（）事件的指导 - 即根据需要打开和关闭它们。

这里的 “userKriGrid” 网格我的HTML定义：

<span id="userKriGrid" 
    kendo-grid="vm.userKriGrid" 
    k-data-source="vm.kriUserGridDS" 
k-options="vm.userKriGridOptions" 
    k-rebind="vm.userKriGridOptions"> 
</span> 

的JavaScript代码线了 “userKriGrid” 网格选项：

vm.userKriGridOptions = { // Kendo grid - USER KRI... 
     selectable: true, 
     sortable: true, 
     pageable: true, 
     resizable: true, 
     columns: [ 
      { field: "id", width: "10px", hidden: true }, 
      { field: "kri_group", width: "100px" }, 
      { field: "kri", width: "110px" }, 
      { field: "kri_alias", title: "Column Alias", width: "80px" }, 
      { field: "aggreg_formula", title:"formu", width: "170px", hidden: false }, 
      { command: [{ name: "edit", text: '' }, { name: "destroy", text: '' }], width: 140 } 
     ], 
     editable: "inline", 
     confirmation: false,    
     toolbar: ["create"], 
     edit: function(e){ 
      $('#userKriGrid tbody tr').off(); // ATTEMPT TO TURN OFF CLICK EVENT ! 
     }, 
     messages: { 
      commands: { 
       cancel: "Cancel", 
       canceledit: "Cancel", 
       create: "kri", 
       destroy: "Delete", 
       edit: "Edit", 
       save: "Save changes", 
       select: "Select", 
       update: "Update" 
      } 
     } 
    }; 

，在这里我加入剑道创建在两个网格上的监听器：

// ADD LISTNER TO KENDO GRID CREATED EVENT 
    $scope.$on("kendoWidgetCreated", function (ev, widget) { 
     if (widget.element[0].id == "userDimenGrid"){     
      addDragDropDimenGridRow();     
     } 
     if (widget.element[0].id == "userKriGrid") { 
      addDragDropKRIGridRow(); 
     } 
    }); 

我的EDIT按钮在一行上的屏幕截图（这是“userKri网格“）

屏幕截图后，我点击编辑图标 - 我不能再点击和修改文字！

和DOM事件代码提供了网格行的拖/放：

function addDragDropKRIGridRow() { 
     var mainGrid = $("#userKriGrid").data("kendoGrid"); 
     var mainDataSource = vm.kriUserGridDS; 
     var selectedClass = 'k-state-selected'; 

     if (mainGrid == undefined) { 
      // special case here when processAggregationResponse() is called as a result of a promise; 
      // then we redirect to dashboard, but reportmain processing has not comlpeted. 
      return; 
     } 

     $.fn.reverse = [].reverse; //save a new function from Array.reverse 

     $(document).on('click', '#userKriGrid tbody tr', function (e) { 
      if (e.ctrlKey || e.metaKey) { 
       $(this).toggleClass(selectedClass); 
      } else { 
       $(this).addClass(selectedClass).siblings().removeClass(selectedClass); 
      } 
     }); 

     mainGrid.table.kendoDraggable({ 
      filter: "tbody tr", 
      group: "gridGroup", 
      axis: "y", 
      hint: function (item) { 
       var helper = $('<div class="k-grid k-widget drag-helper"/>'); 
       if (!item.hasClass(selectedClass)) { 
        item.addClass(selectedClass).siblings().removeClass(selectedClass); 
       } 
       var elements = item.parent().children('.' + selectedClass).clone(); 
       item.data('multidrag', elements).siblings('.' + selectedClass).remove(); 
       return helper.append(elements); 
      } 
     }); 
     mainGrid.table.kendoDropTarget({ 
      group: "gridGroup", 
      drop: function (e) { 

       var draggedRows = e.draggable.hint.find("tr"); 
       e.draggable.hint.hide(); 
       var dropLocation = $(document.elementFromPoint(e.clientX, e.clientY)), 
        dropGridRecord = mainDataSource.getByUid(dropLocation.parent().attr("data-uid")) 
       if (dropLocation.is("th")) { 
        return; 
       } 

       var beginningRangePosition = mainDataSource.indexOf(dropGridRecord),//beginning of the range of dropped row(s) 
        rangeLimit = mainDataSource.indexOf(mainDataSource.getByUid(draggedRows.first().attr("data-uid")));//start of the range of where the rows were dragged from 


       //if dragging up, get the end of the range instead of the start 
       if (rangeLimit > beginningRangePosition) { 
        draggedRows.reverse();//reverse the records so that as they are being placed, they come out in the correct order 
       } 

       //assign new spot in the main grid to each dragged row 
       draggedRows.each(function() { 
        var thisUid = $(this).attr("data-uid"), 
         itemToMove = mainDataSource.getByUid(thisUid); 
        mainDataSource.remove(itemToMove); 
        mainDataSource.insert(beginningRangePosition, itemToMove); 
       }); 


       //set the main grid moved rows to be dirty 
       draggedRows.each(function() { 
        var thisUid = $(this).attr("data-uid"); 
        mainDataSource.getByUid(thisUid).set("dirty", true); 
       }); 

       //remark things as visibly dirty 
       var dirtyItems = $.grep(mainDataSource.view(), function (e) { return e.dirty === true; }); 
       for (var a = 0; a < dirtyItems.length; a++) { 
        var thisItem = dirtyItems[a]; 
        mainGrid.tbody.find("tr[data-uid='" + thisItem.get("uid") + "']").find("td:eq(0)").addClass("k-dirty-cell"); 
        mainGrid.tbody.find("tr[data-uid='" + thisItem.get("uid") + "']").find("td:eq(0)").prepend('<span class="k-dirty"></span>') 
       }; 
      } 
     }); 
    } 

Answer 1

目前正在努力解决这个问题一个自己 - 发现了这一点 - http://docs.telerik.com/kendo-ui/web/sortable/overview#sortable-items-with-inputs

编辑：看起来类似于此 - Cannot select text in Kendo Sortable with handle

编辑：我解决了这个与我的在kendoSortable（）由于设置 - 电网正在编辑时

start: function(e){ 
    if($('#wims-grid-actionstep').find('.k-grid-edit-row').length > 0){  
              e.preventDefault(); return false;} 
    }, 
ignore: ".k-grid-edit-row *", 

启动事件取消选择所有行，并忽略允许在我的编辑行为被选择的编辑框。

Answer 2

除了上面的user2983931的回答之外，我还会添加我的解决方案，它也处理可排序的网格行。

filter：选项会忽略Kendo网格的编辑行功能。没有它，内部文本就变得不可编辑。

角听众：

// ADD LISTENER TO KENDO GRID CREATED EVENT 
    $scope.$on("kendoWidgetCreated", function (ev, widget) { 
     if (widget.element[0].id == "userKriGrid") { 
      kendoSortableGrid("KRI"); 
     } 
    }); 

function kendoSortableGrid(gridtype) { 
grid.table.kendoSortable({ 
      filter: ">tbody >tr:not(.k-grid-edit-row)", 
      hint: $.noop, 
      cursor: "move", 
      ignore: "input", 
      placeholder: function (element) { 
       return element.clone().addClass("k-state-hover").css("opacity", 0.65); 
      }, 
      container: cont, 
      change: function (e) { 
       var skip = grid.dataSource.skip(), 
        oldIndex = e.oldIndex + skip, 
        newIndex = e.newIndex + skip, 
        data = grid.dataSource.data(), 
        dataItem = grid.dataSource.getByUid(e.item.data("uid")); 

       grid.dataSource.remove(dataItem); 
       grid.dataSource.insert(newIndex, dataItem); 
      } 
     }); 
    }