ui.igTree

ui.igTree_image

The igTree control is a jQuery tree control which supports node images, checkboxes, and load-on-demand functionality. Further information regarding the classes, options, events, methods and themes of this API are available under the associated tabs above.

The following code snippet demonstrates how to initialize the igTree control.

Click here for more information on how to get started using this API. For details on how to reference the required scripts and themes for the igTree control read, Using JavaScript Resources in Ignite UI and Styling and Theming Ignite UI.

Code Sample

<!doctype html>
<html>
<head>
		<!-- Infragistics Combined CSS -->
		<link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
		<link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
		<!-- jQuery Core -->
		<script src="js/jquery.js" type="text/javascript"></script>
		<!-- jQuery UI -->
		<script src="js/jquery-ui.js" type="text/javascript"></script>    
		<!-- Infragistics Combined Scripts -->
	<script src="js/infragistics.core.js" type="text/javascript"></script>
	<script src="js/infragistics.lob.js" type="text/javascript"></script>
	<script type="text/javascript">
		var data = [
		{ "Text": "IG Touring", "Value": "IG Touring", "Trips": [
			{ "Text": "Rome", "Value": "Rome", "Packages": [
				{ "Duration": "One Week", "Price": "$1178" }, 
				{ "Duration": "Two Weeks", "Price": "$1997"}] }, 
			{ "Text": "Paris", "Value": "Paris", "Packages": [
				{ "Duration": "One Week", "Price": "$1549.99" }, 
				{ "Duration": "Two Weeks", "Price": "$2799.99"}] 
			} 
		]}];
		$(function () {
			//tree initialization
						$("#tree").igTree({
								singleBranchExpand: true,
								bindings: {
										textKey: 'Text',
										valueKey: 'Value',
										childDataProperty: 'Trips',
										bindings: {
												textKey: 'Text',
												valueKey: 'Value',
												childDataProperty: 'Packages',
												bindings: {
														textKey: 'Duration',
														valueKey: 'Price'
												}
										}
								},
								dataSource: data
						});
		});
		</script>
</head>
<body>
	<div id="tree"></div>
</body>
</html>

Related Samples

Related Topics

Dependencies

jquery-1.9.1.js
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.mouse.js
jquery.ui.draggable.js
jquery.ui.droppable.js
infragistics.templating.js
infragistics.util.js
infragistics.util.jquery.js
infragistics.datasource.js
infragistics.ui.widget.js
infragistics.ui.tree-en.js

