Drag and drop from grid into input field

[Kay]

Using AngularJS I have a grid that I can drag the header from and place into an input field.

What I would like to do is drag and place this header in the same fashion that DataTransfer.setData() works, this will allow me to keep adding information to the input field in whichever order I would like.

Here is a plunker with an example of what I am trying to achieve though some reason the kendo header won't populate the input in plunker but it does work on my local project.

Thanks, any help on this would be great as I really want to use the kendo grid for this

[Stefan]

Hello Kelvin,

The onDrop function was not executed because the Kendo UI DropTarget widget was not initialized.

http://docs.telerik.com/kendo-ui/controls/interactivity/draganddrop/overview#droptarget

I modified the provided example to work as expected:

http://plnkr.co/edit/A1fTmVcB2WgRazpuNsLA

I hope this is helpful.

Regards,
Stefan
Telerik by Progress

 

 

[Kay]

Hi Stefan,

I am still confused as the drag and drop works in my own project. I assumed the onDrop was being fired from the HTML input field using k-drop="onDrop" as I am not executing the onDrop() anywhere in my js, only in my html.

in fact if I update my local code with your update

dragend: function (e) {
  $scope.onDrop(e);
},

And I keep the onDrop in my HTML

<input type="text" id="test2" class="form-control dropTarget" name="test" ng-model="controller.input" kendo-droptarget k-drop="onDrop">

My input field gets updated twice so that I get [Area][Area] on one drag and drop.

I will keep going through your example and try to understand the system better and why mine works locally but not on the plunker.

Unfortunately this does not help with my actual problem, I am not too worried that Kendo was not working correctly on the plunker, what I am trying to achieve is for the kendo drag and drop to function the same way as how the first example uses html DataTransfer.setData(). This allows me to drag a header from the table and place it in any location in the input field as if I have copied and pasted the text.

Thanks.

[Stefan]

Hello Kelvin,

After consulting with our developers' team, I can confirm that the Kendo UI Draggable does not support a method which is similar to the DataTransfer.setData() method.

In order to achieve a similar result, please use a custom logic to modify the data on the drop event of the DropTarget widget:

 

http://docs.telerik.com/kendo-ui/api/javascript/ui/droptarget#events-drop

If the Kendo UI widget is not working correctly on the local project, please send it to us, so we can investigate further.

Regards,
Stefan
Telerik by Progress