Mulitselect drag and drop not working from 1 listview to another

2 posts, 0 answers
  1. Anand Vardhan
    Anand Vardhan avatar
    2 posts
    Member since:
    Oct 2016

    Posted 12 Oct Link to this post

    Hi,

    I am trying to implement Multi select items drag and drop from 1 listview to another.

    I know that both selectable and draggable listen to the same event Select, hence directly we cannot do. Can someone help with some work around?

    Here is my working code for single selection drag and drop: I want to make it work for selecting multiple drag and drop.

    var dataSourceSalesRole = new kendo.data.DataSource({
            data: salesRole,
            pageSize: 21
        });
        var dataSourceSalesRoleContainer = new kendo.data.DataSource({
            data: salesRoleContainer,
            pageSize: 21
        });
    $("#listViewSalesRole").kendoListView({
            dataSource: dataSourceSalesRole,
            template: kendo.template($("#templateSalesRole").html())
        });
    $("#listViewSalesRoleContainer").kendoListView({
            dataSource: dataSourceSalesRoleContainer,
            template: kendo.template($("#templateSalesRoleContainer").html())
        });
    $("#listViewSalesRole").kendoDraggable({
            group: "salesRole",
            filter: ".move",
            hint: function (element) {
                return element.clone();
            }
        });
    $("#listViewSalesRoleContainer").kendoDropTarget({
            group: "salesRole",
            dragenter: function (e) {
                e.draggable.hint.css("opacity", 0.6);
            },
            dragleave: function (e) {
                e.draggable.hint.css("opacity", 1);
            },
            drop: function (e) {
                var count = 0;
                var dropItem = dataSourceSalesRole.getByUid(e.draggable.hint.data().uid);
                var salesRoleId = dropItem.SalesRoleId;
                var saleRoleContainerData = dataSourceSalesRoleContainer.data();
                $(saleRoleContainerData).each(function () {
                    if (this.SalesRoleId == salesRoleId) {
                        alert('Sales Role already exist! Cannot add.');
                        count++;
                    }
                });
                if (count == 0) {
                    dataSourceSalesRoleContainer.add(dropItem);
                    dataSourceSalesRole.remove(dropItem);
                }
            }
        });
  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 14 Oct Link to this post

    Hello Anand Vardhan,

    Indeed multiple selection does not play nicely with drag and drop due to the fact that selectable events and drag events both fire with selectable events taking precedence. However you can take a look at the http://stackoverflow.com/questions/27948418/kendo-ui-how-to-drag-and-drop-multiple-items-from-kendo-ui-grid-to-tree forum discussion for a possible workaround. 

    Please note that this is not supported scenario so in some cases the workaround might not work as expected. 

    Regards,
    Boyan Dimitrov
    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
Back to Top