Inherits

  • animationDuration

    Type:
    number
    Default:
    200

    Gets/Sets the duration of each animation such as the expand/collapse.

    Code Sample

     
				//Initialize
				$(".selector").igTree({
					animationDuration : 25
				});

				//Get
				var animationDuration = $(".selector").igTree("option", "animationDuration");

				//Set
				$(".selector").igTree("option", "animationDuration", 25);

  • bindings

    Type:
    object
    Default:
    {}

    Gets the data binding properties and keys. The igTree uses these to extract the corresponding data from the dataSource.

    Code Sample

     
				$(".selector").igTree({
					bindings: {
						textKey: 'Name',
						valueKey: 'ID',
						primaryKey: 'ID',
						childDataProperty: 'Products',
						bindings: {
							textKey: 'Name',
							valueKey: 'ID',
							primaryKey: 'ID',
							childDataProperty: 'Supplier',
							bindings: {
								textKey: 'Name',
								valueKey: 'ID'
							}
						}
					}
				});

    • bindings

      Type:
      object
      Default:
      {}

      Gets the next layer of bindings in a recursive fashion.

      Code Sample

       
					$(".selector").igTree({
						bindings: {
							textKey: "Name",
							valueKey: "ID",
							primaryKey: "ID",
							childDataProperty: "Products",
							bindings: {
								textKey: "Name",
								valueKey: "ID",
								primaryKey: "ID",
								childDataProperty: "Supplier",
								bindings: {
									textKey: "Name",
									valueKey: "ID"
								}
							}
						}
					});

    • checkedKey

      Type:
      string
      Default:
      "__checked__"

      Gets the name of the data source property the value of which would hold the node's
      check state. The check state itself is represented by a string enumeration with the
      checked|partially checked|unchecked states being respectively "on|partial|off".

      Code Sample

       
					$(".selector").igTree({
						dataSource: data,
						dataSourceType: "xml",
						initialExpandDepth: 0,
						pathSeparator: ".",
						bindings: {
							checkedKey: "Checked"
						}
					});

    • childDataProperty

      Type:
      string
      Default:
      "Nodes"

      Gets the name of the data source property that holds the child data of the current layer node.

      Code Sample

       
					$(".selector").igTree({
						bindings: {
							textKey: "Name",
							valueKey: "ID",
							primaryKey: "ID",
							childDataProperty: "Products",
							bindings: {
								textKey: "Name",
								valueKey: "ID",
								primaryKey: "ID",
								childDataProperty: "Supplier",
								bindings: {
									textKey: "Name",
									valueKey: "ID"
								}
							}
						}
					});

    • childDataXPath

      Type:
      string
      Default:
      "Children"

      Gets the XPath to the child data node. Used in client-only binding directly to XML.

      Code Sample

       
					$(".selector").igTree({
						dataSource: data,
							dataSourceType: "xml",
							initialExpandDepth: 0,
							pathSeparator: ".",
							bindings: {
								childDataXPath: "Folder"
							}
					});

    • expandedKey

      Type:
      string
      Default:
      "__expanded__"

      Gets the name of the data source property the value of which would hold the node`s
      expanded state. The expanded state is represented by a boolean.

      Code Sample

       
					$(".selector").igTree({
						dataSource: data,
						dataSourceType: "xml",
						initialExpandDepth: 0,
						pathSeparator: ".",
						bindings: {
							expandedKey: "Expanded"
						}
					});

    • imageUrlKey

      Type:
      string
      Default:
      "ImageUrl"

      Gets the name of the data source property the value of which would be used as a URL for the node image.

      Code Sample

       
					$(".selector").igTree({
						bindings: {
							imageUrlKey: "ImageUrl"
						}
					});

    • imageUrlXPath

      Type:
      string
      Default:
      "@ImageUrl"

      Gets the XPath to the image URL attribute/node. Used in client-only binding directly to XML.

      Code Sample

       
				//XML node has the following structure:
				//<Folder Text="Y.Malmsteen" ImageUrl="book.png" Value="Folder" NavigateUrl="http://www.infragistics.com">
					$(".selector").igTree({
						dataSource: data,
						dataSourceType: "xml",
						initialExpandDepth: 0,
						pathSeparator: ".",
						bindings: {
							imageUrlXPath: "@ImageUrl"
						}
				});

    • navigateUrlKey

      Type:
      string
      Default:
      "NavigateUrl"

      Gets the name of the data source property the value of which would be used as an href attribute for the node anchor.

      Code Sample

       
					$(".selector").igTree({
						bindings: {
							navigateUrlKey: "NavigateUrl"
						}
					});

    • navigateUrlXPath

      Type:
      string
      Default:
      "@NavigateUrl"

      Gets the XPath to the navigate URL attribute/node. Used in client-only binding directly to XML.

      Code Sample

       
				//XML node has the following structure:
				//<Folder Text="Y.Malmsteen" ImageUrl="book.png" Value="Folder" NavigateUrl="http://www.infragistics.com">
					$(".selector").igTree({
						dataSource: data,
						dataSourceType: "xml",
						initialExpandDepth: 0,
						pathSeparator: ".",
						bindings: {
							navigateUrlXPath: "@NavigateUrl"
						}
					});

    • nodeContentTemplate

      Type:
      string
      Default:
      null

      Gets the node content template for the current layer of bindings. The igTree utilizes igTemplating
      for generating node content templates. A good example of how to setup templating can be found here http://www.infragistics.com/community/blogs/marina_stoyanova/archive/2014/06/17/how-to-use-templates-to-style-the-different-nodes-of-the-ignite-ui-tree-control.aspx.

      Code Sample

       
					$(".selector").igTree({
						dataSource: data,
						dataSourceType: "xml",
						initialExpandDepth: 0,
						pathSeparator: ".",
						bindings: {
							nodeContentTemplate: "Stay: ${Duration}"
						}
					});

    • primaryKey

      Type:
      string
      Default:
      null

      Gets the name of the data source property the value of which is the primary key attribute
      for the data. This property is used when load on demand is enabled and if specified the node paths
      would be generated using primary keys instead of indices.

      Code Sample

       
					$(".selector").igTree({
						bindings: {
							textKey: "Name",
							valueKey: "ID",
							primaryKey: "ID",
							childDataProperty: "Products",
							bindings: {
								textKey: "Name",
								valueKey: "ID",
								primaryKey: "ID",
								childDataProperty: "Supplier",
								bindings: {
									textKey: "Name",
									valueKey: "ID"
								}
							}
						}
					});

    • searchFieldXPath

      Type:
      string
      Default:
      "Nodes"

      Gets the XPath to the root data node. Used in client-only binding directly to XML.

      Code Sample

       
				//XML node has the following structure:
				//<Folder Text="Y.Malmsteen" ImageUrl="book.png" Value="Folder" NavigateUrl="http://www.infragistics.com">
					$(".selector").igTree({
						bindings: {
							searchFieldXPath: "Folder"
						}
					});

    • targetKey

      Type:
      string
      Default:
      "Target"

      Gets the name of the data source property the value of which would be used as a target
      attribute for the node anchor.

      Code Sample

       
					$(".selector").igTree({
						bindings: {
							targetKey: "Target"
						}
					});

    • textKey

      Type:
      string
      Default:
      "Text"

      Gets the name of the data source property the value of which would be the node text.

      Code Sample

       
					$(".selector").igTree({
						bindings: {
							textKey: "Name",
							valueKey: "ID",
							primaryKey: "ID"
						}
					});

    • textXPath

      Type:
      string
      Default:
      "@Text"

      Gets the XPath to the text attribute/node. Used in client-only binding directly to XML.

      Code Sample

       
				//XML nodes have this structure:
				//<Folder Text="Y.Malmsteen" ImageUrl="book.png" Value="Folder" NavigateUrl="http://www.infragistics.com">
					$(".selector").igTree({
						dataSource: data,
						dataSourceType: "xml",
						initialExpandDepth: 0,
						pathSeparator: ".",
						bindings: {
							textXPath: "@Text"
						}
					});

    • valueKey

      Type:
      string
      Default:
      "Value"

      Gets the name of the data source property the value of which would be the node value.

      Code Sample

       
					$(".selector").igTree({
						bindings: {
							textKey: "Name",
							valueKey: "ID",
							primaryKey: "ID"
						}
					});

    • valueXPath

      Type:
      string
      Default:
      "@Value"

      Gets the XPath to the value attribute/node. Used in client-only binding directly to XML.

      Code Sample

       
				//XML nodes have this structure:
				//<Folder Text="Y.Malmsteen" ImageUrl="book.png" Value="Folder" NavigateUrl="http://www.infragistics.com">
					$(".selector").igTree({
						dataSource: data,
						dataSourceType: "xml",
						initialExpandDepth: 0,
						pathSeparator: ".",
						bindings: {
							valueXPath: "@Value"
						}
					});

  • checkboxMode

    Type:
    enumeration
    Default:
    off

    Gets the behavior and type of the checkboxes rendered for the tree nodes. Can be set only at initialization.

    Members

    • off
    • Type:string
    • Checkboxes are turned off and are not rendered for the tree.
    • biState
    • Type:string
    • Checkboxes are rendered and support two states (checked and unchecked). Checkboxes do not cascade down or up in this mode.
    • triState
    • Type:string
    • Checkboxes are rendered and support three states (checked, partial and unchecked). Checkboxes cascade up and down in this mode.

    Code Sample

     
				//Initialize
				$(".selector").igTree({
					checkboxMode : "triState"
				});
				//Get
				var checkboxMode = $(".selector").igTree("option", "checkboxMode");

  • dataSource

    Type:
    object
    Default:
    null

    Gets/Sets the igTree data source. Accepts any valid data source accepted by $.ig.DataSource, or an instance of an $.ig.DataSource itself.
    Once the data source is initialized, this option becomes an instance of the $.ig.HierarchicalDataSource.

    Code Sample

     
					//Initialize
					$(".selector").igTree({
						dataSource : data
					});

					//Get
					var dataSource = $(".selector").igTree("option", "dataSource");

  • dataSourceType

    Type:
    enumeration
    Default:
    null

    Gets the type of the data source. Delegates the value to $.ig.DataSource.settings.type. Explicitly set data source type (such as "json"). Please refer to the documentation of $.ig.DataSource.settings.type.

    Members

    • string
    • Type:string
    • Specifies the data source type implicitly.
    • null
    • Type:object
    • Type is inferred.

    Code Sample

     
				//Initialize
				$(".selector").igTree({
					dataSourceType : "xml"
				});
				//Get
				var type = $(".selector").igTree("option", "dataSourceType");

  • dataSourceUrl

    Type:
    enumeration
    Default:
    null

    Gets/Sets a remote URL accepted by $.ig.DataSource in order to request data from it.

    Members

    • string
    • Type:string
    • Specifies the remote url.
    • null
    • Type:object
    • Option is ignored.

    Code Sample

     
				//Initialize
				$(".selector").igTree({
					dataSourceUrl : "data.svc"
				});
				//Get
				var url = $(".selector").igTree("option", "dataSourceUrl");

  • defaultNodeTarget

    Type:
    string
    Default:
    "_self"

    Gets the default target attribute value for the node anchors.

    Code Sample

     
				//Initialize
				$(".selector").igTree({
					defaultNodeTarget : "_blank"
				});

				//Get
				var target = $(".selector").igTree("option", "defaultNodeTarget");

  • dragAndDrop

    Type:
    bool
    Default:
    false

    Gets/Sets whether drag and drop functionality is enabled.

    Code Sample

     
				//Initialize
				$(".selector").igTree({
					dragAndDrop : true
				});

				//Get
				var value = $(".selector").igTree("option", "dragAndDrop");

				//Set
				$(".selector").igTree("option", "dragAndDrop", false);

  • dragAndDropSettings

    Type:
    object
    Default:
    {}

    Gets/Sets specific settings for the drag and drop functionality.

    Code Sample

     
				//Initialize
				$(".selector").igTree({
					dragAndDropSettings : {
						allowDrop: true,
						...
					}
				});

				//Get
				var settings = $(".selector").igTree("option", "dragAndDropSettings");

				//Set
				settings.allowDrop = {
					allowDrop: false,
					...
					};
				$(".selector").igTree("option", "dragAndDropSettings", settings);

    • allowDrop

      Type:
      bool
      Default:
      false

      Gets whether the widget will accept drag and drop from other controls.

      Code Sample

       
					//Initialize
					$(".selector").igTree({
						dragAndDropSettings : {
							allowDrop: true
						}
					});

					//Get
					var settings = $(".selector").igTree("option", "dragAndDropSettings");
					var allowDrop = settings.allowDrop;

					//Set
					settings.allowDrop = false;
					$(".selector").igTree("option", "dragAndDropSettings", settings);

    • containment

      Type:
      enumeration
      Default:
      false

      Gets the containment for the drag helper. The area inside of which the helper is contained would be scrollable while dragging.

      Members

      • boolean
      • Type:bool
      • If set to false, then the draggable elements will be contained in their window.
      • selector
      • Type:string
      • The draggable element will be contained to the bounding box of the first element found by the selector. If no element is found, no containment will be set.
      • element
      • Type:object
      • The draggable element will be contained to the bounding box of this element.
      • string
      • Type:string
      • Possible values: "parent", "document", "window".
      • array
      • Type:array
      • An array defining a bounding box in the form [ x1, y1, x2, y2 ].

      Code Sample

       
						//Initialize
						$(".selector").igTree({
							dragAndDropSettings : {
								containment: true
							}
						});
						//Get
						var settings = $(".selector").igTree("option", "dragAndDropSettings");
						var containment = settings.containment;
						//Set
						settings.containment = false;
						$(".selector").igTree("option", "dragAndDropSettings", settings);

    • copyAfterMarkup

      Type:
      string
      Default:
      "<div><p><span></span><strong>Copy after</strong> {0}</p></div>"

      Gets the HTML markup for the "copy after" helper.

      Code Sample

       
					//Initialize
					$(".selector").igTree({
						dragAndDropSettings : {
							copyAfterMarkup: "<div class=\"message\"><h3>Copy After</h3><p> {0}</p></div>"
						}
					});

					//Get
					var settings = $(".selector").igTree("option", "dragAndDropSettings");
					var copyAfterMarkup = settings.copyAfterMarkup;

					//Set
					settings.copyAfterMarkup = "<div class=\"message\"><h3>Copy After</h3><p> {0}</p></div>";
					$(".selector").igTree("option", "dragAndDropSettings", settings);

    • copyBeforeMarkup

      Type:
      string
      Default:
      "<div><p><span></span><strong>Copy before</strong> {0}</p></div>"

      Gets the HTML markup for the "copy before" helper.

      Code Sample

       
					//Initialize
					$(".selector").igTree({
						dragAndDropSettings : {
							copyBeforeMarkup: "<div class=\"message\"><h3>Copy Before</h3><p> {0}</p></div>"
						}
					});

					//Get
					var settings = $(".selector").igTree("option", "dragAndDropSettings");
					var copyBeforeMarkup = settings.copyBeforeMarkup;

					//Set
					settings.copyBeforeMarkup = "<div class=\"message\"><h3>Copy Before</h3><p> {0}</p></div>";
					$(".selector").igTree("option", "dragAndDropSettings", settings);

    • copyBetweenMarkup

      Type:
      string
      Default:
      "<div><p><span></span><strong>Copy between</strong> {0} and {1}</p></div>"

      Gets the HTML markup for the "copy between" helper.

      Code Sample

       
					//Initialize
					$(".selector").igTree({
						dragAndDropSettings : {
							copyBetweenMarkup: "<div class=\"message\"><h3>Copy Between</h3><p> {0} and {1}</p></div>"
						}
					});

					//Get
					var settings = $(".selector").igTree("option", "dragAndDropSettings");
					var copyBetweenMarkup = settings.copyBetweenMarkup;

					//Set
					settings.copyBetweenMarkup = "<div class=\"message\"><h3>Copy Between</h3><p> {0} and {1}</p></div>";
					$(".selector").igTree("option", "dragAndDropSettings", settings);

    • copyToMarkup

      Type:
      string
      Default:
      "<div><p><span></span><strong>Copy to</strong> {0}</p></div>"

      Gets the HTML markup for the "copy to" helper.

      Code Sample

       
					//Initialize
					$(".selector").igTree({
						dragAndDropSettings : {
							copyToMarkup: "<div class=\"message\"><h3>Copy To</h3><p> {0}</p></div>"
						}
					});

					//Get
					var settings = $(".selector").igTree("option", "dragAndDropSettings");
					var copyToMarkup = settings.copyToMarkup;

					//Set
					settings.copyToMarkup = "<div class=\"message\"><h3>Copy To</h3><p> {0}</p></div>";
					$(".selector").igTree("option", "dragAndDropSettings", settings);

    • customDropValidation

      Type:
      enumeration
      Default:
      null

      Gets the method for custom drop point validation. Returning true from this function would render the drop point valid, while false would make it invalid. The function has one parameter which is the current drop point and the context (this) of the function is the drag element.

      Members

      • function
      • Type:function
      • A function that will be used for validating drop points.
      • null
      • Type:object
      • Only built-in validation is applied.

      Code Sample

       
						//Initialize
						$(".selector").igTree({
							dragAndDropSettings : {
								customDropValidation: function() {}
							}
						});
						//Get
						var settings = $(".selector").igTree("option", "dragAndDropSettings");
						var customDropValidation = settings.customDropValidation;
						//Set
						settings.customDropValidation = function() {};
						$(".selector").igTree("option", "dragAndDropSettings", settings);

    • dragAndDropMode

      Type:
      enumeration
      Default:
      default

      Gets the drag and drop mode.

      Members

      • default
      • Type:string
      • Performs "copy" when holding the Ctrl key, otherwise "move" is performed.
      • copy
      • Type:string
      • Makes a copy of the dragged node at the drop location.
      • move
      • Type:string
      • Moves the dragged node at the drop location.

      Code Sample

       
					//Initialize
					$(".selector").igTree({
						dragAndDropSettings : {
							dragAndDropMode: "copy"
						}
					});
					//Get
					var settings = $(".selector").igTree("option", "dragAndDropSettings");
					var dragAndDropMode = settings.dragAndDropMode;
					//Set
					settings.dragAndDropMode = "copy";
					$(".selector").igTree("option", "dragAndDropSettings", settings);

    • dragOpacity

      Type:
      number
      Default:
      0.75

      Gets the opacity of the drag helper: 0 is fully transparent while 1 is fully opaque.

      Code Sample

       
					//Initialize
					$(".selector").igTree({
						dragAndDropSettings : {
							dragOpacity: 0.25
						}
					});

					//Get
					var settings = $(".selector").igTree("option", "dragAndDropSettings");
					var dragOpacity = settings.dragOpacity;

					//Set
					settings.dragOpacity = 0.5;
					$(".selector").igTree("option", "dragAndDropSettings", settings);

    • dragStartDelay

      Type:
      number
      Default:
      200

      Gets the delay between mousedown and the start of the actual drag. Smaller values make the nodes
      more sensitive to drag and may interfere with selection.

      Code Sample

       
					//Initialize
					$(".selector").igTree({
						dragAndDropSettings : {
							dragStartDelay: 400
						}
					});

					//Get
					var settings = $(".selector").igTree("option", "dragAndDropSettings");
					var dragStartDelay = settings.dragStartDelay;

					//Set
					settings.dragStartDelay = 500;
					$(".selector").igTree("option", "dragAndDropSettings", settings);

    • expandDelay

      Type:
      number
      Default:
      1000

      Gets the delay after hovering a parent node before expanding that node during drag when expandOnDragOver is set to true.

      Code Sample

       
					//Initialize
					$(".selector").igTree({
						dragAndDropSettings : {
							expandDelay: 1500
						}
					});

					//Get
					var settings = $(".selector").igTree("option", "dragAndDropSettings");
					var expandDelay = settings.expandDelay;

					//Set
					settings.expandDelay = 2000;
					$(".selector").igTree("option", "dragAndDropSettings", settings);

    • expandOnDragOver

      Type:
      bool
      Default:
      true

      Gets whether when dragging over a collapsed node with children will trigger the node to expand.

      Code Sample

       
					//Initialize
					$(".selector").igTree({
						dragAndDropSettings : {
							expandOnDragOver: false
						}
					});

					//Get
					var settings = $(".selector").igTree("option", "dragAndDropSettings");
					var expand = settings.expandOnDragOver;

					//Set
					settings.expandOnDragOver = false;
					$(".selector").igTree("option", "dragAndDropSettings", settings);

    • helper

      Type:
      enumeration
      Default:
      default

      Gets the type of helper to be rendered for the drag operation.

      Members

      • function
      • Type:function
      • A function that will return a DOMElement to use while dragging.
      • default
      • Type:string
      • would render the default igTree helper.

      Code Sample

       
					//Initialize
					$(".selector").igTree({
						dragAndDropSettings : {
							helper: "myHelper"
						}
					});
					//Get
					var settings = $(".selector").igTree("option", "dragAndDropSettings");
					var helper = settings.helper;
					//Set
					settings.helper = "myHelper";
					$(".selector").igTree("option", "dragAndDropSettings", settings);

    • invalidMoveToMarkup

      Type:
      string
      Default:
      "<div><p><span></span><strong>{0}</strong></p></div>"

      Gets the HTML markup for the invalid helper.

      Code Sample

       
					//Initialize
					$(".selector").igTree({
						dragAndDropSettings : {
							invalidMoveToMarkup: "<div class=\"message\">Invalid</div>"
						}
					});

					//Get
					var settings = $(".selector").igTree("option", "dragAndDropSettings");
					var invalidMoveToMarkup = settings.invalidMoveToMarkup;

					//Set
					settings.invalidMoveToMarkup = "<div class=\"message\">Invalid</div>";
					$(".selector").igTree("option", "dragAndDropSettings", settings);

    • moveAfterMarkup

      Type:
      string
      Default:
      "<div><p><span></span><strong>Move after</strong> {0}</p></div>"

      Gets the HTML markup for the "move after" helper.

      Code Sample

       
					//Initialize
					$(".selector").igTree({
						dragAndDropSettings : {
							moveAfterMarkup: "<div class=\"message\"><h3>Move After</h3><p> {0}</p></div>"
						}
					});

					//Get
					var settings = $(".selector").igTree("option", "dragAndDropSettings");
					var moveAfterMarkup = settings.moveAfterMarkup;

					//Set
					settings.moveAfterMarkup = "<div class=\"message\"><h3>Move After</h3><p> {0}</p></div>";
					$(".selector").igTree("option", "dragAndDropSettings", settings);

    • moveBeforeMarkup

      Type:
      string
      Default:
      "<div><p><span></span><strong>Move before</strong> {0}</p></div>"

      Gets the HTML markup for the "move before" helper.

      Code Sample

       
					//Initialize
					$(".selector").igTree({
						dragAndDropSettings : {
							moveBeforeMarkup: "<div class=\"message\"><h3>Move After</h3><p> {0}</p></div>"
						}
					});

					//Get
					var settings = $(".selector").igTree("option", "dragAndDropSettings");
					var moveBeforeMarkup = settings.moveBeforeMarkup;

					//Set
					settings.moveBeforeMarkup = "<div class=\"message\"><h3>Move Before</h3><p> {0}</p></div>";
					$(".selector").igTree("option", "dragAndDropSettings", settings);

    • moveBetweenMarkup

      Type:
      string
      Default:
      "<div><p><span></span><strong>Move between</strong> {0} and {1}</p></div>"

      Gets the HTML markup for the "move between" helper.

      Code Sample

       
					//Initialize
					$(".selector").igTree({
						dragAndDropSettings : {
							moveBetweenMarkup: "<div class=\"message\"><h3>Move Between</h3><p> {0}</p></div>"
						}
					});

					//Get
					var settings = $(".selector").igTree("option", "dragAndDropSettings");
					var moveBetweenMarkup = settings.moveBetweenMarkup;

					//Set
					settings.moveBetweenMarkup = "<div class=\"message\"><h3>Move Between</h3><p> {0} and {1}</p></div>";
					$(".selector").igTree("option", "dragAndDropSettings", settings);

    • moveToMarkup

      Type:
      string
      Default:
      "<div><p><span></span><strong>Move to</strong> {0}</p></div>"

      Gets the HTML markup for the "move to" helper.

      Code Sample

       
					//Initialize
					$(".selector").igTree({
						dragAndDropSettings : {
							moveToMarkup: "<div class=\"message\"><h3>Move To</h3><p> {0}</p></div>"
						}
					});

					//Get
					var settings = $(".selector").igTree("option", "dragAndDropSettings");
					var moveBetweenMarkup = settings.moveBetweenMarkup;

					//Set
					settings.moveBetweenMarkup = "<div class=\"message\"><h3>Move Between</h3><p> {0} and {1}</p></div>";
					$(".selector").igTree("option", "dragAndDropSettings", settings);

    • revert

      Type:
      bool
      Default:
      true

      Gets whether the helper would revert to its original position upon an invalid drop.

      Code Sample

       
					//Initialize
					$(".selector").igTree({
						dragAndDropSettings : {
							revert: false
						}
					});

					//Get
					var settings = $(".selector").igTree("option", "dragAndDropSettings");
					var revert = settings.revert;

					//Set
					settings.revert = false;
					$(".selector").igTree("option", "dragAndDropSettings", settings);

    • revertDuration

      Type:
      number
      Default:
      500

      Gets the duration of the revert animation.

      Code Sample

       
					//Initialize
					$(".selector").igTree({
						dragAndDropSettings : {
							revertDuration: 1000
						}
					});

					//Get
					var settings = $(".selector").igTree("option", "dragAndDropSettings");
					var revertDuration = settings.revertDuration;

					//Set
					settings.revertDuration = 1000;
					$(".selector").igTree("option", "dragAndDropSettings", settings);

    • zIndex

      Type:
      number
      Default:
      10

      Gets the z-index that would be set for the drag helper.

      Code Sample

       
					//Initialize
					$(".selector").igTree({
						dragAndDropSettings : {
							zIndex: 20
						}
					});

					//Get
					var settings = $(".selector").igTree("option", "dragAndDropSettings");
					var zIndex = settings.zIndex;

					//Set
					settings.zIndex = 20;
					$(".selector").igTree("option", "dragAndDropSettings", settings);

  • height

    Type:
    enumeration
    Default:
    null

    Gets/Sets how the height of of the control container.

    Members

    • string
    • Type:string
    • The widget height can be set in pixels (px) and percentage (%).
    • number
    • Type:number
    • The widget height can be set as a number in pixels.
    • null
    • Type:object
    • No height will be applied to the container and it will be rendered default for the browser rendering engine.

    Code Sample

     
				//Initialize
				$(".selector").igTree({
					height : 400
				});
				//Get
				var height = $(".selector").igTree("option", "height");
				//Set
				$(".selector").igTree("option", "height", 400);

  • hotTracking

    Type:
    bool
    Default:
    true

    Gets/Sets whether nodes are hoverable. Setting this option to false would make the tree to not apply hover styles on the nodes when they are hovered.

    Code Sample

     
				//Initialize
				$(".selector").igTree({
					hotTracking : false
				});

				//Get
				var tracking = $(".selector").igTree("option", "hotTracking");

				//Set
				$(".selector").igTree("option", "hotTracking", false);

  • initialExpandDepth

    Type:
    number
    Default:
    -1

    Gets the initial depth the igTree is going to be expanded to upon initial render.

    Code Sample

     
				//Initialize
				$(".selector").igTree({
					initialExpandDepth : 1
				});

				//Get
				var expandDepth = $(".selector").igTree("option", "initialExpandDepth");

  • language
    Inherited

    Type:
    string
    Default:
    "en"

    Set/Get the locale language setting for the widget.

    Code Sample

     
					//Initialize
				$(".selector").igTree({
					language: "ja"
				});

				// Get
				var language = $(".selector").igTree("option", "language");

				// Set
				$(".selector").igTree("option", "language", "ja");

  • leafNodeImageClass

    Type:
    enumeration
    Default:
    null

    Gets/Sets the CSS class applied to all leaf nodes.

    Members

    • string
    • Type:string
    • Specified class with a CSS sprite that would be rendered for each node that has no children (If you define both leafNodeImageUrl and leafNodeImageClass the leafNodeImageUrl would take priority).
    • null
    • Type:object
    • Option is ignored.

    Code Sample

     
				//Initialize
				$(".selector").igTree({
					leafNodeImageClass : "leafnodeimage"
				});
				//Get
				var class = $(".selector").igTree("option", "leafNodeImageClass");
				// Set - works only if an image was also set on initialization.
				// Throws an error otherwise, as the element holding the image source is missing.
				$(".selector").igTree("option", "leafNodeImageClass", "altleafnodeimage");

  • leafNodeImageTooltip

    Type:
    enumeration
    Default:
    null

    Gets/Sets the tooltip applied to all leaf node images.

    Members

    • string
    • Type:string
    • Specified a tooltip that would be rendered for each node that has no children.
    • null
    • Type:object
    • Option is ignored.

    Code Sample

     
				//Initialize
				$(".selector").igTree({
					leafNodeImageTooltip : "Book"
				});
				//Get
				var text = $(".selector").igTree("option", "leafNodeImageTooltip");
				// Set - works only if an image was also set on initialization.
				// Throws an error otherwise, as the element holding the image source is missing.
				$(".selector").igTree("option", "leafNodeImageTooltip", "Magazine");

  • leafNodeImageUrl

    Type:
    enumeration
    Default:
    null

    Gets/Sets the image url applied to all leaf nodes.

    Members

    • string
    • Type:string
    • Image with the specified URL will be rendered for each node that has no children (If you define both leafNodeImageUrl and leafNodeImageClass the leafNodeImageUrl would take priority).
    • null
    • Type:object
    • Option is ignored.

    Code Sample

     
				//Initialize
				$(".selector").igTree({
					leafNodeImageUrl : "images/book.png"
				});
				//Get
				var url = $(".selector").igTree("option", "leafNodeImageUrl");
				// Set - works only if an image was also set on initialization.
				// Throws an error otherwise, as the element holding the image source is missing.
				$(".selector").igTree("option", "leafNodeImageUrl", "images/magazine.png");

  • loadOnDemand

    Type:
    bool
    Default:
    false

    Gets whether all the data would be bound initially or each child collection would be bound upon expand.

    Code Sample

     
				//Initialize
				$(".selector").igTree({
					loadOnDemand : true
				});

				//Get
				var loadOnDemand = $(".selector").igTree("option", "loadOnDemand");

  • locale
    Inherited

    Type:
    object
    Default:
    null

    Set/Get the locale setting for the widget.

    Code Sample

     
					//Initialize
				$(".selector").igTree({
					locale: {}
				});

				// Get
				var locale = $(".selector").igTree("option", "locale");

				// Set
				$(".selector").igTree("option", "locale", {});

  • parentNodeImageClass

    Type:
    enumeration
    Default:
    null

    Gets/Sets the CSS class applied to all parent nodes.

    Members

    • string
    • Type:string
    • Specified class with a CSS sprite that would be rendered for each node that has children (If you define both parentNodeImageUrl and parentNodeImageClass the parentNodeImageUrl would take priority).
    • null
    • Type:object
    • Option is ignored.

    Code Sample

     
				//Initialize
				$(".selector").igTree({
					parentNodeImageClass : "folderimage"
				});
				//Get
				var class = $(".selector").igTree("option", "parentNodeImageClass");
				// Set - works only if an image was also set on initialization.
				// Throws an error otherwise, as the element holding the image source is missing.
				$(".selector").igTree("option", "parentNodeImageClass", "altfolderimage");

  • parentNodeImageTooltip

    Type:
    enumeration
    Default:
    null

    Gets/Sets the tooltip applied to all parent node images.

    Members

    • string
    • Type:string
    • Specified a tooltip that would be rendered for each node that has children.
    • null
    • Type:object
    • Option is ignored.

    Code Sample

     
				//Initialize
				$(".selector").igTree({
					parentNodeImageTooltip : "Folder"
				});
				//Get
				var text = $(".selector").igTree("option", "parentNodeImageTooltip");
				// Set - works only if an image was also set on initialization.
				// Throws an error otherwise, as the element holding the image source is missing.
				$(".selector").igTree("option", "parentNodeImageTooltip", "rootFolder");

  • parentNodeImageUrl

    Type:
    enumeration
    Default:
    null

    Gets/Sets the image url applied to all parent nodes.

    Members

    • string
    • Type:string
    • Image with the specified URL will be rendered for each node that has children (If you define both parentNodeImageUrl and parentNodeImageClass the parentNodeImageUrl would take priority).
    • null
    • Type:object
    • Option is ignored.

    Code Sample

     
				//Initialize
				$(".selector").igTree({
					parentNodeImageUrl : "images/folder.png"
				});
				//Get
				var url = $(".selector").igTree("option", "parentNodeImageUrl");
				// Set - works only if an image was also set on initialization.
				// Throws an error otherwise, as the element holding the image source is missing.
				$(".selector").igTree("option", "parentNodeImageUrl", "images/photo.png");

  • pathSeparator

    Type:
    string
    Default:
    "_"

    Gets the node data-path attribute separator character.

    Code Sample

     
				//Initialize
				$(".selector").igTree({
					pathSeparator : "."
				});

				//Get
				var pathSeparator = $(".selector").igTree("option", "pathSeparator");

  • regional
    Inherited

    Type:
    enumeration
    Default:
    defaults

    Set/Get the regional setting for the widget.

    Code Sample

     
				//Initialize
				$(".selector").igTree({
					regional: "ja"
				});
				// Get
				var regional = $(".selector").igTree("option", "regional");
				// Set
				$(".selector").igTree("option", "regional", "ja");

  • requestType

    Type:
    string
    Default:
    "GET"

    Gets the HTTP verb used for remote requests. Specifies the HTTP verb to be used to issue the requests to the dataSourceUrl.

    Code Sample

     
				//Initialize
				$(".selector").igTree({
					requestType : "GET"
				});

				//Get
				var url = $(".selector").igTree("option", "requestType");

  • responseContentType

    Type:
    string
    Default:
    null

    Gets the type of the content in a remote data source response. Content type of the response from the dataSourceUrl. See http://api.jquery.com/jQuery.ajax/ => contentType.

    Code Sample

     
				//Initialize
				$(".selector").igTree({
					responseContentType : "application/json"
				});

				//Get
				var url = $(".selector").igTree("option", "responseContentType");

  • responseDataKey

    Type:
    enumeration
    Default:
    null

    Gets the JSON key at which a remote data source will write the data. Delegates the value to $.ig.DataSource.settings.responseDataKey. Please refer to the documentation of $.ig.DataSource.settings.responseDataKey.

    Members

    • string
    • Type:string
    • Specifies the name of the property in which data records are held if the response is wrapped.
    • null
    • Type:object
    • Option is ignored.

    Code Sample

     
				//Initialize
				$(".selector").igTree({
					responseDataKey : "d.results"
				});
				//Get
				var responseDataKey = $(".selector").igTree("option", "responseDataKey");

  • responseDataType

    Type:
    enumeration
    Default:
    null

    Gets the data type of the remote data source response. Delegates the value to $.ig.DataSource.settings.responseDataType. Please refer to the documentation of $.ig.DataSource.settings.responseDataType.

    Members

    Code Sample

     
				//Initialize
				$(".selector").igTree({
					responseDataType : "json"
				});
				//Get
				var responseDataType = $(".selector").igTree("option", "responseDataType");

  • singleBranchExpand

    Type:
    bool
    Default:
    false

    Gets/Sets one or more branches to be expanded at a time. If set to true then only one branch at each level of the tree can be expanded at a time. Otherwise multiple branches can be expanded at a time.

    Code Sample

     
				//Initialize
				$(".selector").igTree({
					singleBranchExpand : true
				});

				//Get
				var singleBranchExpand = $(".selector").igTree("option", "singleBranchExpand");

				//Set
				$(".selector").igTree("option", "singleBranchExpand", true);

  • updateUrl

    Type:
    string
    Default:
    null

    Gets the URL to which updating requests will be made.

    Code Sample

     
				//Initialize
				$(".selector").igTree({
					updateUrl: "http://example.com/update"
				});

				//Get
				var updateUrl = $(".selector").igTree("option", "updateUrl");

				//Set
				$(".selector").igTree("option", "updateUrl", "http://example.com/update");

  • width

    Type:
    enumeration
    Default:
    null

    Gets/Sets the width of the control container.

    Members

    • string
    • Type:string
    • The widget width can be set in pixels (px) and percentage (%).
    • number
    • Type:number
    • The widget width can be set as a number in pixels.
    • null
    • Type:object
    • No width will be applied to the container and it will be rendered by default for the browser rendering engine.

    Code Sample

     
				//Initialize
				$(".selector").igTree({
					width : "300px"
				});
				//Get
				var width = $(".selector").igTree("option", "width");
				//Set
				$(".selector").igTree("option", "width", "300px");

For more information on how to interact with the Ignite UI controls' events, refer to
Using Events in Ignite UI.

Note: Calling API methods programmatically does not raise events related to their operation unless specifically stated otherwise by the corresponding API documentation; those events are only raised by their respective user interaction.

Show Details

  • dataBinding

    Cancellable:
    false

    Fired before databinding is performed.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the tree performing databinding.

    Code Sample

     
				//Bind after initialization
				$(document).on("igtreedatabinding", ".selector", function (evt, ui) {
					//return reference to igTree
					ui.owner;
				});

				//Initialize
				$(".selector").igTree({
					dataBinding: function(evt, ui) {...}
				});

  • dataBound

    Cancellable:
    false

    Fired after databinding is finished.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the tree performing databinding.

        • dataView
          Type: Object

          Gets a reference to the data the tree has been databound to.

    Code Sample

     
				//Bind after initialization
				$(document).on("igtreedatabound", ".selector", function (evt, ui) {
					//return reference to igTree
					ui.owner;
					//return reference to the data the tree has been databound to.
					ui.dataView;
				});

				//Initialize
				$(".selector").igTree({
					dataBound: function(evt, ui) {...}
				});

  • drag

    Cancellable:
    true

    Fired on node drag.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • path
          Type: String

          Gets the node data-path attrubte.

        • element
          Type: jQuery

          Gets a reference to the jQuery element of the node.

        • data
          Type: Object

          Gets the node data.

        • binding
          Type: Object

          Gets a reference to the bindings object for the level at which the dragged node is located.

        • helper
          Type: jQuery

          Gets a reference to the helper.

        • offset
          Type: Object

          Gets a reference to the offset.

        • orginalPosition
          Type: Object

          Gets a reference to the original position of the draggable element (the node).

        • position
          Type: Object

          Gets a reference to the current position of the draggable element.

    Code Sample

     
				//Bind after initialization
				$(document).on("igtreedrag", ".selector", function (evt, ui) {
					//return reference to the binding.
					ui.binding;
					//return reference to the data.
					ui.data;
					//return reference to the element.
					ui.element;
					//return reference to the helper.
					ui.helper;
					//return reference to the offset.
					ui.offest;
					//return to get a reference to the original position of the draggable element (the node).
					ui.orginalPosition
					//return reference to the node path.
					ui.path
					//return reference to the current position of the draggable element.
					ui.position
				});

				//Initialize
				$(".selector").igTree({
					drag: function(evt, ui) {...}
				});

  • dragStart

    Cancellable:
    true

    Fired on node drag start.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • path
          Type: String

          Gets the node data-path attrubte.

        • element
          Type: jQuery

          Gets a reference to the jQuery element of the node.

        • data
          Type: Object

          Gets the node data.

        • binding
          Type: Object

          Gets a reference to the bindings object for the level at which the dragged node is located.

        • helper
          Type: jQuery

          Gets a reference to the helper.

        • offset
          Type: Object

          Gets a reference to the offset.

        • orginalPosition
          Type: Object

          Gets a reference to the original position of the draggable element (the node).

        • position
          Type: Object

          Gets a reference to the current position of the draggable element.

    Code Sample

     
				//Bind after initialization
				$(document).on("igtreedragstart", ".selector", function (evt, ui) {
					//return reference to the binding.
					ui.binding;
					//return reference to the data.
					ui.data;
					//return reference to the element.
					ui.element;
					//return reference to the helper.
					ui.helper;
					//return reference to the offset.
					ui.offest;
					//return to get a reference to the original position of the draggable element (the node).
					ui.orginalPosition
					//return reference to the node path.
					ui.path
					//return reference to the current position of the draggable element.
					ui.position
				});

				//Initialize
				$(".selector").igTree({
					dragStart: function(evt, ui) {...}
				});

  • dragStop

    Cancellable:
    false

    Fired after a drag operation has completed.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • helper
          Type: jQuery

          Gets a reference to the helper.

        • offset
          Type: Object

          Gets a reference to the offset.

        • orginalPosition
          Type: Object

          Gets a reference to the original position of the draggable element (the node).

        • position
          Type: Object

          Gets a reference to the current position of the draggable element.

    Code Sample

     
				//Bind after initialization
				$(document).on("igtreedragstop", ".selector", function (evt, ui) {
					ui.offest;
					//return to get a reference to the original position of the draggable element (the node).
					ui.orginalPosition
					//return reference to the node path.
					ui.path
					//return reference to the current position of the draggable element.
					ui.position
				});

				//Initialize
				$(".selector").igTree({
					dragStop: function(evt, ui) {...}
				});

  • nodeCheckstateChanged

    Cancellable:
    false

    Fired after the checkstate of a node is changed.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the tree.

        • node
          Type: Object

          Gets a reference to the node object the checkbox of which is being interacted with.

        • newState
          Type: String

          Gets the new state that is already applied to the checkbox.

        • newCheckedNodes
          Type: Array

          Gets the collection of all checked nodes.

        • newPartiallyCheckedNodes
          Type: Array

          Gets the collection of all partially checked nodes.

    Code Sample

     
				//Bind after initialization
				$(document).on("igtreenodecheckstatechanged", ".selector", function (evt, ui) {
					//return reference to igTree
					ui.owner;
					//return reference to the node object the checkbox of which is being interacted with.
					ui.node;
					//return the new current state of the checkbox.
					ui.newState;
					//return the collection of all checked nodes.
					ui.currentCheckedNodes;
					//return the collection of all partially checked nodes.
					ui.newPartiallyCheckedNodes;
				});

				//Initialize
				$(".selector").igTree({
					nodeCheckstateChanged: function(evt, ui) {...}
				});

  • nodeCheckstateChanging

    Cancellable:
    true

    Fired before the checkbox state of a node is changed.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the tree.

        • node
          Type: Object

          Gets a reference to the node object the checkbox of which is being interacted with.

        • currentState
          Type: String

          Gets the current state of the checkbox.

        • newState
          Type: String

          Gets the new state that is going to be applied to the checkbox.

        • currentCheckedNodes
          Type: Array

          Gets the collection of all checked nodes before the new state is applied.

    Code Sample

     
				//Bind after initialization
				$(document).on("igtreenodecheckstatechanging", ".selector", function (evt, ui) {
					//return reference to igTree
					ui.owner;
					//return reference to the node object the checkbox of which is being interacted with.
					ui.node;
					//return the current state of the checkbox.
					ui.currentState
					//return the new current state of the checkbox.
					ui.newState;
					//return the collection of all checked nodes.
					ui.currentCheckedNodes;
				});

				//Initialize
				$(".selector").igTree({
					nodeCheckstateChanging: function(evt, ui) {...}
				});

  • nodeClick

    Cancellable:
    false

    Fired on node click.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the tree.

        • node
          Type: Object

          Gets a reference to the node object being clicked.

    Code Sample

     
				//Bind after initialization
				$(document).on("igtreenodeclick", ".selector", function (evt, ui) {
					//return reference to igTree
					ui.owner;
					//return reference to the node object being clicked.
					ui.node;
				});

				//Initialize
				$(".selector").igTree({
					nodeClick: function(evt, ui) {...}
				});

  • nodeCollapsed

    Cancellable:
    false

    Fired after a node is collapsed.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the tree.

        • node
          Type: Object

          Gets a reference to the collapsed node object.

    Code Sample

     
				//Bind after initialization
				$(document).on("igtreenodecollapsed", ".selector", function (evt, ui) {
					//return reference to igTree
					ui.owner;
					//return reference to the collapsed node object.
					ui.node;
				});

				//Initialize
				$(".selector").igTree({
					nodeCollapsed: function(evt, ui) {...}
				});

  • nodeCollapsing

    Cancellable:
    true

    Fired before a node is collapsed.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the tree.

        • node
          Type: Object

          Gets a reference to the node object about to collapse.

    Code Sample

     
				//Bind after initialization
				$(document).on("igtreenodecollapsing", ".selector", function (evt, ui) {
					//return reference to igTree
					ui.owner;
					//return reference to the node object about to collapse.
					ui.node;
				});

				//Initialize
				$(".selector").igTree({
					nodeCollapsing: function(evt, ui) {...}
				});

  • nodeDoubleClick

    Cancellable:
    false

    Fired on node double click.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • path
          Type: String

          Gets the data-path attribute of the double clicked node.

        • element
          Type: jQuery

          Gets a reference to the jQuery element of the double clicked node.

        • data
          Type: Object

          Gets the node data.

        • binding
          Type: Object

          Gets a reference to the bindings object for the level at which the double clicked node is located.

    Code Sample

     
				//Bind after initialization
				$(document).on("igtreenodedoubleclick", ".selector", function (evt, ui) {
					//return a reference to the path of the double clicked node.
					ui.path;
					//return a reference to the jQuery element of the double clicked node.
					ui.element;
					//return the node data.
					ui.data;
					//return a reference to the bindings object for the level at which the double clicked node is located.
					ui.binding;
				});

				//Initialize
				$(".selector").igTree({
					nodeDoubleClick: function(evt, ui) {...}
				});

  • nodeDropped

    Cancellable:
    false

    Fired after a node is dropped.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • path
          Type: String

          Gets the target node data-path attribute.

        • element
          Type: jQuery

          Gets a reference to the jQuery element of the node.

        • data
          Type: Object

          Gets a reference to the target node data.

        • binding
          Type: Object

          Gets a reference to the binding object for the level at which the target node is located.

        • helper
          Type: jQuery

          Gets a reference to the helper.

        • offset
          Type: Object

          Gets a reference to the offset.

        • position
          Type: Object

          Gets a reference to the current position of the draggable element.

        • draggable
          Type: jQuery

          Gets a reference to the draggable element (the node).

    Code Sample

     
				//Bind after initialization
				$(document).on("igtreenodedropped", ".selector", function (evt, ui) {
					//return reference to the binding.
					ui.binding;
					//return reference to the data.
					ui.data;
					//return reference to the draggable element (the node).
					ui.draggable
					//return reference to the element.
					ui.element;
					//return reference to the helper.
					ui.helper;
					//return reference to the offset.
					ui.offest;
					//return to get a reference to the original position of the draggable element (the node).
					ui.orginalPosition
					//return reference to the node path.
					ui.path
					//return reference to the current position of the draggable element.
					ui.position
				});

				//Initialize
				$(".selector").igTree({
					nodeDropped: function(evt, ui) {...}
				});

  • nodeDropping

    Cancellable:
    true

    Fired before a node is dropped.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • path
          Type: String

          Gets the target node data-path attribute.

        • element
          Type: jQuery

          Gets a reference to the jQuery element of the node.

        • data
          Type: Object

          Gets a reference to the target node data.

        • binding
          Type: Object

          Gets a reference to the binding object for the level at which the target node is located.

        • helper
          Type: jQuery

          Gets a reference to the helper.

        • offset
          Type: Object

          Gets a reference to the offset.

        • position
          Type: Object

          Gets a reference to the current position of the draggable element.

        • draggable
          Type: jQuery

          Gets a reference to the draggable element (the node).

    Code Sample

     
				//Bind after initialization
				$(document).on("igtreenodedropping", ".selector", function (evt, ui) {
					//return reference to the binding.
					ui.binding;
					//return reference to the data.
					ui.data;
					//return reference to the draggable element (the node).
					ui.draggable
					//return reference to the element.
					ui.element;
					//return reference to the helper.
					ui.helper;
					//return reference to the offset.
					ui.offest;
					//return to get a reference to the original position of the draggable element (the node).
					ui.path
					//return reference to the current position of the draggable element.
					ui.position
				});

				//Initialize
				$(".selector").igTree({
					nodeDropping: function(evt, ui) {...}
				});

  • nodeExpanded

    Cancellable:
    false

    Fired after a node is expanded.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the tree.

        • node
          Type: Object

          Gets a reference to the expanded node object.

    Code Sample

     
				//Bind after initialization
				$(document).on("igtreenodeexpanded", ".selector", function (evt, ui) {
					//return reference to igTree
					ui.owner;
					//return reference to the expanded node object.
					ui.node;
				});

				//Initialize
				$(".selector").igTree({
					nodeExpanded: function(evt, ui) {...}
				});

  • nodeExpanding

    Cancellable:
    true

    Fired before a node is expanded.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the tree.

        • node
          Type: Object

          Gets a reference to the node object about to expand.

    Code Sample

     
				//Bind after initialization
				$(document).on("igtreenodeexpanding", ".selector", function (evt, ui) {
					//return reference to igTree
					ui.owner;
					//return reference to the node object about to expand.
					ui.node;
				});

				//Initialize
				$(".selector").igTree({
					nodeExpanding: function(evt, ui) {...}
				});

  • nodePopulated

    Cancellable:
    false

    Fired after the children of a node are populated in the case of load on demand.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • path
          Type: String

          Gets the data-path atrribute of the populated node.

        • element
          Type: jQuery

          Gets a reference to the jQuery element of the node whose children are populated.

        • data
          Type: Object

          Gets the node data.

        • binding
          Type: Object

          Gets a reference to the bindings object for the level at which the populated node is located.

    Code Sample

     
				//Bind after initialization
				$(document).on("igtreenodepopulated", ".selector", function (evt, ui) {
					//return a reference to the path of the populated node.
					ui.path;
					//return a reference to the jQuery element of the populated node.
					ui.element;
					//return the node data.
					ui.data;
					//return a reference to the bindings object for the level at which the populated node is located.
					ui.binding;
				});

				//Initialize
				$(".selector").igTree({
					nodePopulated: function(evt, ui) {...}
				});

  • nodePopulating

    Cancellable:
    true

    Fired before the children of a node are populated in the case of load on demand.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • path
          Type: String

          Gets the data-path attribute of the node being populated.

        • element
          Type: jQuery

          Gets a reference to the jQuery element of the node whose children are being populated.

        • data
          Type: Object

          Gets the node data.

        • binding
          Type: Object

          Gets a reference to the bindings object for the level at which the populating node is located.

    Code Sample

     
				//Bind after initialization
				$(document).on("igtreenodepopulating", ".selector", function (evt, ui) {
					//return areference to the path of the node being populated.
					ui.path;
					//return a reference to the jQuery element of the node being populated.
					ui.element;
					//return the node data.
					ui.data;
					//return a reference to the bindings object for the level at which the populating node is located.
					ui.binding;
				});

				//Initialize
				$(".selector").igTree({
					nodePopulating: function(evt, ui) {...}
				});

  • rendered

    Cancellable:
    false

    Fired after rendering of the tree has finished.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the tree that performed the rendering.

    Code Sample

     
				//Bind after initialization
				$(document).on("igtreerendered", ".selector", function (evt, ui) {
					//return reference to the tree.
					ui.owner;
				});

				//Initialize
				$(".selector").igTree({
					rendered: function(evt, ui) {...}
				});

  • rendering

    Cancellable:
    false

    Fired before rendering of the tree begins.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the tree performing rendering.

        • dataView
          Type: Object

          Gets a reference to the data the tree is going to render.

    Code Sample

     
				//Bind after initialization
				$(document).on("igtreerendering", ".selector", function (evt, ui) {
					//return reference to the tree.
					ui.owner;
					//return reference to the data the tree is going to render.
					ui.dataView;
				});

				//Initialize
				$(".selector").igTree({
					rendering: function(evt, ui) {...}
				});

  • selectionChanged

    Cancellable:
    false

    Fired after a new node is selected.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the tree.

        • selectedNodes
          Type: Array

          Gets a reference to currently selected nodes.

        • newNodes
          Type: Array

          Gets a reference to the newly added nodes to the selection.

    Code Sample

     
				//Bind after initialization
				$(document).on("igtreeselectionchanged", ".selector", function (evt, ui) {
					//return reference to the tree.
					ui.owner;
					//return reference to the selected nodes.
					ui.selectedNodes;
					//return reference to the newly added nodes to the selection.
					ui.newNodes;
				});

				//Initialize
				$(".selector").igTree({
					selectionChanged: function(evt, ui) {...}
				});

  • selectionChanging

    Cancellable:
    true

    Fired before a new node is selected.

    • evt
      Type: Event

      JQuery event object.

    • ui
      Type: Object

        • owner
          Type: Object

          Gets a reference to the tree.

        • selectedNodes
          Type: Array

          Gets a reference to currently selected nodes.

        • newNodes
          Type: Array

          Gets a reference to the new nodes getting selected.

    Code Sample

     
				//Bind after initialization
				$(document).on("igtreeselectionchanging", ".selector", function (evt, ui) {
					//return reference to the tree.
					ui.owner;
					//return reference to the currently selected nodes.
					ui.selectedNodes;
					//return reference to the new nodes getting selected.
					ui.newNodes;
				});

				//Initialize
				$(".selector").igTree({
					selectionChanging: function(evt, ui) {...}
				});

  • addNode

    .igTree( "addNode", node:object, [parent:object], [nodeIndex:number] );

    Adds a new array of nodes to the tree. New nodes are appended to the root or to a specified parent node, at a specified index.

    • node
    • Type:object
    • Specifies the data used to create the new nodeс.
    • parent
    • Type:object
    • Optional
    • Specifies the element of the parent node the nodes are to be appended to.
    • nodeIndex
    • Type:number
    • Optional
    • Specifies the index at which the nodes to be inserted.

    Code Sample

     
				$(".selector").igTree("addNode", {Text: "New Node"}, parentNode);

  • applyChangesToNode

    .igTree( "applyChangesToNode", element:object, data:object );

    Performs a UI update on the provided node element with the provided data.

    • element
    • Type:object
    • Specifies the node to be updated.
    • data
    • Type:object
    • Specifies the new data item the node would update according to.

    Code Sample

     
				 $(".selector").igTree("applyChangesToNode", node, newData);

  • changeGlobalLanguage
    Inherited

    .igTree( "changeGlobalLanguage" );

    Changes the widget language to global language. Global language is the value in $.ig.util.language.

    Code Sample

     
				$(".selector").igTree("changeGlobalLanguage");

  • changeGlobalRegional
    Inherited

    .igTree( "changeGlobalRegional" );

    Changes the widget regional settins to global regional settings. Global regional settings are container in $.ig.util.regional.

    Code Sample

     
				$(".selector").igTree("changeGlobalRegional");

  • changeLocale

    .igTree( "changeLocale" );

  • checkedNodes

    .igTree( "checkedNodes" );
    Return Type:
    array
    Return Type Description:
    Returns an array of node objects for all the checked nodes.

    Retrieves all the node objects for the nodes that have their checkboxes checked.

    Code Sample

     
				var nodes = $(".selector").igTree("checkedNodes");

  • checkNode

    .igTree( "checkNode", nodeObj:object, cascadeDir:object );

    Applies a checked state to a node.

    • nodeObj
    • Type:object
    • Specifies the node element to apply the state to.
    • cascadeDir
    • Type:object

    Code Sample

     
				$(".selector").igTree("checkNode", targetNode);

  • checkState

    .igTree( "checkState", node:object );
    Return Type:
    string
    Return Type Description:
    The checkbox state of the node. "on" if checked, "partial" if partially checked, "off" if unchecked.

    Returns the specified node checkstate.

    • node
    • Type:object
    • Specifies the node element.

    Code Sample

     
				var checkedState = $(".selector").igTree("checkState", targetNode);

  • children

    .igTree( "children", parent:object );
    Return Type:
    array
    Return Type Description:
    Node Object description: { path: "node_path", element: jQuery LI Element, data: data, binding: binding }.

    Retrieves a node object collection of the immediate children of the provided node element.

    • parent
    • Type:object
    • Specifies the node element.

    Code Sample

     
				var nodes = $(".selector").igTree("children", parentNode);

  • childrenByPath

    .igTree( "childrenByPath", path:string );
    Return Type:
    array
    Return Type Description:
    Node Object description: { path: "node_path", element: jQuery LI Element, data: data, binding: binding }.

    Retrieves a node object collection of the immediate children of the node with the provided path.

    • path
    • Type:string
    • Specifies the path of the node the children of which are to be retrieved.

    Code Sample

     
				// Retrieves child nodes of the 1st child of the 2nd node at root level
				var nodes = $(".selector").igTree("childrenByPath", "1_0");

  • clearSelection

    .igTree( "clearSelection" );

    Deselects all the selected nodes.

    Code Sample

     
				$(".selector").igTree("clearSelection");

  • collapse

    .igTree( "collapse", node:jquery, [event:object] );

    Collapses the specified node.

    • node
    • Type:jquery
    • Specifies the node element to collapse.
    • event
    • Type:object
    • Optional
    • The original browser event that triggered the collapse.

    Code Sample

     
				$(".selector").igTree("collapse", targetNode);

  • dataBind

    .igTree( "dataBind" );

    Performs databinding on the igTree.

    Code Sample

     
				$(".selector").igTree("dataBind");

  • deselect

    .igTree( "deselect", node:object );

    Deselects the specified node.

    • node
    • Type:object
    • Specifies the node element to be deselected.

    Code Sample

     
				$(".selector").igTree("deselect", targetNode);

  • destroy

    .igTree( "destroy" );

    Destructor for the igTree widget.

    Code Sample

     
				$(".selector").igTree("destroy");

  • expand

    .igTree( "expand", node:jquery, [event:object] );

    Expands the specified node.

    • node
    • Type:jquery
    • Specifies the node element to expand.
    • event
    • Type:object
    • Optional
    • The original browser event that triggered the expand.

    Code Sample

     
				$(".selector").igTree("expand", targetNode);

  • expandToNode

    .igTree( "expandToNode", node:object, [toSelect:bool] );

    Expands the tree down to the specified node and selects the node if specified.

    • node
    • Type:object
    • Specifies the node element down to which the tree would be expanded.
    • toSelect
    • Type:bool
    • Optional
    • Specifies the whether to select the node after expanding to it.

    Code Sample

     
				$(".selector").igTree("expandToNode", targetNode);

  • findImmediateNodesByText

    .igTree( "findImmediateNodesByText", text:string, [parent:object] );
    Return Type:
    array
    Return Type Description:
    Node Object description: { path: "node_path", element: jQuery LI Element, data: data, binding: binding }.

    Retrieves all node objects for the immediate children of the specified parent with the specified text (case sensitive).

    • text
    • Type:string
    • The text to search for.
    • parent
    • Type:object
    • Optional
    • The node element the children of which would be searched.

    Code Sample

     
				var nodes = $(".selector").igTree("findImmediateNodesByText", "ice cream", targetNode);

  • findNodesByText

    .igTree( "findNodesByText", text:string, [parent:object] );
    Return Type:
    array
    Return Type Description:
    Node Object description: { path: "node_path", element: jQuery LI Element, data: data, binding: binding }.

    Retrieves all node objects with the specified text (case sensitive).

    • text
    • Type:string
    • The text to search for.
    • parent
    • Type:object
    • Optional
    • The node element to start the search from. If not specified then search would start from the root of the tree.

    Code Sample

     
				var nodes = $(".selector").igTree("findNodesByText", "ice cream", targetNode);

  • isChecked

    .igTree( "isChecked", node:object );
    Return Type:
    bool
    Return Type Description:
    True if the node is checked, false otherwise.

    Returns true if the provided node element has its checkbox checkstate checked and false otherwise.

    • node
    • Type:object
    • Specifies the node element.

    Code Sample

     
				var isChecked = $(".selector").igTree("isChecked", targetNode);

  • isExpanded

    .igTree( "isExpanded", node:object );
    Return Type:
    bool
    Return Type Description:
    True if the node is selected, false otherwise.

    Returns true if the provided node element is expanded and false otherwise.

    • node
    • Type:object
    • Specifies the node element.

    Code Sample

     
				var isExpanded = $(".selector").igTree("isExpanded", targetNode);

  • isSelected

    .igTree( "isSelected", node:object );
    Return Type:
    bool
    Return Type Description:
    True if the node is selected, false otherwise.

    Returns true if the provided node element is selected and false otherwise.

    • node
    • Type:object
    • Specifies the node element.

    Code Sample

     
				var isSelected = $(".selector").igTree("isSelected", targetNode);

  • nodeByIndex

    .igTree( "nodeByIndex", index:number, [parent:object] );
    Return Type:
    object
    Return Type Description:
    The node element at the specified index.

    Retrieves the n-th jQuery node element child of the specified parent.

    • index
    • Type:number
    • Specifies the index the node at which to be retrieved.
    • parent
    • Type:object
    • Optional
    • The parent node element to start the search from.

    Code Sample

     
				var node = $(".selector").igTree("nodeByIndex", 10);

  • nodeByPath

    .igTree( "nodeByPath", nodePath:string );
    Return Type:
    object
    Return Type Description:
    Returns the jQuery selected node element with the specified path. The length property would be 0 if node isn't found.

    Retrieves the jQuery element of the node with the specified path.

    • nodePath
    • Type:string
    • Specifies the path to the required node.

    Code Sample

     
				// Retrieves the 1st child of the 2nd node at root level
				var nodes = $(".selector").igTree("nodeByPath", "1_0");

  • nodeDataFor

    .igTree( "nodeDataFor", path:string );
    Return Type:
    object
    Return Type Description:
    The JSON object holding the node data.

    Returns the data for the node with specified path.

    • path
    • Type:string
    • Specifies the node path for which the data is returned.

    Code Sample

     
				// Retrieves the data of the 1st child of the 2nd node at root level
				var nodes = $(".selector").igTree("nodeDataFor", "1_0");

  • nodeFromElement

    .igTree( "nodeFromElement", element:jquery );
    Return Type:
    object
    Return Type Description:
    Node Object description: { path: "node_path", element: jQuery LI Element, data: data, binding: binding }.

    Retrieves a node object for the specified node element.

    • element
    • Type:jquery
    • Specifies the node jQuery element.

    Code Sample

     
				var nodes = $(".selector").igTree("nodeFromElement", element);

  • nodesByValue

    .igTree( "nodesByValue", value:string );
    Return Type:
    object
    Return Type Description:
    Returns the jQuery object of the node element with the specified value. The length property would be 0 if node isn't found.

    Retrieves the jQuery element of the node with the specified value.

    • value
    • Type:string
    • Specifies the value of the required node.

    Code Sample

     
				var nodes = $(".selector").igTree("nodesByValue", "NY");

  • parentNode

    .igTree( "parentNode", node:object );
    Return Type:
    object
    Return Type Description:
    Returns the parent node element, null if the node provided as parameter is a root level node.

    Retrieves the parent node element of the specified node element.

    • node
    • Type:object
    • Specifies the jQuery selected node element to collapse.

    Code Sample

     
				var parentNode = $(".selector").igTree("parentNode", targetNode);

  • partiallyCheckedNodes

    .igTree( "partiallyCheckedNodes" );
    Return Type:
    array
    Return Type Description:
    Returns an array of node objects of all the partially checked nodes.

    Retrieves all the node objects for the nodes that have their checkboxes partially checked.

    Code Sample

     
				var nodes = $(".selector").igTree("partiallyCheckedNodes");

  • partiallyCheckNode

    .igTree( "partiallyCheckNode", nodeObj:object, cascadeDir:object );

    Applies a partially checked state to a node.

    • nodeObj
    • Type:object
    • Specifies the node element to apply the state to.
    • cascadeDir
    • Type:object

    Code Sample

     
				$(".selector").igTree("partiallyCheckNode", targetNode);

  • removeAt

    .igTree( "removeAt", path:string );

    Removes the node with with the specified path and all of its children.

    • path
    • Type:string
    • Specifies the path of the node to be removed.

    Code Sample

     
				$(".selector").igTree("removeAt", "0_1");

  • removeNodesByValue

    .igTree( "removeNodesByValue", value:string );

    Removing all the nodes with the specified value.

    • value
    • Type:string
    • Specifies the value of the nodes to be removed.

    Code Sample

     
				$(".selector").igTree("removeNodesByValue", "Old Node");

  • select

    .igTree( "select", node:object, [event:object] );

    Selects a node.

    • node
    • Type:object
    • Specifies the node element to be selected.
    • event
    • Type:object
    • Optional
    • Indicates the browser event which triggered this action, if this is not an API call.

    Code Sample

     
				$(".selector").igTree("select", targetNode);

  • selectedNode

    .igTree( "selectedNode" );
    Return Type:
    object
    Return Type Description:
    Node Object description: { path: "node_path", element: jQuery LI Element, data: data, binding: binding }.

    Retrieves the node object for the selected node.

    Code Sample

     
				var node = $(".selector").igTree("selectedNode");

  • toggle

    .igTree( "toggle", node:object, [event:object] );

    Toggles the collapse/expand state for the specified node.

    • node
    • Type:object
    • Specifies the node element the checkbox of which would be toggled.
    • event
    • Type:object
    • Optional
    • Indicates the browser event which triggered this action, if this is not an API call.

    Code Sample

     
				$(".selector").igTree("toggle", targetNode);

  • toggleCheckstate

    .igTree( "toggleCheckstate", node:object, [event:object] );

    Toggles the checkstate of a node if checkboxMode is not set to off, otherwise does nothing.

    • node
    • Type:object
    • Specifies the node element the checkbox of which would be toggled.
    • event
    • Type:object
    • Optional
    • Indicates the browser event which triggered this action, if this is not an API call.

    Code Sample

     
				$(".selector").igTree("toggleCheckstate", targetNode);

  • transactionLog

    .igTree( "transactionLog" );
    Return Type:
    array
    Return Type Description:
    The transaction log stack.

    Returns the transaction log stack.

    Code Sample

     
				var log = $(".selector").igTree("transactionLog");

  • uncheckedNodes

    .igTree( "uncheckedNodes" );
    Return Type:
    array
    Return Type Description:
    Returns an array of node objects for all the unchecked nodes.

    Retrieves all the node objects for the nodes that have their checkboxes unchecked.

    Code Sample

     
				var nodes = $(".selector").igTree("uncheckedNodes");

  • uncheckNode

    .igTree( "uncheckNode", nodeObj:object, cascadeDir:object );

    Applies an unchecked state to a node.

    • nodeObj
    • Type:object
    • Specifies the node element to apply the state to.
    • cascadeDir
    • Type:object

    Code Sample

     
				$(".selector").igTree("uncheckNode", targetNode);

  • ui-state-default ui-corner-all ui-igcheckbox-normal

    Classes applied to the checkbox container.

  • ui-icon ui-icon-check ui-igcheckbox-normal-off

    Classes defining the unchecked state of the checkbox.

  • ui-icon ui-icon-check ui-igcheckbox-normal-on

    Classes defining the checked state of the checkbox.

  • ui-icon ui-icon-check ui-state-disabled ui-igcheckbox-normal-on

    Classes defining the partially checked state of the checkbox.

  • ui-icon ui-icon-triangle-1-s

    Classes defining the css sprite icon for collapsed node.

  • ui-icon ui-icon-plus

    Classes defining the copy drop indicator icon.

  • ui-widget ui-igtree-dropindicator ui-state-highlight ui-corner-all

    Classes applied to the drop indicator container.

  • ui-icon ui-icon-triangle-1-e

    Classes defining the css sprite icon for expanded node.

  • ui-state-default ui-igtree-insertline

    Classes applied to the insert line container.

  • ui-widget ui-igtree-dropindicator ui-state-error ui-corner-all

    Classes applied to the invalid drop indicator container.

  • ui-icon ui-icon-cancel

    Classes defining the invalid move to drop indicator icon.

  • ui-icon ui-icon-arrowthick-1-e

    Classes defining the move to drop indicator icon.

  • ui-state-focus

    Class defining the focus state style of the node.

  • ui-corner-all

    Classes applied to the node anchor.

  • ui-igtree-expander

    Class applied to the expand/collapse node container.

  • ui-state-highlight

    Class defining the highlight state style of the node.

  • ui-state-hover

    Class defining the hover state style of the node.

  • ui-igtree-node-nochildren

    Class applied nodes that have no children and thus no expander image.

  • ui-state-default

    Class defining the default state style of the node.

  • ui-state-active

    Class defining the selected state style of the node.

  • ui-igtree-parentnode

    Class applied to nodes that have children.

  • ui-widget ui-igtree

    Classes applied to the top container element.

  • ui-igtree-collection

    Class applied to the node collection element.

  • ui-igtree-node

    Class applied to every node element in the tree.

  • ui-igtree-root ui-widget-content

    Class applied to the root ul element in the tree.

  • ui-igtree-noderoot

    Class applied to every node element that is a root node in the tree.

Copyright © 1996 - 2024 Infragistics, Inc. All rights reserved.