Drag and drop from grid into input field

4 posts, 0 answers
  1. Kay
    Kay avatar
    16 posts
    Member since:
    Aug 2013

    Posted 24 Aug Link to this post

    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

  2. Stefan
    Admin
    Stefan avatar
    270 posts

    Posted 29 Aug Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
  4. Kay
    Kay avatar
    16 posts
    Member since:
    Aug 2013

    Posted 29 Aug in reply to Stefan Link to this post

    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.

  5. Stefan
    Admin
    Stefan avatar
    270 posts

    Posted 31 Aug Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top
Kendo UI is VS 2017 Ready