Enabling Drag-and-Drop (igTree)

Topic Overview

Purpose

This topic explains, with code examples, how to enable the Drag-and-Drop feature in the igTree™ control.

In this topic

This topic contains the following sections:

• Introduction
• Enabling the Drag-and-Drop Feature Summary
• Enabling Drag-and-Drop Within an igTree Control
• • Overview
  • Property settings
  • Code Example
• Enabling Drag-and-Drop Between Different igTree Controls
• • Overview
  • Property settings
  • Code Example
• Related Content

Introduction

The Drag-and-Drop feature

Dragging and dropping can be performed within the same igTree control or between different igTree controls. The latter is configured in addition to the “normal” (within the same tree) drag-and-drop.

Enabling the Drag-and-Drop Feature Summary

Enabling Drag-and-Drop summary chart

The following table lists the two ways to enable the Drag-and-drop feature of the igTree control.

Enabling Drag-and-Drop Within an igTree Control

Overview

The igTree control must have the Drag-and-Drop feature enabled.

Enabling the dragging within same control is managed by the dragAndDrop property.

Property settings

The following table maps the desired configuration to property settings.

Code Example

The following snippets demonstrate the implemented in code.

In JavaScript:

$("#tree").igTree({                                                           
 dragAndDrop: true,                                                 
});

In Razor:

@(Html.                                                                                   Infragistics().                                                               Tree().                                                                       ID("tree").                                                                   DragAndDrop(true).                                                            DataBind().                                                                  Render()                                                              
)

Enabling Drag-and-Drop Between Different igTree Controls

Overview

All participating igTree controls must have the Drag-and-Drop feature enabled. In addition to that, each the must be configured to accept drops from other igTree controls.

This means that you must set dragAndDrop property of each participating igTree control.

to true to enable dragging. To enable dropping between these igTree controls, you must set two additional properties for each igTree that will be accepting drops from the other trees:

• dragAndDropSettings to allowDrop
• allowDrop property to true

Property settings

The following table maps the desired configuration to property settings.

Code Example

The following snippets demonstrate the settings in Example block implemented in code.

In JavaScript:

$("#firstTree").igTree({                                                      
    dragAndDrop: true,
    dragAndDropSettings: {                                                       
        allowDrop: true                                                      
    }                                                                     
}); 


$("#secondTree").igTree({                                                     
    dragAndDrop: true,
    dragAndDropSettings: {                                                      
        allowDrop: true                                                       
    }                                                                   
});

In Razor:

@(Html.Infragistics()
    .Tree()
    .ID("firstTree")
    .DragAndDrop(true)
    .DragAndDropSettings(settings =>{
        settings.AllowDrop(true);
    })
    .DataBind()
    .Render())

@(Html.Infragistics()
    .Tree()
    .ID("secondTree")
    .DragAndDrop(true)
    .DragAndDropSettings(settings =>{
        settings.AllowDrop(true);
    })
    .DataBind()
    .Render())

Related Content

Topics

The following topics provide additional information related to this topic.

• Configuring Drag-and-Drop (igTree): This topic explains, with code examples, how to configure the Drag-and-Drop of the igTree control, in both JavaScript and MVC.

• Drag-and-Drop API Reference (igTree): The topics in this group provide reference information about the events and properties of the igTree control that are related to the Drag-and-Drop feature.

Samples

The following samples provide additional information related to this topic.

• Drag and Drop - Single Tree: This sample demonstrates how to initialize the igTree control with the Drag-and-Drop feature enabled.

• Drag and Drop - Multiple Trees: This sample demonstrates how to drag-and-drop nodes between two igTrees.

• API and Events: This sample demonstrates how to use igTree API.