How to disable a draggable row event on a grid

[Bob]

I have a Kendo Grid with some "kendoDraggable()" methods on it. This allows me to drag/drop the rows (i.e. reordering rows).

It's based on this : http://jsfiddle.net/BtkCf/4/

The drag/drop of the rows works great, but it then almost completely disables the Edit/Update functions on the grid. That is, the Edit is buggy and won't let me access the cell's text content.

In my attached screen shots, I show the portion of the grid I'm trying to edit. I can click on the EDIT/UPDATE buttons, but CANNOT access the text. There's no error whatsoever.

How can I safely disable the kendoDraggable() events ?

I've tried this, but it doesn't work :

  

$('#userKriGrid tbody tr').off("click", '**');

and neither does this :

mainGrid.table.kendoDestroy()

HTML def:

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

and here's the function in my angular controller :

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

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

[Alexander Valchev]

Hi Bob,

I already replied in the support thread that you submitted on the same subject. For convenience I will paste my reply here as well.

The example you referenced is outdated. In latter Kendo UI releases we introduced a Sortable widget which can be used to reorder Grid rows using drag and drop. For more information please check this demo and this help topic. In order to resolve the editing issues you should use a more specific filter selector that excludes the item that is currently in edit mode. For example .filter(">tbody >tr:not(.k-grid-edit-row)". In this way the Sortable functionality will not interfere with Grid's editing feature.

In case you prefer using the current approach you may exclude the editor inputs using the ignore option of the Draggable.

• http://docs.telerik.com/kendo-ui/api/javascript/ui/draggable#configuration-ignore

I hope this information will help.

Regards,
Alexander Valchev
Telerik