TreeModel.ActiveItem

Syntax

ActiveItem: PP.Ui.TreeItem

Description

The ActiveItem property determines active element of chart data model.

Comments

Use JSON or the setActiveItem method to set the property value, and the getActiveItem method to get the property value.

Example

To execute the example the HTML page must contain the BubbleTree   component named «bubbleTree» (see «The BubbleTree component creation example» ). Get data model, process the ActiveItemChanged event, set a new active element, refresh elements' indexes, and change color of the root element:

// Get data model
var model = bubbleTree.getModel()
// Process the ActiveItemChanged event
model.ActiveItemChanged.add(function (sender, args, timeout) {
    console.log("The ActiveItemChanged event is initiated")
});
// Get the element by ID
var item = model.getItem("EU");
// Set a new active element
model.setActiveItem(item);
// Refresh elements' indexes
model.buildIndex();
// Get a new chart root element
var rootItem = model.getRootItem();
// Get paintbrush to fill an element
var brush = rootItem.getColor();
// Change the fill color
brush.setColor("#FF0000");
// Set a new paintbrush
rootItem.setColor(brush);
// Refresh colors
rootItem.updateColors();
// Set a new root component
model.setRootItem(rootItem);
// Refresh a chart
bubbleTree.refresh();

As the result new active element is set and color of the root element is changed:

The browser console shows a message that the processed event was invoked:

ActiveItemChanged event initialized

Replace the currently active item with its parent:

// Make active parent element of the current active element
model.goToParent();
// Refresh chart
bubbleTree.refresh();

As the result, the active item is changed:

See also:

TreeModel