This is a migrated thread and some comments may be shown as answers.

Unable to sort inner list using Kendo Sortable

1 Answer 164 Views

Sortable

This is a migrated thread and some comments may be shown as answers.

Patrick asked on 04 Apr 2016, 02:45 AM

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>

0down vote favorite

Unable to sort inner list using Kendo Sortable

1 Answer, 1 is accepted