function enableKendoGridLockedDND(gridElement) {
    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;
    grid.lockedTable.kendoSortable({
        axis: "y",
        filter: ">tbody >tr",
        hint: function(element) {
            var unlockedPortion = grid.table.find("tr[data-uid=" + element.data("uid") + "]").children();
            let table = $(`<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"));
                });
            });
            table.find("table").append(element.clone().append(unlockedPortion));
            $.each(table.find("td"), function (index, col) {
                $(col).css("width", colgroupWidths[index]);
            });
            console.log(table);
            table.css("opacity", 0.7);
            return table;
        },
        cursor: "move",
        placeholder: function (element) {
            return element.clone().css({
                "opacity": 0.3,
                "border": "1px dashed #000000"
            });
        //    console.log("placeholder", element);
        //    var unlockedRow = grid.table.find("tr[data-uid=" + element.data("uid") + "]");
        //    var unlockedPortion = unlockedRow.children();
        //    console.log(element);
        //    return element;
        //   // return $(`<tr class="w-100 grid-placeholder" style="background: green;"><td>Hello World</td><td></td><td></td></tr>`);
        },
        //move: function (e) {
        //    let event = e.draggableEvent;
        //    console.log("event", event);
        //    let item = e.item;
        //    let itemUID = $(item).data("uid");
        //    console.log("UID", itemUID);
        //    console.log("item", item);
        //    let unlockedDraggingRow = grid.table.find("tr[data-uid=" + item.data("uid") + "]").children();
        //    console.log(unlockedDraggingRow);
        //    console.log("clone", unlockedDraggingRow.clone());
        //    let target = e.target;
        //    let unlockedTargetRow = grid.table.find("tr[data-uid=" + target.data("uid") + "]");
        //    $(gridElement).find("tr.d-none").removeClass("d-none");
        //    $(gridElement).find("#dragPlaceholderRow").remove();
        //    $(grid.table.find("tr[data-uid=" + target.data("uid") + "]")).before(`<tr id="dragPlaceholderRow"><td colspan="6">Yo!</td></tr>`);
        //    $(unlockedTargetRow).addClass("d-none");
        //},
        end: 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);
        },
        change: function(e) {
            let skip = grid.dataSource.skip() || 0;
            let newIndex = e.newIndex + skip;
            let oldIndex = e.oldIndex + skip;
            let data = grid.dataSource.data();
            let dataItem = grid.dataSource.getByUid(e.item.data("uid"));
            console.log("skip", skip);
            console.log("newIndex", newIndex);
            grid.dataSource.remove(dataItem);
            grid.dataSource.insert(newIndex, dataItem);
          }
        });
}

action: "remove"
draggableEvent: {originalEvent: MouseEvent, type: 'mouseup', target: span.k-icon.k-i-reorder, currentTarget: fn.init(1), isDefaultPrevented: ƒ, …}
isDefaultPrevented: ƒ ()
item: fn.init [tr.k-alt.k-master-row]
newIndex: -1
oldIndex: 1
preventDefault: ƒ ()
sender: init {element: fn.init(1), _events: {…}, options: {…}, draggable: init, draggedElement: fn.init(1), …}
_defaultPrevented: false

    <script type="text/x-kendo-template" id="template">
        <div class="product">
            <img src="../content/web/foods/#= ProductID #.jpg" alt="#: ProductName # image" />
            <h3>#:ProductName#</h3>
            <p>#:kendo.toString(UnitPrice, "c")#</p>
        </div>
    </script>