[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Collapse]eXpressApp Framework
 [Expand]Getting Started
  [Expand]Application Solution Components
  [Expand]Business Model Design
  [Expand]Application Model
  [Expand]UI Construction
  [Expand]Controllers and Actions
  [Expand]Data Manipulation and Business Logic
  [Expand]Security System
  [Expand]System Module
  [Collapse]Extra Modules
   [Expand]Audit Trail Module
    Business Class Library Customization Module
    Chart Module
    Clone Object Module
   [Expand]Conditional Appearance Module
   [Expand]Dashboards Module
    File Attachments Module
    HTML Property Editor Module
    Localization Module
   [Expand]Notifications Module
    KPI Module
   [Expand]Maps Module
   [Expand]Pivot Chart Module
    Pivot Grid Module
   [Expand]Reports V2 Module
   [Expand]Office Module
   [Expand]Scheduler Module
    Script Recorder Module
   [Expand]State Machine Module
   [Collapse]TreeList Editors Module
     TreeList Editors Module Overview
     Display a Tree List using the ITreeNode Interface
     Display a Tree List using the HCategory Class
     Node Images in a Tree List
     Categorized List
   [Expand]Validation Module
    View Variants Module
   [Expand]Workflow Module
  [Expand]Debugging, Testing and Error Handling
  [Expand]Application Life Cycle
 [Expand]Design-Time Features
 [Expand]Task-Based Help
  Frequently Asked Questions (FAQ)
 [Expand]API Reference
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Node Images in a Tree List

This topic describes how to show SVG or raster images for a Tree List's entries in XAF Applications.

For this purpose, the TreeList Editors Module supplies the ASPxTreeListEditor and TreeListEditor. They are designed to display ITreeNode objects. TreeListEditor and ASPxTreeListEditor can also show images for the these objects. You can enable images for a Tree List's objects by implementing the ITreeNodeSvgImageProvider (for SVG images) or ITreeNodeImageProvider interface (for raster images) in a business class inherited from the ITreeNode interface.

The following image illustrates a TreeListEditor displaying nodes with images:

You can see an example in the Feature Center demo's List Editors | Tree | Node Images section. The Feature Center demo is installed in %PUBLIC%\Documents\DevExpress Demos 19.1\Components\eXpressApp Framework\FeatureCenter by default. The ASP.NET version of this demo is available online at http://demos.devexpress.com/XAF/FeatureCenter/.


Use either SVG or raster images for all items in one collection. When using SVG and raster images simultaneously, a Tree List editor can fail to show certain images. In this case, make sure image files for all entries have the same format, and check the application's Log File for an additional diagnostic message.

Expanded SVG Images

This section demonstrates implementing the ITreeNodeSvgImageProvider interface and using its GetSvgImage (see ITreeNodeSvgImageProvider.GetSvgImage) method to display SVG images for a Tree List's objects.

The following code snippet shows the Product business class implementing the ITreeNodeSvgImageProvider interface. If a Product object does not have nested products, then the GetSvgImage method returns the "BO_Product" image; otherwise, the "BO_Category" image is returned. The ImageLoader.GetImageInfo method retrieves these images from XAF's standard image library.

Expanded Raster Images

You can use the same approach for raster images, but implement the ITreeNodeImageProvider instead. Then replace the GetSvgImage method with the ITreeNodeImageProvider's ITreeNodeImageProvider.GetImage method as shown below.

Expanded See Also

Is this topic helpful?​​​​​​​