This topic explains, with code examples, how to configure the Drag-and-Drop mode of the igTree™ control, in both JavaScript and MVC.
The following topics are prerequisites to understanding this topic:
Drag-and-Drop Overview (igTree): This topic provides overview the Drag-and-Drop feature of the igTree control, including explanation of the Drag-and-Drop modes.
Enabling Drag-and-Drop (igTree): This topic explains, with code examples, how to enable the Drag-and-Drop feature in the igTree control.
This topic contains the following sections:
The Drag-and-Drop mode of the igTree control is managed from the dragAndDropMode property. For the specific settings, see the Drag-and-Drop mode configuration summary chart. Full configuration procedures are provided in the blocks following the chart.
The following table maps the Drag-and-Drop modes to the property settings that configure them.
| In order to: | Set the dragAndDropMode property to: |
|---|---|
| Allow the user to switch between coping and moving using the Ctrl key. | default This is the default setting for the Drag-and-Drop mode, so you only need to have the Drag-and-Drop feature enabled. |
| Configure the drag-and-drop move to perform copy action only… | copy |
| Configure the drag-and-drop move to perform move action only… | move |
The following table lists the code examples included in this topic.
| Example | Description |
|---|---|
| Code Example: Configuring the Drag-and-Drop Mode in JavaScript | This procedure initializes an instance of the igTree with the Drag-and-Drop feature enabled and set to Copy mode, and binds this instance to an XML file. |
| Code Example: Configuring Drag-and-Drop Mode in MVC | This procedure initializes igTree with Drag-and-Drop feature and Copy mode enabled and binds it to an XML file. |
This procedure initializes an instance of the igTree with the Drag-and-Drop feature enabled and set to Copy mode, and binds this instance to a JSON data source.
If you want to set some other mode (Move or Default), in the code snippet under step 3.2., replace the following code: dragAndDropMode: 'copy'
with dragAndDropMode: 'move' or dragAndDropMode: 'default'.
The following screenshot demonstrates copying of a node as a result of the settings in this procedure.
This topic takes you step-by-step toward configuring igTree with Drag-and-Drop feature and Copy mode enabled in JavaScript. The following is a conceptual overview of the process:
Defining igTree data source
Adding the script references using Infragistics loader
Configuring the Drag-and-Drop mode to Copy
The following steps demonstrate how to configure an igTree control instance with Copy Drag-and-Drop mode in JavaScript.
igTree data sourceFor the sake of this example, a simple folder and file structure is created in JSON format. Each object has the following properies
Text – the name of the nodeValue – the type of node - file or folderImageUrl – URL link which points to a specific node imageFolder – array of objects with same data as aboveIn JavaScript:
[{
Text: "My Documents",
Value: "Folder",
ImageUrl: "../content/images/DocumentsFolder.png",
Folder: [{
Text: "2009",
Value: "Folder",
ImageUrl: "../content/images/DocumentsFolder.png",
Folder: [{
Text: "Month Report",
Value: "File",
ImageUrl: "../content/images/Documents.png",
Folder: ""
}, {
Text: "Year Report",
Value: "File",
ImageUrl: "../content/images/Documents.png",
Folder: ""
}]
}, {
Text: "2010",
Value: "Folder",
ImageUrl: "../content/images/DocumentsFolder.png",
Folder: [{
Text: "Month Report",
Value: "File",
ImageUrl: "../content/images/Documents.png",
Folder: ""
}, {
Text: "Year Report",
Value: "File",
ImageUrl: "../content/images/Documents.png",
Folder: ""
}]
}]
}]
Add the script references using Infragistics loader.
The references are required for initializing the igTree control.
Create an HTML file (e.g. tree.html) with the following references to in it.
In HTML:
<script src="../scripts/jquery.min.js"></script>
<script src="../scripts/jquery-ui.min.js"></script>
<script src="../js/infragistics.loader.js"></script>
$.ig.loader({
scriptPath: "../js/",
cssPath: "../css/",
resources: "igTree"
});
Configure the Drag-and-Drop mode to Copy.
Define the DOM (Document Object Model) Html element placeholder in the tree.html file.
In HTML:
<!--igTree target element-->
<div id="tree">
</div>
Instantiate an igTree with the Drag-and-Drop feature enabled in Copy mode in JavaScript.
In JavaScript:
<script>
$.ig.loader(function () {
$("#tree").igTree({
checkboxMode: 'triState',
singleBranchExpand: true,
dataSource: data,
dataSourceType: 'json',
initialExpandDepth: 0,
pathSeparator: '.',
bindings: {
textKey: 'Text',
valueKey: 'Value',
imageUrlKey: 'ImageUrl',
childDataProperty: 'Folder'
},
dragAndDrop: true,
dragAndDropSettings: {
dragAndDropMode: 'copy'
}
});
});
</script>
This procedure initializes igTree with Drag-and-Drop feature and Copy
mode enabled and binds it to an XML file.
If you want to set some other mode (Move or Default), in the code snippet in step 2., replace the following code (located after the // Configuring Drag-and-drop copy mode comment): settings.DragAndDropMode(DragAndDropMode.Copy);with settings.DragAndDropMode(DragAndDropMode.Move); or settings.DragAndDropMode(DragAndDropMode.Default);.
The following screenshot is a preview of the final result.
To complete the procedure, you need the following:
Infragistics.Web.Mvc.dll addedThis topic takes you step-by-step toward configuring igTree with Drag-and-Drop feature and Copy mode enabled in MVC. The following is a conceptual overview of the process:
Creating an XML data source file
Defining the View
Defining the Controller
The following steps demonstrate how to define View and Controller for configuring igTree.
Create an XML data source file.
Create an XML file for the data with Text, ImageUrl, and Value attributes following this structure:
In XML:
…
<Folder Text="Network" ImageUrl="../content/images/igTree/Common/door.png" Value="Folder">
<Folder Text="Archive" ImageUrl="../content/images/igTree/Common/door_in.png" Value="Folder"></Folder>
<Folder Text="Back Up" ImageUrl="../content/images/igTree/Common/door_in.png" Value="Folder"></Folder>
<Folder Text="FTP" ImageUrl="../content/images/igTree/Common/door_in.png" Value="Folder"></Folder>
</Folder>
…
Define the View.
Add a new View to the Views folder. For this example, name it SampleDataXML.cshtml.
Add the code to initialize the igTree and enable Copy mode in the view.
In C#:
<script src="http://localhost/ig_ui/js/infragistics.loader.js" type="text/javascript"></script>
@(Html
.Infragistics()
.Loader()
.ScriptPath("http://localhost/ig_ui/js/")
.CssPath("http://localhost/ig_ui/css/")
.Render()
)
@(Html
.Infragistics()
.Tree()
.ID("XMLTree")
.Bindings(bindings => {
bindings
.ValueKey("Value")
.TextKey("Text")
.ImageUrlKey("ImageUrl")
.ChildDataProperty("Folder");
})
.InitialExpandDepth(0)
.DataSource(Model)
.CheckboxMode(CheckboxMode.TriState)
.SingleBranchExpand(true)
.DragAndDrop(true)
.DragAndDropSettings(settings =>
{
// Configuring Drag-and-drop copy mode
settings.DragAndDropMode(DragAndDropMode.Copy);
})
.DataBind()
.Render()
)
Define the controller.
In C#:
public class SampleDataXMLController : Controller
{
public ActionResult DataBindingUsingMVC()
{
return View("SampleDataXML", this.GetData());
}
private IEnumerable<Folders> GetData()
{
string phisicalFilePath = System.Web.HttpContext.Current.Server.MapPath("~/ThreeData.xml");
var ctx = XDocument.Load(phisicalFilePath);
IEnumerable<Folders> data = from item in ctx.Root.Elements("Folder")
select new Folders
{
Text = item.Attribute("Text").Value,
Value = item.Attribute("Value").Value,
ImageUrl = Url.Content(item.Attribute("ImageUrl").Value),
Folder = from i1 in item.Elements("Folder")
select new Folders
{
Text = i1.Attribute("Text").Value,
Value = i1.Attribute("Value").Value,
ImageUrl = Url.Content(i1.Attribute("ImageUrl").Value),
Folder = from i2 in i1.Elements("Folder")
select new Folders
{
Text = i2.Attribute("Text").Value,
Value = i2.Attribute("Value").Value,
ImageUrl = Url.Content(i2.Attribute("ImageUrl").Value),
Folder = from i3 in i2.Elements("Folder")
select new Folders
{
Text = i3.Attribute("Text").Value,
Value = i3.Attribute("Value").Value,
ImageUrl = Url.Content(i3.Attribute("ImageUrl").Value)
}
}
}
};
return data;
}
}
public class Folders
{
public string Text { get; set; }
public string Value { get; set; }
public string ImageUrl { get; set; }
public IEnumerable<Folders> Folder { get; set; }
}
The following topics provide additional information related to this topic.
Configuring Custom Drop Validation (igTree): This topic explains, with code examples, how to configure custom drop validation of the Drag-and-Drop feature of the igTree control, in both JavaScript and MVC.
Configuring the Look of the Drag Visual Tokens (igTree): This topic explains, with code examples, how to configure the look of the drag visual tokens 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.
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.
View on GitHub