# 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.

```html
<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](https://www.telerik.com/kendo-angular-ui/components/layout/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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/sortable/sortable-palettes/source.txt)

## Placeholder Template

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

```html
<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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/sortable/placeholder-template/source.txt)

## 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.

| Variable   | Type      | Description                                             |
| ---------- | --------- | ------------------------------------------------------- |
| `item`     | `any`     | The current data item from the bound array.             |
| `index`    | `number`  | The zero-based position of the item.                    |
| `active`   | `boolean` | `true` when the item is being dragged.                  |
| `disabled` | `boolean` | `true` when the item is disabled.                       |
| `hidden`   | `boolean` | `true` when the item is hidden during a drag operation. |

```html
<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](https://www.telerik.com/kendo-angular-ui/components/sortable/items#using-interactive-elements) section.

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

```html
<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](https://www.telerik.com/kendo-angular-ui/components/sortable/binding)
* [Sortable Items](https://www.telerik.com/kendo-angular-ui/components/sortable/items)
* [API Reference of the Sortable](https://www.telerik.com/kendo-angular-ui/components/sortable/api/sortablecomponent)