Control which columns can be reordered and where

[Lee]

I have a kendo grid and I want the user to be able to reorder the columns but I have the following rules: 

1. Only the unlocked columns can be moved.

2. I don't want them to be able to move them to the locked side of the grid.

3. I don't want the columns on the locked side of the grid to have the drag cursor or tooltip since they should not be reorderable.

How would I achieve this? 

Here is what I tried and it doesn't really work because: 

1. Assuming there are 4 locked columns (columnsBaseLength = 4), moving column 6 to position 5 throws it on the locked side making 5 locked columns rather than making it the first unlocked column.

2. I still see the tooltip when dragging the locked columns around.

        
// Note: order is defined when initializing the grid. It is set to the index of the column.
// Note: columnsBaseLength is set to 4 since I have 4 locked columns.
 
        columnReorder: function (e) {
            let grid = this;
            let columnToMove = e.column;
            let newIndex = e.newIndex;
            let oldIndex = e.oldIndex;

            // Determine if the new index is within the locked column area// This requires knowing the number of currently locked columns
let isMovingIntoLockedArea = newIndex < columnsBaseLength;
            let isLockedColumn = columnToMove.order < columnsBaseLength;
            if (isLockedColumn || isMovingIntoLockedArea) {
                console.warn("Locked columns cannot be reordered. Cannot move to a locked column");
                setTimeout(function () {
                    grid.reorderColumn(oldIndex, columnToMove);
                }, 1);
            } else {
                setTimeout(function () {
                    $.each(grid.columns, function (index, column) {
                        column.order = index;
                    });
                }, 1);
            }
        },