如何禁用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); 
      } 
     }); 
    }