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

Filter not working with droptarget and AngularJs

7 Answers 204 Views

Drag and Drop

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

Jeff asked on 18 Aug 2014, 07:47 PM

I can't seem to get the filter working with dragdrop / angularjs. Any help would be appreciated

I've tried:

<div class="container" title="{{board.name}}" kendo-droptarget k-options='dropOptions' >

with these options:
function ($scope, $http) {
$scope.dropOptions = {
filter: ".divStatus",...
}}

I've tried inline like:

<div class="container" title="{{board.name}}" kendo-droptarget k-dragenter="onDragEnter" k-dragleave="onDragLeave"
k-drop="onDrop" filter=".divStatus" >

I've tried k-filter and kendo-filter - not sure if I'm just using the wrong attribute name...

I've also tried copying this demo, http://demos.telerik.com/kendo-ui/dragdrop/angular and adding filter options to it but I can't get it to work.

I can't seem to find any documentation for this either.

Any ideas?

7 Answers, 1 is accepted

answered on 20 Aug 2014, 02:45 PM

Thank you for your response.

K-filter seems to be working with kendo-draggable but it's not working with "kendo-droptarget".

Here's the example in which only two of the yellow blocks should be allowed to drop in the RED block only.

http://dojo.telerik.com/IHeR/3

I added the following code:

<div id="container" kendo-droptarget k-filter="'.divTarget'"
style="float:left;margin-left:20px;"
k-dragenter="onDragEnter"
k-dragleave="onDragLeave"
k-filter="'.divTarget'" data-k-drop="onDrop" >
<div class="divTarget"></div>
<div class="static"></div>
<div class="static"></div>
<div class="static"></div>
<div class="divTarget"></div>
</div>

And here's the JS which I added:

$scope.onDragEnter = function (e) {
console.log("onDragEnter");
angular.element(e.dropTarget).addClass("green_valid");
}

$scope.onDragLeave = function (e) {
console.log("onDragLeave");
angular.element(e.dropTarget).removeClass("green_valid");
}
$scope.onDrop = function (e) {
alert('drop allowed');
}

Any help would be much appreciated.