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();
     
     
               grid.table.kendoDraggable({
                   filter: "tbody > tr",
                   dragstart: function (e) {
                       //add margin to position correctly the tooltip under the pointer
                       console.log('drag start');
                       console.log(gridRowOffset);
                       $("#dragTooltip").css("margin-left", e.clientX - gridRowOffset.left - 50);
                   },

     Essentially if I could get the demo from http://www.telerik.com/support/code-library/drag-and-drop-17b3dbbc367a 

    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

    http://dojo.telerik.com/@TrikinCurt/UZUKi/3

     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
    Admin
    T. Tsonev avatar
    2817 posts

    Posted 01 May 2015 Link to this post

    Hi,

    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.

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