Filter not working with droptarget and AngularJs

8 posts, 0 answers
  1. Nick
    Nick avatar
    31 posts
    Member since:
    Oct 2011

    Posted 18 Aug 2014 Link to this post

    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?
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 20 Aug 2014 Link to this post

    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
     
    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
  4. Nick
    Nick avatar
    31 posts
    Member since:
    Oct 2011

    Posted 20 Aug 2014 in reply to Alexander Valchev Link to this post

    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.
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 20 Aug 2014 Link to this post

    Hello Nick,

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

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Nick
    Nick avatar
    31 posts
    Member since:
    Oct 2011

    Posted 20 Aug 2014 in reply to Alexander Valchev Link to this post

    Bingo!  Thank you so much!
  7. Pieter
    Pieter avatar
    2 posts
    Member since:
    Nov 2015

    Posted 11 Apr in reply to Alexander Valchev Link to this post

    Alexander,

     

    how can you use the droptargetarea in angular?

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

     

    thank you

  8. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 13 Apr Link to this post

    Hello Pieter,

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


    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  9. Pieter
    Pieter avatar
    2 posts
    Member since:
    Nov 2015

    Posted 13 Apr in reply to Alexander Valchev Link to this post

    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

Back to Top
Kendo UI is VS 2017 Ready