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

Angular Scheduler Drag and Drop

2 Answers 92 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Curt
Top achievements
Rank 1
Curt asked on 28 Apr 2015, 10:05 PM

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 Answers, 1 is accepted

Sort by
0
Curt
Top achievements
Rank 1
answered on 28 Apr 2015, 11:22 PM

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?

 

 

0
T. Tsonev
Telerik team
answered on 01 May 2015, 11:01 AM
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!
 
Tags
Scheduler
Asked by
Curt
Top achievements
Rank 1
Answers by
Curt
Top achievements
Rank 1
T. Tsonev
Telerik team
Share this question
or