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);
            }
        },

            
            

[Neli]

Hi Lee,

To achieve your requirements for column reordering in the Kendo UI for jQuery Grid, you need to combine column configuration and event handling.  I would suggest trying the following to address each rule:

1. Only Unlocked Columns Can Be Moved - Set reorderable: false on locked columns in the grid’s column definition. This disables the drag handle, drag cursor, and tooltip for those columns.

columns: [
    { field: "Locked1", locked: true, reorderable: false },
    { field: "Locked2", locked: true, reorderable: false },
    { field: "Locked3", locked: true, reorderable: false },
    { field: "Locked4", locked: true, reorderable: false },
    { field: "Unlocked1" },
    { field: "Unlocked2" },
    // more unlocked columns...
]

2. Prevent Moving Unlocked Columns Into the Locked Area - Handle the columnReorder event to check if the new index is within the locked area, and revert the move if necessary:

columnReorder: function(e) {
    var grid = this;
    var columnsBaseLength = 4; // number of locked columns
    var columnToMove = e.column;
    var newIndex = e.newIndex;
    var oldIndex = e.oldIndex;

    var isLockedColumn = grid.columns[oldIndex].locked === true;
    var isMovingIntoLockedArea = newIndex < columnsBaseLength;

    // Prevent moving locked columns or moving any column into the locked area
    if (isLockedColumn || isMovingIntoLockedArea) {
        setTimeout(function () {
            grid.reorderColumn(oldIndex, columnToMove);
        }, 0);
    }
}

I hope this helps.

Regards,
Neli
Progress Telerik

[Lee]

Step 1 doesn't work. I placed it there and it did nothing. I looked at the documentation and it only shows the reorderable option at the table level, not the column level. 

[Neli]

Hello Lee,

I will need some additional time to review the issue. I will write you back as soon as I have something to share.

Thank you very much for your patience.

Regards,
Neli
Progress Telerik

[Lee]

Thank you. I look forward to hearing back.

[Neli]

Hi Lee, 

Thank you very much for your patience.

Currently preventing the columnReorder event is not supported. I would suggest review the Knowledge Base article linked below where Preventing specific column reordering in Grid is demonstrated:

- https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/grid-prevent-columns-reordering

You can try utilizing the approach in order to acheive the desired behavior. 

Here you will find a small Dojo example where the locked columns could not be reordered - https://dojo.telerik.com/mtaUhNkX.

You can extend the custom logic according to the requirements of your applications.

In the example also the cursor of the locked column header is changed using the following styles:

 
        /* Remove drag cursor and styling from locked columns */
        .k-grid-header-locked th,
        .k-grid-header-locked th *,
        .k-grid-header-locked th:hover,
        .k-grid-header-locked th:hover * {
            cursor: crosshair !important;
        }
        

I would also recommnd casting a vote for the Feature Request linked below for Prevent columnReorder event to be called for specific columns:

- https://feedback.telerik.com/kendo-jquery-ui/1573469-prevent-columnreorder-event-to-be-called-for-specific-columns 

I hope this helps.

Regards,

Neli