Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

Nested Sortable with handlers

2 Answers 208 Views
Sortable
This is a migrated thread and some comments may be shown as answers.
Todd
Top achievements
Rank 1
Todd asked on 29 Sep 2016, 08:36 PM

So I edited a dojo example to cause the behavior. The selections / ignores work fin in the code provided. Once you turn on the handle options to different handles even you no longer can select the items in the sub lists. Any ideas? Thanks in advance. 
-Todd

<html>
<head>
    <meta charset="utf-8" />
    <title>Kendo UI Snippet</title>
 
 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
 
    <ul id="parent">
        <li class="list-item"><span class="handler"></span><div><label>Apples</label></div></li>
        <li class="list-item"><span class="handler"></span><div><label>Grapefruits</label></div></li>
        <li class="list-item">
            <span class="handler"></span><div>
                <label>group</label>
                <ul class="nested">
                    <li class="sub-list-item">
                    <span class="subhandler"></span>Cranberries</li>
                    <li class="sub-list-item"><span class="subhandler"></span>Pineapples</li>
                    <li class="sub-list-item"><span class="subhandler"></span>Strawberries</li>
                </ul>
            </div>
        </li>
        <li class="list-item">
            <span class="handler"></span>group2
            <ul class="nested">
                <li class="sub-list-item"><div><span class="subhandler"></span>Cranberries</div></li>
                <li class="sub-list-item"><span class="subhandler"></span>Pineapples</li>
                <li class="sub-list-item"><span class="subhandler"></span>Strawberries</li>
            </ul>
        </li>
    </ul>
    <style>
        .handler {
            width: 16px;
            height: 16px;
            background-color: #FF0000;
            display: inline-block;
        }
 
        .subhandler {
            width: 16px;
            height: 16px;
            background-color: #FFFF00;
            display: inline-block;
        }
    </style>
    <script>
    function placeholder(element) {
      return $("<li style='color: red;' class='list-item' id='placeholder'>Drop Here!</li>");
    }
 
    $("#parent").kendoSortable({
      filter: ">li.list-item",
      //handler: '.handler', //Uncomment this line
      ignore: ".nested>li", //ignore nested list-items
      placeholder: placeholder
    });
    $(".nested").kendoSortable({
      //handler: '.subhandler', //And uncomment this line and the sorting will no longer work...
      filter: ".sub-list-item",
      placeholder: placeholder
    });
    </script>
</body>
</html>

 

2 Answers, 1 is accepted

Sort by
0
Todd
Top achievements
Rank 1
answered on 30 Sep 2016, 06:07 PM

Okay an answer to my own question though I think it is not a great solution. Use a whitespace selector for the ignore pattern in the parent list... If you have a better answer please let me know.

<ul id="sortable">
    <li class="sort">
      <div>
        <span class="hand"></span>
        <ul class="nested">
          <li class="not-sub-sort">
            <div><span class="nestedhand"></span>ItemB1<input type="text" /></div>
          </li>
          <li class="sub-sort">
            <div><span class="nestedhand"></span>ItemB2<input type="text" /></div>
          </li>
          <li class="sub-sort">
            <div><span class="nestedhand"></span>ItemB3<input type="text" /></div>
          </li>
        </ul>
      </div>
    </li>
    <li class="sort"><div><span class="hand"></span>ItemA2 <input type="text" /></div></li>
    <li class="sort"><div><span class="hand"></span>ItemA3 <input type="text" /></div></li>
    <li class="not-sort">
       <div>
        <span class="hand"></span>
        <ul class="nested">
          <li class="not-sub-sort">
            <div><span class="nestedhand"></span>ItemB1<input type="text" /></div>
          </li>
          <li class="sub-sort">
            <div><span class="nestedhand"></span>ItemB2<input type="text" /></div>
          </li>
          <li class="sub-sort">
            <div><span class="nestedhand"></span>ItemB3<input type="text" /></div>
          </li>
        </ul>
      </div>
    </li>
</ul>
 
<script>
    $("#sortable").kendoSortable({
        handler: '.hand',
        ignore: ".nested *",
        filter: ">li.sort"
    });
    $(".nested").kendoSortable({
        handler: '.nestedhand',
        ignore: 'input',
        filter:'>li.sub-sort'
    });
</script>
   
<style>
  .hand, .nestedhand {
    background-color: #f00;
    width: 20px;
    height: 20px;
    display: inline-block;
  }
</style>

0
Alexander Valchev
Telerik team
answered on 03 Oct 2016, 05:01 PM
Hello Todd,

Your solution looks OK. Parent widget should ignore everything from the nested Sortable container.

Regards,
Alexander Valchev
Telerik by Progress
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
Tags
Sortable
Asked by
Todd
Top achievements
Rank 1
Answers by
Todd
Top achievements
Rank 1
Alexander Valchev
Telerik team
Share this question
or