New to Telerik UI for ASP.NET Core? Start a free 30-day trial
ASP.NET Core Sortable Overview
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.
Razor
<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>
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
-
Basic Usage of the Sortable HtmlHelper for ASP.NET Core (Demo)
-
Basic Usage of the Sortable TagHelper for ASP.NET Core (Demo)