ASP.NET Core Sortable Overview
The Sortable is part of Telerik UI for ASP.NET Core, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
The Telerik UI Sortable TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI Sortable widget.
The Sortable provides a sortable drag-and-drop functionality to elements within a list.
Initializing the Sortable
Unlike most of the Telerik UI components, the Sortable does not render HTML markup. You have to initialize the Sortable for an existing DOM element.
The following example demonstrates a basic declaration of the Sortable. The component is initialized for the sortable-basic element making its list items sortable.
<ul id="sortable-basic">
<li class="sortable">Papercut <span>3:04</span></li>
<li class="sortable">One Step Closer <span>2:35</span></li>
<li class="sortable">With You <span>3:23</span></li>
</ul>
@(Html.Kendo().Sortable()
.For("#sortable-basic") // The For() option of the Sortable is mandatory.
// It accepts a jQuery selector that specifies
// the already existing element for which the Sortable will be initialized.
.HintHandler("hint") // The JavaScript function that returns the hint element of the Sortable.
.PlaceholderHandler("placeholder") // The JavaScript function that constructs the placeholder element of the Sortable.
)
<script>
// Define the hint handler.
function hint(element) {
return element.clone().addClass("hint");
}
// Define the placeholder handler.
function placeholder(element) {
return element.clone().addClass("placeholder").text("drop here");
}
</script>
<ul id="sortable-basic">
<li class="sortable">Papercut <span>3:04</span></li>
<li class="sortable">One Step Closer <span>2:35</span></li>
<li class="sortable">With You <span>3:23</span></li>
</ul>
<kendo-sortable name="sortable-basic" hint="hint" placeholder="placeholder">
</kendo-sortable>
<script>
// Define the hint handler.
function hint(element) {
return element.clone().addClass("hint");
}
// Define the placeholder handler.
function placeholder(element) {
return element.clone().addClass("placeholder").text("drop here");
}
</script>
Functionality and Features
| Feature | Description |
|---|---|
| Hint | Set the Sortable item hint. |
| Items | Control the behavior of the Sortable items. |
| Cursor | Configure the cursor type displayed when dragging a sortable item. |
| Placeholder | Customize the default Sortable placeholder. |
| Events | The Sortable allows you to handle its events and implement the desired custom functionality. |
| Integration with other Telerik UI components | Use the Sortable with other Telerik UI components to reoder their items. |
Next Steps
- Getting Started with the Sortable
Basic Usage of the Sortable HtmlHelper for ASP.NET Core (Demo)
Basic Usage of the Sortable TagHelper for ASP.NET Core (Demo)