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.

• Demo page for the Sortable HtmlHelper

• Demo page for the Sortable TagHelper

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>

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>
    <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)

See Also

• Common Scenarios with the Sortable
• Configure the Filtered and Disabled Items of the Sortable for ASP.NET Core (Demo)
• Knowledge Base Section