Methods and Events

27 Feb 201811 minutes to read

Method

Refresh()

refresh() method is used to reload the treemap with updated values.

HTML

<ej:TreeMap ID="treemap" runat="server">
  </ej:TreeMap>
  <script type="text/javascript">
       $("#treemap").ejTreeMap("refresh");
  </script>

Events

TreeMapItemSelected

TreeMapItemSelected event will trigger when treemap item is selected.

Name	Type	Description
HTML originalEvent	object	Returns selected treeMapItem object.

HTML

<ej:TreeMap ID="treemap" runat="server" OnClientTreeMapitemsselected="itemSelected">
   </ej:TreeMap>
   
   <script type="text/javascript">
    function itemSelected(sender) { 
        // do something
    }
    </script>

DrillStarted

DrillStarted event will fire, when the drilldown action is started in the treemap control.

Name	Type	Description
HTML originalEvent	object	Returns selected drilled treeMap object.

HTML

<ej:TreeMap ID="treemap" runat="server" OnClientDrillStarted="onDrillStarted">
   </ej:TreeMap>
   
   <script type="text/javascript">
    function onDrillStarted(sender) { 
        // do something
    }
    </script>

DrillDownItemSelected

If the treemap drilldown item is selected, then DrillDownItemSelected event will fire.

Name	Type	Description
HTML originalEvent	object	Returns selected drilldown treeMap object.

HTML

<ej:TreeMap ID="treemap" runat="server" OnClientDrillDownItemSelected="onDrillDownItemSelected">
   </ej:TreeMap>
   
   <script type="text/javascript">
    function onDrillDownItemSelected(sender) { 
        // do something
    }
    </script>

HeaderTemplateRendering

HeaderTemplateRendering event will fire before rendering the treemap drilldown header template.

Name	Type	Description
HTML originalEvent	object	Returns drilldown header.

HTML

<ej:TreeMap ID="treemap" runat="server" OnClientHeaderTemplateRendering="loadTemplate">
   </ej:TreeMap>
   
   <script type="text/javascript">
    function loadTemplate(sender) { 
        // do something
    }
    </script>

Refreshed

Refreshed event will trigger after refreshing the treemap control with updated values.

Name	Type	Description
HTML originalEvent	object	Refresh and load the treemap.

HTML

<ej:TreeMap ID="treemap" runat="server" OnClientRefreshed="onRefresh">
   </ej:TreeMap>
   
   <script type="text/javascript">
    function onRefresh(sender) { 
        // do something
    }
    </script>

TreeMapGroupSelected

TreeMapGroupSelected event will fired when the group selection is performed on treemap items.

Name	Type	Description
HTML originalEvent	object	Returns the selected group of treeMapItems as object.

HTML

<ej:TreeMap ID="treemap" runat="server" OnClientTreeMapGroupSelected="onGroupSelected">
   </ej:TreeMap>
   
   <script type="text/javascript">
    function onGroupSelected(sender) { 
        // do something
    }
    </script>

itemRendering

ItemRendering event will trigger while rendering each item in treemap.

Name	Type	Description
HTML originalEvent	object	Returns each leaf items in treemap

HTML

<ej:TreeMap ID="treemap" runat="server" OnClientItemRendering="onItemRendering">
   </ej:TreeMap>
   
   <script type="text/javascript">
    function onItemRendering(sender) { 
        // do something
    }
    </script>

legendItemRendering

LegendItemRendering event will trigger while rendering each legend item in treemap.

Name	Type	Description
HTML originalEvent	object	Returns each legend item in treemap

HTML

<ej:TreeMap ID="treemap" runat="server" OnClientLegendItemRendering="onLegendItemRendering">
   </ej:TreeMap>
   
   <script type="text/javascript">
    function onLegendItemRendering(sender) { 
        // do something
    }
    </script>

Click

Click event will trigger while clicking an item in the treemap.

HTML

<ej:TreeMap ID="treemap" runat="server" OnClientClick="onClick">
   </ej:TreeMap>
   
   <script type="text/javascript">
    function onClick(sender) { 
        // do something
    }
    </script>

DoubleClick

DoubleClick event will trigger while double clicking an item in the treemap

HTML

<ej:TreeMap ID="treemap" runat="server" OnClientDoubleClick="onDoubleClick">
   </ej:TreeMap>
   
   <script type="text/javascript">
    function onDoubleClick(sender) { 
        // do something
    }
    </script>

RightClick

RightClick event will trigger while right clicking an item in the treemap.

HTML

<ej:TreeMap ID="treemap" runat="server" OnClientRightClick="onRightClick">
   </ej:TreeMap>
   
   <script type="text/javascript">
    function onRightClick(sender) { 
        // do something
    }
    </script>