Document Tree
Document Properties
Last Modified
Added to KB
Public Access
Doc Type
  • ICM 7.10
  • ICM 11
  • ICM 12
Concept - Catalog Category Tree Component


This document describes the tree representation of categories. With this hierarchical structure the shop manager can assign categories to different artifacts in the back office in one step.

The Catalog Category Tree Component is implemented as an ISML module for easy reuse. The module is called "CategoryTree" and is located in the sld_enterprise_app cartridge.


The Catalog Category Tree Component is based on the jQuery Dynatree Plugin.





The ID of the tree.


Defines if checkboxes or radio buttons are used. Possible values are single/multiple/multiplehier. When single is chosen, a tree with radio buttons is displayed. Values multiple and multiplehier will render a tree with checkboxes. When multiplehier is chosen, clicking the checkbox besides category will also select the category's child categories.


Number of levels that are not expandable, default 1.


Title of the tree, e.g. "Standard Catalog".


Defines if selected sub-categories of a category are displayed as disabled.


Defines if sub-categories of selected categories will also be selected.


An iterator with Catalog Categories to be displayed.


An iterator that contains the UUIDs of categories already assigned to the object.


An iterator of UUIDs representing categories that should be displayed disabled.


The pipeline (PipelineName-PipelineNodeName) which views the category details page.


The name of the parameter that holds the category UUID.

parametername [1-5]

The name of the parameter which are added to the category URL.

parametervalue [1-5]

The value of the parameter which are added to the category URL.


An iterator of category UUIDs that are marked as lazy-loaded. If a category is marked as lazy-loaded, its child categories are not loaded when the tree is initialized.

Using the jQuery Dynatree Plugin

The Catalog Category Tree Component is based on the jQuery Dynatree Plugin. Since the component is implemented as an ISML module, the integration of the plug-in consists of including jQuery and Dynatree libraries in CategoryTree.isml, adding a <div> element that encloses the tree and initializing the dynatree module when the page is loading. By initialization tree options are passed including jQuery and Dynatree libraries as plain JavaScript objects in curly braces. The tree options represent properties of the tree like the select mode and different event handlers. The tree is defined as an HTML list. The elements of the list have ID attributes with the UUID of single category and contain a link with display name of the category. The Dynatree plug-in transforms this HTML into a more complicated structure with checkboxes, expand button etc.

For more information consult the documentation.


It is possible to make the category node a link. When the parameter disabledcategories is set, the li tag that represents the category node contains a tag that points to a pipeline defined in disabledcategories.

Lazy Loading

When a category has a large number of sub-categories, the loading of this category takes time and results in a large HTML file. To reduce the time for loading the page with the tree it is possible to mark the category as lazy-loaded. This is done by adding marker class lazy to the li element representing the category. The user of the CategoryTree module should pass an iterator of categories. See Configurations.
When a category is marked as lazy-loaded, the Dynatree will not create its children nodes. The children categories will be created only when the user expands the category. By expanding an Ajax request to dedicated pipeline is made. Details about this Ajax request are given in tree options (see Use of jQuery Dynatree Plugin) by defining onLazyRead.

Submitting Data

The UUIDs of all selected categories are submitted by default. If the parameter autoselectdisablesubcategories is set to true, only UUIDs of parent categories are submitted. This behavior is managed by jQuery delegate set to form element (see CategoryTree.isml).

The information provided in the Knowledge Base may not be applicable to all systems and situations. Intershop Communications will not be liable to any party for any direct or indirect damages resulting from the use of the Customer Support section of the Intershop Corporate Web site, including, without limitation, any lost profits, business interruption, loss of programs or other data on your information handling system.
The Intershop Knowledge Portal uses only technically necessary cookies. We do not track visitors or have visitors tracked by 3rd parties. Please find further information on privacy in the Intershop Privacy Policy and Legal Notice.
Knowledge Base
Product Releases
Log on to continue
This Knowledge Base document is reserved for registered customers.
Log on with your Intershop Entra ID to continue.
Write an email to if you experience login issues,
or if you want to register as customer.