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

getting element position after drop

5 Answers 138 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Venelin
Top achievements
Rank 1
Venelin asked on 28 Dec 2016, 10:27 AM

I need the element start and end time and the target resource after dragging it to a new position.

Your examaple: http://demos.telerik.com/kendo-ui/scheduler/restriction works quite well, but only if using the "moveEnd" event handler .

It seems that when registering kendoDropTargetArea, its "drop" event handler overwrites the "moveEnd" event handler of the scheduler.

The problem is that the object "e" as recieved by the drop doesnt have start, end and resources.

example:

scheduler.view().content.kendoDropTargetArea({

        filter: ".k-scheduler-table td, .k-event",
        drop: function(e){

           // get start, end and resource

        }
});

$("#scheduler").kendoScheduler({

..

        moveEnd: function(e){

            // never gets here

        }

});

 

 

 

5 Answers, 1 is accepted

Sort by
0
Anton
Telerik team
answered on 29 Dec 2016, 08:53 AM
Hello Venelin,

You could try the followoing approach:

drop: function(e){
    //get start, end and resource
    var offset = $(e.dropTarget).offset();
    var slot = scheduler.slotByPosition(offset.left, offset.top);
 
    var startDate = slot.startDate;
    var endDate slot.endDate;
 }

dojo example

Regards,
Anton
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Venelin
Top achievements
Rank 1
answered on 29 Dec 2016, 09:03 AM

That returns not the element start and end dates, but the slot ones.

I already red in this thread http://www.telerik.com/forums/drag-drop-external-item-onto-scheduler that "I'm afraid this is not supported out of the box."

So it seems i need to calculate that alone playing with the relative position of the selected element and the dropTarget

0
Venelin
Top achievements
Rank 1
answered on 29 Dec 2016, 10:53 AM

I managed to create a sample solution with very slight deviation

// get the view scaling values
var tick = scheduler.view().options.majorTick;
var columnWidth = scheduler.view().options.columnWidth;
var widthTickFactor = tick / columnWidth; // represents how many minutes fit in one pixel
               
// get the selected element position /_schedulerDraggedElementUID is set on drag start/
var selectedOffset = $( "div[data-uid='" + _schedulerDraggedElementUID + "']" ).offset()
 
// get the drop position
var dropOffset = $(e.target).offset();
               
// calc new start time /el.ui.start is the previous start time taken from the scheduler datasource/
var offDiff = selectedOffset.left - dropOffset.left;
var timeDiff = offDiff * widthTickFactor;
var newStartTime = moment(el.ui.start).subtract(timeDiff,"minutes").format("YYYY-MM-DD HH:mm:ss")

 

That i guess would only work, because dragging the element doesnt scroll the scheduler view.

Is it actually possible to make the view scrollable while dragging the element?

0
Anton
Telerik team
answered on 30 Dec 2016, 08:36 AM
Hello Venelin,

It seems I misunderstood what you have meant. Indeed this is a custom scenario and as mentioned in the forum post it is not supported out of the box. The view is actually scrollable if you use the scroll while dragging the event.

Regards,
Anton
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Venelin
Top achievements
Rank 1
answered on 30 Dec 2016, 08:44 AM
Thank you
Tags
Scheduler
Asked by
Venelin
Top achievements
Rank 1
Answers by
Anton
Telerik team
Venelin
Top achievements
Rank 1
Share this question
or