Question

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

行拖动实际上工作正常，但现在它干扰了ROW EDIT功能。

如何在行编辑时将其关闭？我在下面的网格中试过这个：

  $('#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>

用于连接“userKriGrid”网格选项的javascript代码：

 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"
            }
        }
    };

这里我在两个网格上添加了Kendo创建的监听器：

    // 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按钮的屏幕截图（这是“userKriGrid”）

Kendo Grid EDIT button

点击编辑图标后的屏幕截图 - 我可以不再点击并修改文字了！

Kendo grid - after click EDIT icon

和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网格的编辑行功能。没有它，内部文本就变得不可编辑了。

Angular听众：

// 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);
            }
        });
  }

如何禁用Kendo可拖动事件

2 个答案: