After implement Drag and Drop feature, Inline edit text box got not editable

[administrator]

I have inline edit feature in my kendo grid, i newly introduce Drag and Drop feature for this grid..But after introduced that feature, My inline edit textbox seems like not editable... It might be due to some style changes... Please help me to find the issue....i attach my jquery code to implement the feature of drag and drop

    $.fn.reverse = [].reverse;
    $(document).ready(function () {
        var mainGrid = $("#grid_Task").data("kendoGrid");
        var mainDataSource = $("#grid_Task").data("kendoGrid").dataSource;

        var selectedClass = 'k-state-selected';
        $(document).on('click', '#grid_Task 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");
                var target = mainDataSource.getByUid($(e.draggable.currentTarget).data("uid"));
                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>');
                };

[Atanas Korchev]

Hello,

I couldn't reproduce this problem in our sortable grid demo. Here is my test: http://trykendoui.telerik.com/@korchev/UloR. Does it work at your side? If not - what are the steps required to reproduce the problem? If it works - how is that demo different from your real case?

Regards,
Atanas Korchev
Telerik

 

 

[Jon]

I think I have the same problem, I tweeked a dojo to demonstrate

http://dojo.telerik.com/amAnIKal

[Alex Hajigeorgieva]

Hello, Jon,

Thank you for the provided Dojo.

The Sortable widget listens for the mousedown event and this is why you are not able to click on the inputs but you are able to tab and edit.

To enable the clicks into the inputs of an editable grid while using a Sortable, just exclude the editable row from the filter:

https://docs.telerik.com/kendo-ui/controls/interactivity/sortable/integration/grid#reordering-in-editable-grids

filter: ">tbody >tr:not(.k-grid-edit-row)",

Here is the updated Dojo for your reference:

http://dojo.telerik.com/amAnIKal/6

Kind Regards,

Alex Hajigeorgieva

Telerik

 

 

[Dario]

this is the truly correct answer without strange workarounds on blur/focus/input and such. thanks

[Jon]

That appears to do the trick.  Thanks.

Perhaps adding some documentation / examples at https://demos.telerik.com/kendo-ui/sortable/integration-grid.

Integration - Grid w/ Inline edit or some such.

[Alex Hajigeorgieva]

Hi, Jon,

Thank you for the feedback.

I have added it to the internal Support tasks so that it can be added to the demos descriptions in the future.

Thank you for sharing where you have looked, we appreciate it.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik