Configure Checkboxes and Selection with igTree

Topic Overview

Purpose

This topic discusses some common ways to configure selections in the igTree™ control.

In this topic

This topic contains the following sections:

• igTree Configuration Overview
  • Control configuration chart
• Configuring checkboxes
  • Checkboxes configuration overview
  • Checkboxes property settings
  • Example: configure tri-state checkboxes
  • Example: configure bi-state checkboxes
  • Configuring checkboxes’ property reference
• Getting checked nodes
  • Checked nodes overview
  • Getting checked nodes property settings
  • Get all checked nodes
• Handling selection and checkbox events
  • Selection and checkbox events overview
  • Selection and checkbox events property settings
  • Example: configuring a selection event during instantiation
  • Example: configure selection and checkbox events with live and bind
  • Cancelling selection
• Related Topics

Required background

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

igTree Configuration Overview

Control configuration chart

The table below lists the configurable behaviors of the igTree control.

Configuring checkboxes

Checkboxes configuration overview

The igTree control supports bi-state and tri-state checkboxes. When tri-state checkboxes are enabled, the parent nodes reflect whether their children are all selected, all unselected, or partially selected.

Checkboxes property settings

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

Example: configuring tri-state checkboxes

The image below demonstrates tri-state checkboxes as a result of the following settings:

Property	Setting	Preview
checkboxMode	triState

Example: configuring bi-state checkboxes

The image below demonstrates tri-state checkboxes as a result of the following settings:

Property	Setting	Preview
checkboxMode	biState

Configuring checkoxes’ property reference

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

• igTree Options

Getting checked nodes

Checked nodes overview

The igTree has an API to get all checked nodes, all unchecked nodes, and all partially selected nodes.

Getting checked nodes property settings

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

Getting all checked nodes

The code below demonstrates how to get all checked nodes as a result of the following:

In JavaScript:

var nodes = $("#tree").igTree("checkedNodes");

Handling selection and checkbox events

Selection and checkbox event overview

By handling the selection and checkbox events, you can perform custom logic in response to these operations. These events can be configured when a widget is initialized in jQuery or on the client using the bind or live jQuery functions.

Selection and checkbox events property settings

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

Example: configuring a selection event during instantiation

The code below demonstrates configuring a selection during instantiation of the igTree using the following:

In HTML:

$("#tree").igTree({
    dataSource: data,
    checkboxMode: "triState",
    bindings: {
        textKey: 'Text',
        childDataProperty: 'Nodes'
    },
    selectionChanged: function (evt, ui) {

    },
    nodeCheckstateChanged: function (evt, ui) {

    }
});

Example: configuring selection and checkbox events with live and bind

The code below demonstrates handling selection and checkbox events using jQuery bind and live functions. The type of the events are lower case strings constructed by appending igTree to the beginning of the event name.

In HTML:

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

});

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

});

Canceling selection

The code below demonstrates how to cancel the selection operation by returning false from the event handler function. The same approach can be used for an –ing function for the igTree. In this code example, cancel represents the Boolean result of application logic that determines whether selection should occur or not.

In HTML:

$("#tree").live("igtreenodecheckstatechanging", function (evt, ui) {
    if (cancel == true)
        return false;         
});

Related Topics

Following are some other topics you may find useful.

• igTree API documentation
• igTree MVC API documentation