New to Kendo UI for Vue? Start a free 30-day trial

TreeMap

Directive

kendo-treemap

Props

data-source Object | Array

The data source of the TreeMap for rendering the titles and tiles (dataSource in Kendo UI for jQuery).

You can set data-source to:

  • A JavaScript object which represents any valid data source configuration.
  • A JavaScript array.
  • An existing kendo.data.HierarchicalDataSource instance.

If the dataSource option is set to a JavaScript object or an array, the TreeMap will initialize a new kendo.data.HierarchicalDataSource instance by using that value as a data source configuration. If the dataSource option is an existing kendo.data.HierarchicalDataSource instance, the TreeMap will use that instance and will not initialize a new one.

auto-bind Boolean

If auto-bind is set to false, the TreeMap will not bind to the data source during initialization (autoBind in Kendo UI for jQuery). In such scenarios data binding will occur when the change event of the dataSource instance is fired. By default, auto-bind is set to true and the TreeMap will bind to the data source that is specified in the configuration.

type String

The layout type for the TreeMap (type in Kendo UI for jQuery).

The supported values are:

  • squarified
  • horizontal
  • vertical

theme String

The theme of the TreeMap (theme in Kendo UI for jQuery).

value-field String

The data item field which contains the tile value (valueField in Kendo UI for jQuery).

color-field String

The data item field which contains the tile color (colorField in Kendo UI for jQuery).

text-field String

The data item field which contains the tile title (textField in Kendo UI for jQuery)

template String | Function

The template for rendering the tile content of the TreeMap (template in Kendo UI for jQuery).

The template supports the following fields:

  • dataItem—The original data item for constructing the point.
  • text—The original text of the tile.

colors Array

The default colors for the tiles of the TreeMap (colors in Kendo UI for jQuery). Accepts an array of specific colors or an array of color ranges.

Events

itemcreated: Function

Fired when a tile has been created (itemCreated in Kendo UI for jQuery.

databound: Function

Fired when the widget is bound to data from its dataSource (dataBound in Kendo UI for jQuery.

Methods

For more details about the methods available in the component's API please check its Kendo UI for jQuery API documentation.

kendoWidget

returns

Returns the Kendo UI TreeMap instance.