Grid Reorder Not Working

[harrington101]

Bug report

The code in the article posted here: https://docs.telerik.com/kendo-ui/knowledge-base/grid-drag-drop-with-locked-columns?_ga=2.13659696.642410415.1660574471-1260678978.1645465520 does not work properly. It has several bugs:

1. The placeholder does not span both tables
2. Some rows in the unlocked table disappear while the locked ones remain.
3. The column widths are not preserved in the hint.

Reproduction of the problem

Go to the above article. Click preview on the sample code. Drag the row up and down a few times and drop the row back on it's old position. You'll see the above reported bugs.

Expected/desired behavior

The placeholder should be both halves of the table combined and span the width of the table. The columns in the hint should be the same width as the columns in the table. Rows should not disappear from the unlocked side while remaining in the locked side.

Solution

function EnableDragAndDropForGrid(gridElement, onChangeFunction) {
    if (!gridElement) {
        gridElement = ".k-grid";
    }
    let grid = $(gridElement).data("kendoGrid");
    if (!grid.lockedTable) {
        return false;
    }
    let gridWidth = $(gridElement).width();
    let lockedWidth = $(gridElement).find(".k-grid-header-locked").width() || 0;
    let unlockedWidth = $(gridElement).find(".k-grid-header-wrap table").width() || 0;
    let tableWidth = lockedWidth + unlockedWidth + 2;
    let placeholderPosition = null;
    grid.lockedTable.kendoSortable({
        axis: "y",
        filter: ">tbody >tr",
        hint: function(element) {
            let unlockedPortion = grid.table.find("tr[data-uid=" + element.data("uid") + "]").children();
            let hint = $(`<div style="overflow: hidden; width: ${gridWidth}px;"><table style="background: whitesmoke; width: ${tableWidth}px;" class="k-grid k-widget"></table></div>`);
            let colgroups = $(gridElement).find(".k-grid-header colgroup");
            let colgroupWidths = [];
            $.each(colgroups, function (index, group) {
                $.each($(group).children(), function (index2, child) {
                    colgroupWidths.push($(child).css("width"));
                });
            });
            hint.find("table").append(element.clone().append(unlockedPortion.clone()));
            $.each(hint.find("td"), function (index, col) {
                $(col).css("width", colgroupWidths[index]);
            });
            hint.css("opacity", 0.7);
            return hint;
        },
        cursor: "move",
        placeholder: function (element) {
            var unlockedRow = grid.table.find("tr[data-uid=" + element.data("uid") + "]");
            $(unlockedRow).before($(unlockedRow).clone().attr("data-uid", "").addClass("k-hover unlocked-placeholder"));
            $(unlockedRow).hide();
            let placeholder = element.clone();
            $(placeholder).attr("data-uid", "");
            return placeholder;
        },
        move: function (e) {
            //Set positions
            let lastPosition = placeholderPosition;
            placeholderPosition = this.indexOf(this.placeholder);
            let itemPosition = this.indexOf(e.item);
            let targetPosition = this.indexOf(e.target);

            //Get Elements
            let unlockedDraggingRow = $(gridElement).find(".k-grid-content tr.unlocked-placeholder");
            let targetElement = $(gridElement).find(".k-grid-content tr[data-uid=" + e.target.data("uid") + "]");

            //Find direction of move
            let movingUp = false; 
            if (lastPosition === null) {
                if (itemPosition > targetPosition) {
                    movingUp = true;
                }
            } else {
                if (lastPosition > placeholderPosition) {
                    movingUp = true;
                }
            }

            //Move the unlocked row
            if (movingUp) {
                targetElement.before(unlockedDraggingRow);
            } else {
                targetElement.after(unlockedDraggingRow);
            }
        },
        change: function (e) {
            let skip = grid.dataSource.skip() || 0;
            let newIndex = e.newIndex + skip;
            let dataItem = grid.dataSource.getByUid(e.item.data("uid"));
            grid.dataSource.remove(dataItem);
            grid.dataSource.insert(newIndex, dataItem);
            if (onChangeFunction) {
                onChangeFunction();
            }
            console.log(grid.dataSource.data());
        },
        start: function () {
            placeholderPosition = null;
        }
    });

}

Environment

Telerik site

• Kendo UI version: 2022.r.ddd
• jQuery version: x.y
• Browser: Chrome