ASP.NET MVC Sortable Overview

Telerik UI for ASP.NET MVC Ninja image

The Sortable is part of Telerik UI for ASP.NET MVC, 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 HtmlHelper for ASP.NET MVC is a server-side wrapper 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>

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

See Also

In this article