User Interaction

7 Dec 20176 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 highlight on selection property in 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 highlight border brush and highlight border thickness properties.

JAVASCRIPT

/// <reference path="../tsfiles/jquery.d.ts"></reference>
/// <reference path="../tsfiles/ej.web.all.d.ts"></reference>

module treeMapcomponent {

        $(function () {

           var treeMapSample = new ej.datavisualization.TreeMap($("#treeMap"), {
                // ...
                highlightOnSelection : true,
                highlightBorderBrush : "#3e3e3e",
                highlightBorderThickness : 1
                // ...                
            });
        });
}

Group Selection

To enable the selection of leaf nodes, the highlight group on selection property in treemap is set as true. When the selection occurs, bounding rectangle highlights the selected group. The border can be customized with the highlight group border brush and highlight group border thickness properties.

JAVASCRIPT

$(function () {

           var treeMapSample = new ej.datavisualization.TreeMap($("#treeMap"), {
                // ...
                highlightGroupOnSelection : true,
                highlightBorderBrush : "#3e3e3e",
                highlightBorderThickness : 1
                // ...                
            });
        });

MultiSelection

This feature enables you to select multiple leaf nodes or groups simultaneously. To enable this feature for leaf nodes, set selectionMode as “multiple” and for groups, set group selection mode as “multiple”
To select multiple items simultaneously, the mouse tap should be done along with a continuous press of the “Control” key.

Selection (Multiple)

JAVASCRIPT

$(function () {

           var treeMapSample = new ej.datavisualization.TreeMap($("#treeMap"), {
                // ...
                highlightOnSelection : true,
                selectionMode: "multiple",
                // ...                
            });
        });

Group Selection (Multiple)

JAVASCRIPT

$(function () {

           var treeMapSample = new ej.datavisualization.TreeMap($("#treeMap"), {
                // ...
                highlightGroupOnSelection : true,
                groupSelectionMode: "multiple",
                // ...                
            });
        });

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 draggingOnSelection to “true”.

JAVASCRIPT

$(function () {

           var treeMapSample = new ej.datavisualization.TreeMap($("#treeMap"), {
                // ...
                draggingOnSelection : true,
                // ...                
            });
        });

Dragging Group On Selection

To enable this feature, set the draggingGroupOnSelection to “true”.

JAVASCRIPT

$(function () {

           var treeMapSample = new ej.datavisualization.TreeMap($("#treeMap"), {
                // ...
                draggingGroupOnSelection : true,
                // ...                
            });
        });