Filter not working with droptarget and AngularJs

[Jeff]

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?

[Alexander Valchev]

Hi Nick,

You should enclose the filter with a single quotation marks in order to mark it as a string, else you will receive a JavaScript error that the option cannot be parsed.
For your convenience I prepared a small example: http://dojo.telerik.com/IHeR

Regards,
Alexander Valchev
Telerik

 

 

[Jeff]

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.

[Alexander Valchev]

Hello Nick,

The DropTarget does not have filter configuration option. The DropTargetArea has one.
Please see the API reference:

• http://docs.telerik.com/kendo-ui/api/framework/droptarget
• http://docs.telerik.com/kendo-ui/api/framework/droptargetarea

Regards,
Alexander Valchev
Telerik

 

 

[Jeff]

Bingo!  Thank you so much!

[Pieter]

Alexander,

 

how can you use the droptargetarea in angular?

I don't seem to be able to find any documentation on this...?

 

thank you

[Alexander Valchev]

Hello Pieter,

The same way you use a DropTarget. Please follow the general Kendo - AngularJS guidelines described in this help topic:

• http://docs.telerik.com/kendo-ui/AngularJS/introduction

Regards,
Alexander Valchev
Telerik

 

 

[Pieter]

Hi Alexander,

 

thanks, I figured that out yesterday.
My issue had more to do with the config-options; it's not (very) clear what configs are possible when using angular, the docs could use some updates on that.

Anyway, thanks, it's working now!

 

Regards,
Pieter