Kendo UI for jQuery TreeMap Overview

The TreeMap displays hierarchical data in a traditional tree structure.

TreeMaps also support different rendering types such us Squarified, Vertical, and Horizontal (slice and dice algorithm).

Kendo UI for jQuery Kendoka image

The TreeMap is part of Kendo UI for jQuery, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Basic Configuration

The following example demonstrates how to define a TreeMap by using a selector within $(document).ready().

$(document).ready(function() {
    $("#treeMap").kendoTreeMap();
});

The TreeMap applies various colors to its leaf items—the items that have no children. To set the colors, the TreeMap uses the following algorithms:

  • If the colors, or the color ranges, are defined with the colors configuration option, the TreeMap uses one color or range of colors for all sibling leaf items. The next color or range of colors are used for the next collection of sibling leaf items. When all colors or ranges have been used, the TreeMap starts over from the first one.
  • If the colors are defined in the dataSource and a colorField is set, the TreeMap applies the colors from the data.

You can also combine the two methods—in this case, the colors from the dataSource take precedence and the TreeMap uses the colors from the colors setting only for items which have no defined color in the data.

To set different colors to sibling leaf items without having the colors in the data, use the itemCreated or the dataBound event of the TreeMap.

Functionality and Features

The TreeMap provides options for binding it to data.

Referencing Existing Instances

You can refer an existing TreeMap instance by using jQuery.data(). Once a reference is established, use the TreeMap API to control its behavior.

var treeMap = $("#treeMap").data("kendoTreeMap");

See Also

In this article