Templates
The Sortable enables you to customize its content by using templates.
Template Context
When using templates in the Sortable, you can access various context variables that provide information about the current item being rendered. The following context variables are available:
let-item="item"—Access to the current data item.let-index="index"—The current index position.let-active="active"—Boolean indicating if the item is currently being dragged.let-disabled="disabled"—Boolean indicating if the item is disabled.let-hidden="hidden"—Boolean indicating if the item is hidden during drag operations.
<kendo-sortable [kendoSortableBinding]="palettes">
<ng-template let-item="item" let-i="index" let-item="item" let-i="index" let-palette="palette">
<div> {{ item }} - {{ i }} - {{ palette }} </div>
</ng-template>
</kendo-sortable>Known Limitations
Interactive Elements in Sortable Items
When using interactive elements such as anchor (<a>), button (<button>), select (<select>), input, or other clickable elements within sortable items, dragging conflicts may occur. These conflicts happen between the dragging functionality and the element's interactive behavior. Since these elements are designed for user interaction, clicking them can interfere with the drag operation.
To resolve this, you can disable pointer events on the interactive elements. Note that this will prevent their default behavior (navigation, clicks, etc.):
<kendo-sortable [kendoSortableBinding]="palettes">
<ng-template>
<a style="pointer-events: none;" href="my-link">My Link</a>
<button style="pointer-events: none;" type="button">My Button</button>
<select style="pointer-events: none;">
<option>Option 1</option>
</select>
</ng-template>
</kendo-sortable>