Unable to sort inner list using Kendo Sortable

2 posts, 0 answers
  1. Patrick
    Patrick avatar
    29 posts
    Member since:
    Apr 2014

    Posted 03 Apr Link to this post

     In the following example I want to sort the inner lists and not the other list. In my live example the lists are generated by the grouped list functionality, so I can't give each list an id and create a separate sortable object. How do I create a sortable set of inner lists using kendo native listview grouping? 

     

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="description" content="Unable to sort inner list in kendo nested list">
        <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title></title>
        <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.common-material.min.css" />
        <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.material.min.css" />
     
        <script src="//kendo.cdn.telerik.com/2016.1.226/js/jquery.min.js"></script>
        <script src="//kendo.cdn.telerik.com/2016.1.226/js/angular.min.js"></script>
        <script src="//kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>
    </head>
    <body>
    <div id="example" ng-app="KendoDemos">
        <div ng-controller="MyCtrl">
      <ul class="playlist" kendo-sortable k-placeholder="placeholder" k-hint="hint">
        <li>Happy
          <ul>
        <li>Papercut <span>3:04</span></li>
        <li>One Step Closer <span>2:35</span></li>
        <li>With You <span>3:23</span></li>
        <li>Points of Authority <span>3:20</span></li>
        <li>Crawling <span>3:29</span></li>
        </ul>
        </li>
        <li>Sad
       <ul>
          <li>Runaway <span>3:03</span></li>
        <li>By Myself <span>3:09</span></li>
        <li>In the End <span>3:36</span></li>
        <li>A Place for My Head <span>3:04</span></li>
        <li>Forgotten <span>3:14</span></li>
        <li>Cure for the Itch <span>2:37</span></li>
        <li>Pushing Me Away <span>3:11</span></li>
        </ul>
        </li>
      </ul>
    </div>
    <style>
        .playlist {
            margin: 30px auto;
            padding: 10px;
            width: 300px;
            background-color: #f3f5f7;
            border-radius: 4px;
            border: 1px solid rgba(0,0,0,.1);
        }
        .playlist li {
            list-style-type: none;
            position: relative;
            padding: 6px 8px;
            margin: 0;
            color: #666;
            font-size: 1.2em;
            cursor: move;
        }
        .playlist li:hover {
            background-color: #dceffd;
        }
        .playlist li span {
            position: absolute;
            right: 5px;
        }
        li.hint {
            display: block;
            padding: 10px;
            width: 200px;
            background-color: #52aef7;
            color: #fff;
        }
     
        li.hint:last-child {
            border-radius: 4px;
        }
     
        li.hint span {
            color: #fff;
        }
     
        li.placeholder {
            background-color: #dceffd;
            color: #52aef7;
            text-align: right;
        }
    </style>
    </div>
     
    <script>
        angular.module("KendoDemos", [ "kendo.directives" ])
            .controller("MyCtrl", function($scope){
                $scope.placeholder = function(element) {
                    return element.clone().addClass("placeholder").text("drop here");
                };
                $scope.hint = function(element) {
                    return element.clone().addClass("hint");
                };
            })
    </script>
     
     
    </body>
    </html>

    In the following example I want to sort the inner lists and not the other list. In my live example the lists are generated by the grouped list functionality, so I can't give each list an id and create a separate sortable object. How do I create a sortable set of inner lists using kendo native listview grouping?

    In the following example I want to sort the inner lists and not the other list. In my live example the lists are generated by the grouped list functionality, so I can't give each list an id and create a separate sortable object. How do I create a sortable set of inner lists using kendo native listview grouping?

    In the following example I want to sort the inner lists and not the other list. In my live example the lists are generated by the grouped list functionality, so I can't give each list an id and create a separate sortable object. How do I create a sortable set of inner lists using kendo native listview grouping?

  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 06 Apr Link to this post

    Hi Patrick,

    This can be done by using a filter that describes the child li elements. For example: 
    <ul class="playlist" kendo-sortable k-filter="'ul>li'" k-placeholder="placeholder" k-hint="hint">

    Regards,
    Alexander Popov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top