How to disable Kendo draggable event

Question

In my Angular-Kendo environment, I am attaching a Drag/Drop event on the rows of two grids.

My code is based on this example : http://jsfiddle.net/BtkCf/4/

The row drag is actually working fine, but now it's interfering with the ROW EDIT function.

How can I turn this off upon row edit ? I've tried this in my grid below :

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

but I still can't access the row text upon editing.

What I really is need some guidance on how to further control these CLICK() events - i.e turn them on and off as needed.

Here's my 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 to wire-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"
            }
        }
    };   

and here I am adding the Kendo created listener on both grids:

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

Screen shot of my EDIT button on a row (this is the "userKriGrid")

Screen shot after I click on the EDIT icon - I can NO LONGER click and modify the text !

and the DOM event code to provide drag/drop of a grid row:

  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

in addition to user2983931's answer above, i'll add my solution which also dealt with the sortable grid rows.

The filter: option ignores the edit-row features of the Kendo grid. Without it, the inner text becomes uneditable.

Angular listener:

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

Answer 2

Currently trying to solve this one myself - found this - http://docs.telerik.com/kendo-ui/web/sortable/overview#sortable-items-with-inputs

edit: looks similar to this - Cannot select text in Kendo Sortable with handle

edit: i solved this on mine with the following setting in kendoSortable() -

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

the start event cancels selection for all rows when the grid is being edited and the ignore allows the edit boxes to be selected in my edit row.