Version

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.

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 -

In HTML:

$("#tree").igTree({
    checkboxMode: 'triState',
    singleBranchExpand: true,
    dataSource: data,
    dataSourceType: 'xml',
    initialExpandDepth: 0,
    pathSeparator: '.',
    bindings: {
        textKey: 'Text',
        textXPath: '@Text',
        valueKey: 'Value',
        valueXPath: '@Value',
        imageUrlKey: 'ImageUrl',
        imageUrlXPath: '@ImageUrl',
        childDataProperty: 'Folder',
        childDataXPath: 'Folder',
        searchFieldXPath: 'Folder'
    }
});

XML Data:

<?xml version="1.0" encoding="utf-8" ?>

<Folder Text="Computer" ImageUrl="../content/images/igTree/Common/computer.png" Value="Folder">

    <Folder Text="Music" ImageUrl="../content/images/igTree/Common/book.png" Value="Folder">

        <!-- data omitted for example -->

    </Folder>


<Folder Text="My Documents" ImageUrl="../content/images/igTree/Common/DocumentsFolder.png" Value="Folder">

    <Folder Text="2009" ImageUrl="../content/images/igTree/Common/DocumentsFolder.png" Value="Folder">

        <!-- data omitted for example -->

    </Folder>

    <Folder Text="2010" ImageUrl="../content/images/igTree/Common/DocumentsFolder.png" Value="Folder">

        <Folder Text="Month Report" ImageUrl="../content/images/igTree/Common/Documents.png" Value="File"></Folder>

        <Folder Text="Year Report" ImageUrl="../content/images/igTree/Common/Documents.png" Value="File"></Folder>

    </Folder>

</Folder>

<Folder Text="Pictures" ImageUrl="../content/images/igTree/Common/coins.png" Value="Folder">

    <!-- data omitted for example -->

</Folder>

<Folder Text="Network" ImageUrl="../content/images/igTree/Common/door.png" Value="Folder">

    <Folder Text="Archive" ImageUrl="../content/images/igTree/Common/door_in.png" Value="Folder"></Folder>

    <Folder Text="BackUp" ImageUrl="../content/images/igTree/Common/door_in.png" Value="Folder"></Folder>

    <Folder Text="FTP" ImageUrl="../content/images/igTree/Common/door_in.png" Value="Folder"></Folder>

</Folder>

<Folder Text="Deleted" ImageUrl="../content/images/igTree/Common/bin_empty.png" Value="Folder"></Folder>

Note: The igTree only supports binding to XML on the client. In ASP.NET MVC, the XML should be translated into an IQueryable<T>. The tree can then bind to the field that represents the ImageUrl and the imageUrlXPath is not required.

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

Related Topics

Following are some other topics you may find useful.

View on GitHub