Disabling Row Reordering for Specific Rows in Kendo UI Grid for Angular
Environment
| Product | Progress® Kendo UI® for Angular Grid |
Description
How to disable the row reordering feature for specific rows in Kendo Angular Grid.
This Knowledge Base article also answers the following questions:
- How can I make certain rows in the Kendo UI for Angular Grid non-draggable?
- Is it possible to conditionally disable row reordering in a Kendo UI for Angular Grid?
- Can we selectively disable the drag and drop feature on specific Grid rows in Angular?
Solution
To conditionally disable row reordering for certain rows in the Kendo UI for Angular Grid, use one of the following approaches:
Using Custom CSS
To prevent the drag-and-drop for certain rows in a Grid with row reordering enabled, assign a custom class to those rows using the rowClass callback. Then, use this class to disable the pointer-events and optionally hide the drag handle icon.
This approach prevents dragging of the specified rows but does not prevent dropping into these rows.
.k-master-row.custom-class > .k-table-td.k-drag-cell{
pointer-events: none;
}
.k-master-row.custom-class > .k-table-td.k-drag-cell > .k-icon-wrapper-host{
display: none;
}The following approach demonstrates how to disable the row reordering of specific rows using custom CSS.
Custom Drag and Drop Implementation
To gain a more extensive control over the row reordering functionality, use the built-in DragTargetContainerDirective and DropTargetContainerDirective to implement a custom drag-and-drop. Then, handle the drag and drop events provided by these directives and use some custom logic to prevent dropping rows in the desired sections.
public onDrop(e: DropTargetEvent): void {
...
if (e.dropTargetIndex == 0 || e.dropTargetIndex == 1) {
alert('Cannot drop the row here.');
} else {
index = calculateDestinationIndex(e, fromGrid, fromIndex, toGrid);
}
}The following example showcases a possible approach for conditionally disabling the drag and drop of specific rows.