ActiveItem: PP.Ui.TreeItem
The ActiveItem property determines active element of chart data model.
Use JSON or the setActiveItem method to set the property value, and the getActiveItem method to get the property value.
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: