Angular Scheduler Drag and Drop

3 posts, 0 answers
  1. Curt
    Curt avatar
    6 posts
    Member since:
    Mar 2015

    Posted 28 Apr 2015 Link to this post

    Are there any examples doing drag and drop from a grid control to the scheduler in Angular?  I have found the jQuery example, but for the life of me can't get it to work correctly with the angular directives.  Right now I am using a combination of jQuery and angular, which is both terrible to look at, and causing problems since my templates cannot use Angular controls. 

    The parts I am unsure of how to do in Angular are:


    var grid = $("#grid").data("kendoGrid");
               var gridRowOffset = grid.tbody.find("tr:first").offset();
                   filter: "tbody > tr",
                   dragstart: function (e) {
                       //add margin to position correctly the tooltip under the pointer
                       console.log('drag start');
                       $("#dragTooltip").css("margin-left", e.clientX - gridRowOffset.left - 50);

     Essentially if I could get the demo from 

    to work in Angular, I could figure the rest out from there!

  2. Curt
    Curt avatar
    6 posts
    Member since:
    Mar 2015

    Posted 28 Apr 2015 in reply to Curt Link to this post

     I am still new here, hopefully the dojo is viewable - this is where I am at in angular.  My question would how to properly create the view of the draggable item, so in $scope.draggableHint, how can I get the information on what row they are dragging from the grid so i can remove the row and show the row data in a draggable item?



  3. T. Tsonev
    T. Tsonev avatar
    2834 posts

    Posted 01 May 2015 Link to this post


    Please, accept my apologies for the delayed response.

    I'm not certain that I can suggest a version of this scenario entirely done in Angular.
    Its current implementation relies on a lot of widget-specific implementation details.
    In particular I don't think we support instantiating two kendo directives on a single element.

    I'm not saying that it's not possible to do, e.g. via ngDraggable or similar solutions, but this is a far cry from what the current solution does.

    As for your question, the dragged row can be determined in the dragStart event.
    I've updated the snippet to use this, but I couldn't communicate it through the scope.

    This is due to timing - the hint is created before the scope is applied. This will obviously work with a 'regular' state variable.

    I hope this helps.

    T. Tsonev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top