How to drag and drop multiple items from kendo ui grid to treeview?

8 posts, 0 answers
  1. Fady
    Fady avatar
    12 posts
    Member since:
    Jan 2015

    Posted 22 Jan 2015 Link to this post


    I am using kendo ui grid and treeview in a cshtml page and want to drag and drop multiple rows from the grid to the treeview.

    I am able to drag and drop a single row from the grid to the tree, but for multiple items, same approach does not work.

    Here are my code segments:

    $("#grid").kendoGrid({
        selectable:
    "row",
        sortable:
    true,
       pageable: true,
       columns: .......


    $("#treeview").kendoTreeView({
      dragAndDrop: true
    });



    And my kendoDraggable and kendoDropTarget events:

    $("#grid").kendoDraggable({
     filter: "tr",
     hint: function () {
           var
    g = $("#grid").data("kendoGrid")

      return g.select().clone()
     }
    });
     
    $("#treeview").kendoDropTarget({
     drop: droptargetOnDrop
    });

    The above code segment works for dragging a single row from grid to the tree.

    But if I change the grid definition for multiple row selection, the kendoDropTarget drop event no longer gets triggered.

    $("#grid").kendoGrid({
      selectable: "multiple",
      sortable: true,
      pageable: true,
      columns: .......


    Please let me know if I am doing anything wrong and any possible solution to this.
  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 24 Jan 2015 Link to this post

    Hello Fady,

    the grid mutlirow selection overlaps with the draggable triggers - basically, both are triggered on drag, with the selection taking precedence. Given that, the two feature sets are not compatible - if the draggable worked, the selection would not work. 

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Fady
    Fady avatar
    12 posts
    Member since:
    Jan 2015

    Posted 03 Feb 2015 in reply to Petyo Link to this post

    Hi Petyo,

    Thanks for your reply.

    The issue is, for multiple grid row selection, the draggable event is in fact getting triggered. It's only the kendoDropTarget (code provided in original post) event which is not getting triggered, hence we are not able to drop the selected rows on the TreeView.

    Does the kendoDropTarget also clash with multirow selection?

    Thanks.
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 05 Feb 2015 Link to this post

    Hello Fady,

    The Draggable and the DropTarget components listen on the same kind of events so both should be effected by the multiple selection.
    You may try the following workaround - hook up to the dragstart event of the Draggable and cancel the Grid selectable event handlers:

    dragstart: function(e) {
      $("#grid").data("kendoGrid").selectable.userEvents.cancel();
    }


    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Fady
    Fady avatar
    12 posts
    Member since:
    Jan 2015

    Posted 17 Feb 2015 in reply to Alexander Valchev Link to this post

    Hi,

    I tried adding the dragstart code in my draggable event but on using this we can no longer drag the selected rows from the grid.

    This is my draggable listener:

    // event on dragging a row
    $("#grid").data("kendoGrid").table.kendoDraggable({
        filter: "tbody tr .dragClass",
        hint: function () {
            var g = $("#grid").data("kendoGrid")
            return g.select().clone();
        },
        dragstart: function(e) {
             $("#grid").data("kendoGrid").selectable.userEvents.cancel();
        }
    });

    Where dragClass is class attibute of an icon in a column by which I am dragging a row in the grid.

    Is there anything I am missing?

    Thanks
  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 18 Feb 2015 Link to this post

    Hi Fady,

    Is it possible for you to create a simple Kendo Dojo test page that demonstrates your exact scenario so I can examine it and assist you further?

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Erik
    Erik avatar
    3 posts
    Member since:
    Apr 2015

    Posted 15 May 2015 in reply to Alexander Valchev Link to this post

    Hi Fady,

    Any progress on this issue?

    I'm also struggling multi select grid and drag and drop.

    BR

    Erik

  9. Azzlack
    Azzlack avatar
    5 posts
    Member since:
    Feb 2011

    Posted 25 Sep 2015 in reply to Alexander Valchev Link to this post

    I cannot get this to work either.

    The select is still happening instead of dragging the rows.
    Disable Selectable makes it work fine, but then only for one row.

Back to Top
Kendo UI is VS 2017 Ready