New to Telerik UI for ASP.NET CoreStart 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

FeatureDescription
HintSet the Sortable item hint.
ItemsControl the behavior of the Sortable items.
CursorConfigure the cursor type displayed when dragging a sortable item.
PlaceholderCustomize the default Sortable placeholder.
EventsThe Sortable allows you to handle its events and implement the desired custom functionality.
Integration with other Telerik UI componentsUse the Sortable with other Telerik UI components to reoder their items.

Next Steps

See Also