User Interaction
28 Jun 20178 minutes to read
Users can interact with the TreeMap control by selecting either the leaf nodes or the groups.
Selection
Selection support enables you to highlight the items on which the mouse tapping has occurred. You can select the following contents of the TreeMap control:
- Leaf Nodes
- Group
Single Selection
To enable the selection of the leaf nodes, the e-highlightOnSelection
property in ej-treemap
is set as true. When the selection occurs, the item is highlighted with a bounding rectangle around the selected leaf node.
The border can be customized with the e-highlightBorderBrush
and e-highlightBorderThickness
properties.
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" ng-app="TreemapApp">
<head>
<title>Essential Studio for AngularJS: TreeMap</title>
<!--CSS and Script file References -->
</head>
<body ng-controller="TreemapCtrl">
<div id="mapContainer" style="align-content:center;width: 800px; height: 400px;">
<ej-treemap e-highlightonselection="true" e-highlightborderbrush="#3e3e3e"
e-highlightborderthickness="1">
</ej-treemap>
</div>
<script>
angular.module('TreemapApp', ['ejangular'])
.controller('TreemapCtrl', function ($scope) {
});
</script>
</body>
</html>

Group Selection
To enable the selection of leaf nodes, the e-highlightGroupOnSelection
property in ej-treemap
is set as true. When the selection occurs, bounding rectangle highlights the selected group.
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" ng-app="TreemapApp">
<head>
<title>Essential Studio for AngularJS: TreeMap</title>
<!--CSS and Script file References -->
</head>
<body ng-controller="TreemapCtrl">
<div id="mapContainer" style="align-content:center;width: 800px; height: 400px;">
<ej-treemap e-highlightgrouponselection="true" e-highlightborderbrush="#3e3e3e"
e-highlightborderthickness="1">
</ej-treemap>
</div>
<script>
angular.module('TreemapApp', ['ejangular'])
.controller('TreemapCtrl', function ($scope) {
});
</script>
</body>
</html>

MultiSelection
This feature enables you to select multiple leaf nodes or groups simultaneously. To enable this feature for leaf nodes, set e-selectionMode
as “multiple” and for groups, set e-groupSelectionMode
as “multiple”
To select multiple items simultaneously, the mouse tap should be done along with a continuous press of the “Control” key.
Selection (Multiple)
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" ng-app="TreemapApp">
<head>
<title>Essential Studio for AngularJS: TreeMap</title>
<!--CSS and Script file References -->
</head>
<body ng-controller="TreemapCtrl">
<div id="mapContainer" style="align-content:center;width: 800px; height: 400px;">
<ej-treemap e-highlightonselection="true" e-selectionmode="multiple">
</ej-treemap>
</div>
<script>
angular.module('TreemapApp', ['ejangular'])
.controller('TreemapCtrl', function ($scope) {
});
</script>
</body>
</html>

Group Selection (Multiple)
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" ng-app="TreemapApp">
<head>
<title>Essential Studio for AngularJS: TreeMap</title>
<!--CSS and Script file References -->
</head>
<body ng-controller="TreemapCtrl">
<div id="mapContainer" style="align-content:center;width: 800px; height: 400px;">
<ej-treemap e-highlightgrouponselection="true" e-groupselectionmode="multiple">
</ej-treemap>
</div>
<script>
angular.module('TreemapApp', ['ejangular'])
.controller('TreemapCtrl', function ($scope) {
});
</script>
</body>
</html>

Drag On Selection
This feature enables you to highlight/select the leaf nodes or groups by the dragging the mouse pointer over the TreeMap items.
Dragging On Selection
To enable this feature, set the e-draggingOnSelection
to “true”.
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" ng-app="TreemapApp">
<head>
<title>Essential Studio for AngularJS: TreeMap</title>
<!--CSS and Script file References -->
</head>
<body ng-controller="TreemapCtrl">
<div id="mapContainer" style="align-content:center;width: 800px; height: 400px;">
<ej-treemap e-draggingonselection="true">
</ej-treemap>
</div>
<script>
angular.module('TreemapApp', ['ejangular'])
.controller('TreemapCtrl', function ($scope) {
});
</script>
</body>
</html>

Dragging Group On Selection
To enable this feature, set the e-draggingGroupOnSelection
to “true”.
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" ng-app="TreemapApp">
<head>
<title>Essential Studio for AngularJS: TreeMap</title>
<!--CSS and Script file References -->
</head>
<body ng-controller="TreemapCtrl">
<div id="mapContainer" style="align-content:center;width: 800px; height: 400px;">
<ej-treemap e-dragginggrouponselection="true">
</ej-treemap>
</div>
<script>
angular.module('TreemapApp', ['ejangular'])
.controller('TreemapCtrl', function ($scope) {
});
</script>
</body>
</html>
