We're sorry but this site requires JavaScript.

Version

Is this content useful?

Thank you for your feedback!

Thank you for your feedback! You have rated this topic in the last 30 days.

Configure Node Images in igTree

Topic Overview

Purpose

This topic discusses how to configure node images in the IgTree™ control.

In this topic

This topic contains the following sections:

Required background

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

IgTree Configuration Overview

igTree configuration chart

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

Configurable screen elements and behavior	Configuration details	Configuration options
Configure node images	Images can be configured through binding, CSS, or URL to show next to each node in the `igTree` control.	parentNodeImageUrl parentNodeImageClass leafNodeImageUrl leafNodeImageClass imageUrlKey imageUrlXPath

Configuring node images

Node images overview

Node images can be configured on the igTree control to display more information about the node. They can be configured through binding for each item or an image can be displayed for both parent nodes and child nodes by setting a CSS class or image URL to the igTree control options.

Node image settings

The table below maps the desired configurations to option settings. The options are accessed through the igTree options.

In order to…	Use this option:	And set it to…
Configure parent and leaf node images using a URL	parentNodeImageUrl leafNodeImageUrl	string URL string URL
Configure parent and leaf node images using CSS	parentNodeImageClass leafNodeImageClass	string CSS class name string CSS class name
Configure node images for individual data items through binding	imageUrlKey (for XML) imageUrlXPath	string data member with URL to images string XPath to the image URL when bound to XML

Example: configuring parent and leaf node images configured using a URL

In order to configure the images for parent and leaf nodes, you can provide a URL to a location for existing images. The image below demonstrates configuring node images as a result of the following settings:

Option	Setting	Preview
parentNodeImageUrl	"../../Content/images/DocumentsFolder.png"
leafNodeImageUrl	"../../Content/images/Documents.png"

Example: configuring parent and leaf node images configured using CSS

If you are using image sprites and configuring images through CSS, you can specify the CSS class that contains the tree node images. The code below demonstrates configuring node images as a result of the following settings:

Option	Setting
parentNodeImageClass	"sprite-DocumentsFolder"
leafNodeImageClass	"sprite-Documents"

Note: You must define your CSS classes as “display:inline-block” in order to ensure proper rendering of the tree images.

In HTML:

<style type="text/css">
    .sprite-DocumentsFolder
    {
        background: url("../../Content/images/leafimages.png") no-repeat top left;
        display: inline-block;
        background-position: 0 -52px;
        width: 16px;
        height: 16px;
    }        
    .sprite-Documents
    {
        background: url("../../Content/images/leafimages.png") no-repeat top left;
        display: inline-block;
        background-position: 0 -26px;
        width: 16px;        
        height: 16px;
    }

</style>

<script type="text/javascript">
    $(function () {
        $("#tree").igTree({
            dataSource: data,
            parentNodeImageClass: "sprite-DocumentsFolder",
            leafNodeImageClass: "sprite-Documents",
            bindings: {
                textKey: 'Text',
                childDataProperty: 'Nodes'
            },
        });
</script>

In ASPX:

<style type="text/css">
    .sprite-DocumentsFolder
    {
        background: url("../../Content/images/leafimages.png") no-repeat top left;
        display: inline-block;
        background-position: 0 -52px;
        width: 16px;
        height: 16px;
    }        
    .sprite-Documents
    {
        background: url("../../Content/images/leafimages.png") no-repeat top left;
        display: inline-block;
        background-position: 0 -26px;
        width: 16px;        
        height: 16px;
    }

</style>

<%= Html.
    Infragistics().
    Tree().
    ID("tree").
    DataSource(this.Model).
    ParentNodeImageClass("sprite-DocumentsFolder").
    LeafNodeImageClass("sprite-Documents"). 
    Bindings( bindings => {
        bindings.
        TextKey("Text").      
        ChildDataProperty("Nodes");
    }).
    DataBind().
    Render()       
%>

Example: configuring parent and leaf node images configured through binding

This example demonstrates binding to XML and includes the required setting for imageUrlXPath. This setting is not required when binding to JSON data. The example below demonstrates how to configure node images through bindings:

Option	Setting	Preview
imageUrlKey	ImageUrl
imageUrlXPath	@ImageUrl	-