User Interaction

7 Mar 20163 minutes to read

You can interact with the TreeMap control by selecting either the leaf nodes or the groups.

Selection

Selection support enables you to highlight the items where 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 leaf nodes, the HighlightOnSelection property in treemap is set as true. When selection occurs, the item is highlighted with a bounding rectangle around the selected leaf node.
The border can be customized with HighlightBorderBrush and HighlightBorderThickness properties.

  • JS
    • <ej:Treemap ID="treemap" runat="server" WeightValuePath = "Population" ColorValuePath = "Growth" HighlightOnSelection = "true" HighlightBorderBrush = "#3e3e3e" HighlightBorderThickness = "1">
        // ...
</ej:Treemap>

    Group Selection

    To enable the selection of leaf nodes, the HighlightGroupOnSelection property in treemap is set as true. When selection occurs, bounding rectangle highlights the selected group.

  • JS
    • <ej:Treemap ID="treemap" runat="server" WeightValuePath = "Population" ColorValuePath = "Growth" HighlightGroupOnSelection = "true" HighlightBorderBrush = "#3e3e3e" HighlightBorderThickness = "1">
        // ...
</ej:Treemap>

    MultiSelection

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

    Selection (Multiple)
  • JS
    • <ej:Treemap ID="treemap" runat="server" WeightValuePath = "Population" ColorValuePath = "Growth" ItemSelectionMode = "Multiple" HighlightOnSelection = "true" HighlightBorderBrush = "#3e3e3e" HighlightBorderThickness = "1">
        // ...
</ej:Treemap>

    Group Selection (Multiple)

  • JS
    • <ej:Treemap ID="treemap" runat="server" WeightValuePath = "Population" ColorValuePath = "Growth" GroupSelectionMode = "Multiple" HighlightGroupOnSelection = "true" HighlightBorderBrush = "#3e3e3e" HighlightBorderThickness = "1">
        // ...
</ej:Treemap>

    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, you have to set DraggingOnSelection as “true”.

  • JS
    • <ej:Treemap ID="treemap" runat="server" WeightValuePath = "Population" ColorValuePath = "Growth" DraggingOnSelection = "true">
        // ...
</ej:Treemap>

    Dragging Group On Selection

    To enable this feature, you have to set DraggingGroupOnSelection as “true”.

  • JS
    • <ej:Treemap ID="treemap" runat="server" WeightValuePath = "Population" ColorValuePath = "Growth" DraggingGroupOnSelection = "true">
        // ...
</ej:Treemap>