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).
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
colorsconfiguration option, the TreeMap uses one color or range of colors for all siblingleafitems. 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
colorFieldis 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");