Templates

The Sortable provides templates for customizing how items and placeholders render. Use templates to display rich content such as cards, media rows, or multi-field layouts inside each sortable slot.

Item Template

Apply the kendoSortableItemTemplate directive to an ng-template inside the Sortable. The template replaces the default text rendering for each item.

<kendo-sortable [kendoSortableBinding]="items">
    <ng-template kendoSortableItemTemplate let-item="item">
        <div class="custom-card">
            <strong>{{ item.title }}</strong>
            <span>{{ item.description }}</span>
        </div>
    </ng-template>
</kendo-sortable>

The following example demonstrates a kanban board where each sortable item renders inside a Kendo UI Card component. The card header displays a category tag and an assignee avatar, while the card body contains the task title and type/priority chips.

Placeholder Template

Apply the kendoSortablePlaceholderTemplate directive to define what renders in the placeholder slot while an item is being dragged.

<kendo-sortable [kendoSortableBinding]="items">
    <ng-template kendoSortablePlaceholderTemplate>
        <div class="placeholder">
            <span>Drop here</span>
        </div>
    </ng-template>
</kendo-sortable>

The following example uses a placeholder with a dashed border and a "Drop here" label. Drag an item to see the placeholder appear in the target position.

Item and Placeholder Template Context

Both the item and placeholder templates expose several context variables through let-* bindings. Use these variables to build conditional styles, display position numbers, or adjust content based on drag state.

<kendo-sortable [kendoSortableBinding]="items">
    <ng-template kendoSortableItemTemplate
        let-item="item"
        let-index="index"
        let-active="active">
        <div [class.dragging]="active">
            {{ index + 1 }}. {{ item.title }}
        </div>
    </ng-template>
</kendo-sortable>

Known Limitations

Interactive elements such as <a>, <button>, <select>, and <input> inside sortable items can conflict with drag behavior. Clicking these elements triggers their default action instead of initiating a drag.

To keep the elements interactive while allowing drag on the rest of the item, set tabindex="-1" and draggable="false" on them. For a complete walkthrough, refer to the Using Interactive Elements section.

To fully disable the elements instead, apply pointer-events: none:

<kendo-sortable [kendoSortableBinding]="items">
    <ng-template kendoSortableItemTemplate let-item="item">
        <a style="pointer-events: none;" href="#">{{ item.link }}</a>
        <button style="pointer-events: none;" type="button">Action</button>
    </ng-template>
</kendo-sortable>

Suggested Links

• Data Binding
• Sortable Items
• API Reference of the Sortable