New to Kendo UI for jQuery? Download free 30-day trial

Nest Sortable Widgets


Product Progress® Kendo UI® Sortable for jQuery
Operating System Windows 10 64bit
Visual Studio Version Visual Studio 2017
Preferred Language JavaScript


How can I create nested Kendo UI Sortable widgets?


The following example demonstrates how to achieve the desired scenarios.

  <ul id="parent">
    <li class="list-item">Apples</li>
    <li class="list-item">Grapefruits</li>
    <li class="list-item">Bananas</li>
    <li class="list-item">Others
      <ul id="nested">
        <li class="list-item">Cranberries</li>
        <li class="list-item">Pineapples</li>
        <li class="list-item">Strawberries</li>

    function placeholder(element) {
      return $("<li style='color: red;' class='list-item' id='placeholder'>Drop Here!</li>");

      connectWith: "#nested",
      filter: ">li.list-item", // Filter only list items that are direct child of the Sortable container.
      // Use ".list-item" to allow parent items to use the nested Sortable.
      ignore: "#nested >li", // Ignore the nested list items.
      placeholder: placeholder
      connectWith: "#parent",
      filter: ".list-item",
      placeholder: placeholder

See Also

In this article