Configure Nodes in igTree

Topic Overview

Purpose

This topic discusses how to configure nodes in the igTree™ control.

In this topic

This topic contains the following sections:

• igTree Configuration Overview
  • Control configuration chart
• Expanding and collapsing nodes programmatically
  • Expand and collapse details
  • Expand and collapse configuration settings
  • Example: expand a node that is in view
  • Example: collapse a node
  • Example: expand all parent nodes of a child node
  • Expand and collapse setting reference
• Handling expand and collapse events
  • Expand and collapse event details
  • Expand and collapse event configuration settings
  • Example: configure the expansion events during instantiation
  • Example: configure the collapse events using bind and live
• Related Topics

Required background

The table below lists the required background you need for fully understanding the information in this topic.

You need to first read the Getting Started with igTree topic.

External Resources

You need to first read the following articles:

• jQuery bind() API

• jQuery live() API

igTree Configuration Overview

Control configuration chart

The table below lists the configurable screen elements and behaviors of the igTree control.

Expanding and collapsing nodes programmatically

Expand and collapse details

There are times in your application when you may need to programmatically expand or collapse nodes. For instance when using a tree for navigation, there may be times when a user goes directly to a piece of content and the tree navigation should reflect where user has navigated. The following examples demonstrate how to programmatically work with the igTree control.

Expand and collapse configuration settings

The table below maps the desired behaviors to property settings. The properties are accessed through the igTree control’s methods.

Note: Each method accepts an instance of an igTree node to expand or collapse.

Example: expand a node that is in view

The code below demonstrates how to expand a node that is in the currently expanded parent node .

In JavaScript:

$("#tree").igTree("expand", node);

Example: collapse a node

The code below demonstrates how to collapse a node.

In JavaScript:

$("#tree").igTree("collapse", node);

Example: expand all parent nodes of a child node

When you may know that a node needs to be visible but it is nested within child levels of the igTree control. The code below demonstrates how to expand all parent nodes of the target node to bring it into view using the expandToNode view.

In JavaScript:

$("#tree").igTree("expandToNode", node);

Expand and collapse settings reference

For detailed information about these methods, refer to their listing in the property reference section:

• igTree Options

Handling expand and collapse events

Expand and collapse event details

When you want to perform custom logic after a node is expanded or collapsed, you can use the events. Events that end in –ing occur prior to a node being expanded or collapsed and events ending in –ed occur after a node is expanded or collapsed.

Expand and collapse event configuration settings

The table below maps the desired behaviors to property settings. The properties are accessed through the igTree control methods.

Example: configure the expansion events during instantiation

The igTree control events can be configured when the control is instantiating. The events are configured by setting a handler function that accepts the parameters for the event and UI arguments. This type of configuration is only available when configuring the control on the client. The code below demonstrates handling the expansion events as a result of the following settings:

In HTML:

$(function () {
    $("#tree").igTree({
        nodeExpanding: function (evt, ui) {

        },
        nodeExpanded: function (evt, ui) {

        }
    });
});

Example: configure the collapse events using bind and live

There are times when an event handler needs to be attached to the igTree after the tree is instantiated. Post-initialization event binding is the primary way events are configured when the igTree control is instantiated using the Ignite UI for MVC helper. When using attaching event handlers after the control is instantiated, the event type is needed. Event types are determined by combining the widget name with the event name. The code below demonstrates how to configure events using the jQuery bind and live method:

In JavaScript:

$("#tree").bind("igtreenodecollapsing", function (evt, ui) {

});

$("#tree").live("igtreenodecollapsed", function (evt, ui) {

});

Related Topics

Following are some other topics you may find useful.

• Configuring Node Images with igTree