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?
<!DOCTYPE html><html><head><meta name="description" content="Unable to sort inner list in kendo nested list"> <base href="http://demos.telerik.com/kendo-ui/sortable/angular"> <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>1 Answer, 1 is accepted
0
Hi Patrick,
This can be done by using a filter that describes the child li elements. For example:
Regards,
Alexander Popov
Telerik
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!