While working in my Angular-Kendo setup, I have implemented a Drag/Drop functionality on the rows of two grids.

I referred to this example as the basis for my code : http://jsfiddle.net/BtkCf/4/

The row drag feature is functioning properly, but it seems to be conflicting with the ROW EDIT functionality.

How can I disable this during row editing? I attempted the following in my grid code:

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

However, I am still unable to access the row text when editing.

I am looking for guidance on how to better manage these CLICK() events - specifically, enabling and disabling them as required.

This is the HTML definition of the "userKriGrid" grid:

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

The JavaScript code for setting up the "userKriGrid" grid options :

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

Further adding the Kendo created listener for both grids:

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

Here's a screen shot showing the EDIT button on a row (from the "userKriGrid")

Another screen shot after clicking on the EDIT icon - now unable to click and modify the text !

Lastly, the DOM event code for enabling drag/drop functionality of a grid row:

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

        if (mainGrid == undefined) {
            return;
        }

        $.fn.reverse = [].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),
                    rangeLimit = mainDataSource.indexOf(mainDataSource.getByUid(draggedRows.first().attr("data-uid")));

                if (rangeLimit > beginningRangePosition) {
                    draggedRows.reverse();
                }

                draggedRows.each(function () {
                    var thisUid = $(this).attr("data-uid"),
                        itemToMove = mainDataSource.getByUid(thisUid);
                    mainDataSource.remove(itemToMove);
                    mainDataSource.insert(beginningRangePosition, itemToMove);
                });

                draggedRows.each(function () {
                    var thisUid = $(this).attr("data-uid");
                    mainDataSource.getByUid(thisUid).set("dirty", true);
                });

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