Search code examples
c#jqueryinfragisticsignite-uiigtree

Drag and drop Ignite UI tree view


I am using Ignite UI for tree view drag and drop.

Is there any way to keep the dragged item in the list?
Once the item is dropped to new location, it removes item from previous location. How to keep the item at both locations?

$("#StructureList").igTree({
                    singleBranchExpand: true,
                    checkboxMode: 'triState',
                    dataSource:  data,
                    dataSourceType: 'json',
                    bindings: {
                        textKey: 'LineName',
                        valueKey: 'LineID',
                        imageUrlKey: 'ImageUrl',
                        childDataProperty: 'FacDetails',
                        bindings: {
                            textKey: 'FacName',
                            valueKey: 'FacID',
                            childDataProperty: 'strDetails',
                                        bindings: {
                                            textKey: 'strName',
                                            valueKey: 'strID'
                                        }
                        }
                    },
                    dragAndDrop: true,
                    dragAndDropSettings: {
                        allowDrop: true,
                        dragAndDropMode: "copy",
                        customDropValidation: function (element) {
                            // Validates the drop target
                            var valid = true,
                                droppableNode = $(this);
                                if (droppableNode.is('a') && droppableNode.closest('li[data-role=node]').attr('data-value') === 'File') {
                                valid = false;
                            }

                            return valid;
                        }
                    }

                });

Solution

  • The Ignite UI igTree has three different modes for drag and drop - default, move, copy.

    default - dropped node is moved if no modifier key is held and copied if ctrl is held.
    move - dropped node is always moved, thus removed from the source.
    copy - dropped node is always copied, thus preserved in the source.

    Here's the docs.

    In order to have it always copy set the tree mode to copy.

    $(".selector").igTree({
        dragAndDropSettings : {
            dragAndDropMode: "copy"
        }
    });