Nested Sortable with handlers

3 posts, 0 answers
  1. Todd
    Todd avatar
    5 posts
    Member since:
    Jan 2016

    Posted 29 Sep Link to this post

    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. Todd
    Todd avatar
    5 posts
    Member since:
    Jan 2016

    Posted 30 Sep Link to this post

    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>

  3. Kendo UI is VS 2017 Ready
  4. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 03 Oct Link to this post

    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.
     
Back to Top