Quantcast
Channel: Telerik Forums RSS
Viewing all articles
Browse latest Browse all 78072

Nested Sortable with handlers

$
0
0

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>
    <metacharset="utf-8"/>
    <title>Kendo UI Snippet</title>
 
 
    <scriptsrc="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
 
    <ulid="parent">
        <liclass="list-item"><spanclass="handler"></span><div><label>Apples</label></div></li>
        <liclass="list-item"><spanclass="handler"></span><div><label>Grapefruits</label></div></li>
        <liclass="list-item">
            <spanclass="handler"></span><div>
                <label>group</label>
                <ulclass="nested">
                    <liclass="sub-list-item">
                    <spanclass="subhandler"></span>Cranberries</li>
                    <liclass="sub-list-item"><spanclass="subhandler"></span>Pineapples</li>
                    <liclass="sub-list-item"><spanclass="subhandler"></span>Strawberries</li>
                </ul>
            </div>
        </li>
        <liclass="list-item">
            <spanclass="handler"></span>group2
            <ulclass="nested">
                <liclass="sub-list-item"><div><spanclass="subhandler"></span>Cranberries</div></li>
                <liclass="sub-list-item"><spanclass="subhandler"></span>Pineapples</li>
                <liclass="sub-list-item"><spanclass="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 $("<listyle='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>

 


Viewing all articles
Browse latest Browse all 78072

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>