This article describes the API migration process of Accordion component from Essential JS 1 to Essential JS 2.
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Datasource | Property: dataSourcepublic IActionResult TreeMap() { ViewBag.datasource = [{ Continent: "Asia", Population: 1749046000 }]; } <ej-tree-map id="treemap" datasource="ViewBag.datasource"> </ej-tree-map> |
Property: dataSourcepublic IActionResult TreeMap() { ViewBag.datasource = [{ Continent: "Asia", Population: 1749046000 }]; } <ejs-treemap id="treemap" dataSource="ViewBag.dataSource"> </ejs-treemap> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Layout | Property: itemsLayoutMode<ej-tree-map id="treemap" items-layout-mode="SliceAndDiceAuto"> </ej-tree-map> |
Property: layoutType<ejs-treemap id="treemap" layoutType="SliceAndDiceAuto"> </ejs-treemap> |
Weight Value Path | Property: weightValuePath<ej-tree-map id="treemap" weight-value-path="Population"> </ej-tree-map> |
Property: weightValuePath<ejs-treemap id="treemap" weightValuePath="Population"> </ejs-treemap> |
Range Color Value Path | Property: colorValuePath<ej-tree-map id="treemap" color-value-path="Continent"> </ej-tree-map> |
Property: rangeColorValuePath<ejs-treemap id="treemap" rangeColorValuePath="Continent"> </ejs-treemap> |
Equal Color Value Path | Not Applicable | Property: equalColorValuePath<ejs-treemap id="treemap" equalColorValuePath="Asia"> </ejs-treemap> |
Height | Property: height<ej-tree-map id="treemap" height="50px"> </ej-tree-map> |
Property: height<ejs-treemap id="treemap" height="50px"> </ejs-treemap> |
Width | Property: width<ej-tree-map id="treemap" width="400px"> </ej-tree-map> |
Property: width<ejs-treemap id="treemap" width="400px"> </ejs-treemap> |
Theme | Not Applicable | Property: theme<ejs-treemap id="treemap" theme="Highcontrast"> </ejs-treemap> |
Localization | Not Applicable | Property: locale<ejs-treemap id="treemap" locale="en-US"> </ejs-treemap> |
Palette Colors | Property: paletteColorMapping.colorsTreeMapPaletteColorMapping palette = new TreeMapPaletteColorMapping(); palette.Colors.Add("green"); palette.Colors.Add("red"); <ej-tree-map id="treemap" tree-map-palette-color-mapping="palette"> </ej-tree-map> |
Property: palettevar color = ['#C33764', '#AB3566']; <ejs-treemap id="treemap" palette="color"> </ejs-treemap> |
Margin | Not Applicable | Property: marginvar margin = new TreeMapMargin { Left = 5, Top = 8 }; <ejs-treemap id="treemap" margin="margin"> </ejs-treemap> |
Resize | Property: enableResize<ej-treemap id="treemap" enable-resize="true"> </ej-treemap> |
Not Applicable |
Responsive | Property: isResponsive<ej-treemap id="treemap" is-responsive="true"> </ej-treemap> |
Not Applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Border Color | Property: leafItemSettings.borderBrush<ej-treemap id="treemap"> <e-leaf-item-settings border-brush="blue"/> </ej-treemap> |
Property: leafItemSettings.bordervar border = new TreeMapBorder{ Color = "blue"}; <ejs-treemap id="treemap"> <e-treemap-leafitemsettings border="border"/> </ejs-treemap> |
Border Width | Property: leafItemSettings.borderThickness<ej-treemap id="treemap"> <e-leaf-item-settings border-thickness="5"/> </ej-treemap> |
Property: leafItemSettings.bordervar border = new TreeMapBorder{ width = 5}; <ejs-treemap id="treemap"> <e-treemap-leafitemsettings border="border"/> </ejs-treemap> |
Gap Value | Not Applicable | Property: leafItemSettings.gap<ejs-treemap id="treemap"> <e-treemap-leafitemsettings gap="5"/> </ejs-treemap> |
Leaf Item Label | Property: leafItemSettings.itemTemplate<ej-treemap id="treemap"> <e-leaf-item-settings show-labels="true" item-template="template"/> </ej-treemap> |
Property: leafItemSettings.labelTemplate<ejs-treemap id="treemap"> <e-treemap-leafitemsettings labelTemplate="template"/> </ejs-treemap> |
Leaf Label Path | Property: leafItemSettings.labelPath<ej-treemap id="treemap"> <e-leaf-item-settings show-labels="true" label-path="GaugeName"/> </ej-treemap> |
Property: leafItemSettings.labelPath<ejs-treemap id="treemap"> <e-treemap-leafitemsettings labelPath="GaugeName"/> </ejs-treemap> |
Leaf Label Position | Property: leafItemSettings.labelPosition<ej-treemap id="treemap"> <e-leaf-item-settings show-labels="true" label-position="TopCenter"/> </ej-treemap> |
Property: leafItemSettings.labelPosition<ejs-treemap id="treemap"> <e-treemap-leafitemsettings labelPosition="Center"/> </ejs-treemap> |
Leaf Label Color | Not Applicable | Property: leafItemSettings.fill<ejs-treemap id="treemap"> <e-treemap-leafitemsettings fill="red"/> </ejs-treemap> |
Random Colors | Not Applicable | Property: leafItemSettings.autoFill<ejs-treemap id="treemap"> <e-treemap-leafitemsettings autoFill="true"/> </ejs-treemap> |
Format | Not Applicable | Property: leafItemSettings.labelFormat<ejs-treemap id="treemap"> <e-treemap-leafitemsettings labelFormat="${Continent}-${Population}"/> </ejs-treemap> |
Labels Visibility | Property: leafItemSettings.showLabels<ej-treemap id="treemap"> <e-leaf-item-settings show-labels="true"/> </ej-treemap> |
Property: leafItemSettings.showLabels<ejs-treemap id="treemap"> <e-treemap-leafitemsettings showLabels="true"/> </ejs-treemap> |
Opacity | Not Applicable | Property: leafItemSettings.opacity<ejs-treemap id="treemap"> <e-treemap-leafitemsettings opacity="0.7"/> </ejs-treemap> |
Padding | Not Applicable | Property: leafItemSettings.padding<ejs-treemap id="treemap"> <e-treemap-leafitemsettings padding="5"/> </ejs-treemap> |
Font Customization | Not Applicable | Property: leafItemSettings.labelStylevar label = new LeafItemSettingsLabelStyleLeafItemSettings { Size = '12px', Color = "red", Opacity = 0.5 }; <ejs-treemap id="treemap"> <e-treemap-leafitemsettings labelStyle="label"/> </ejs-treemap> |
Position of Template | Not Applicable | Property: leafItemSettings.templatePosition<ejs-treemap id="treemap"> <e-treemap-leafitemsettings templatePosition="Center"/> </ejs-treemap> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Legend Alignment | Property: legendSettings.alignment<ej-treemap id="treemap"> <e-legend-settings alignment="Far"/> </ej-treemap> |
Property: legendSettings.alignment<ejs-treemap id="treemap"> <e-treemap-legendsettings alignment="Near"/> </ejs-treemap> |
Legend Visibility | Property: showLegend<ej-treemap id="treemap" show-legend="true"> </ej-treemap> |
Property: legendSettings.visible<ejs-treemap id="treemap"> <e-treemap-legendsettings visible="true"/> </ejs-treemap> |
Legend Position | Property: legendSettings.dockPosition<ej-treemap id="treemap"> <e-legend-settings dock-position="Bottom"/> </ej-treemap> |
Property: legendSettings.position<ejs-treemap id="treemap"> <e-treemap-legendsettings position="Top"/> </ejs-treemap> |
Legend Height | Property: legendSettings.height<ej-treemap id="treemap"> <e-legend-settings height="40"/> </ej-treemap> |
Property: legendSettings.height<ejs-treemap id="treemap"> <e-treemap-legendsettings height="40px"/> </ejs-treemap> |
Legend Width | Property: legendSettings.width<ej-treemap id="treemap"> <e-legend-settings width="100"/> </ej-treemap> |
Property: legendSettings.width<ejs-treemap id="treemap"> <e-treemap-legendsettings width="100"/> </ejs-treemap> |
Shape Height | Property: legendSettings.iconHeight<ej-treemap id="treemap"> <e-legend-settings icon-height="15"/> </ej-treemap> |
Property: legendSettings.shapeHeight<ejs-treemap id="treemap"> <e-treemap-legendsettings shapeHeight="15"/> </ejs-treemap> |
Shape Width | Property: legendSettings.iconWidth<ej-treemap id="treemap"> <e-legend-settings icon-width="8"/> </ej-treemap> |
Property: legendSettings.shapeWidth<ejs-treemap id="treemap"> <e-treemap-legendsettings shapeWidth="8"/> </ejs-treemap> |
Padding | Not Applicable | Property: legendSettings.shapePadding<ejs-treemap id="treemap"> <e-treemap-legendsettings shapePadding="10"/> </ejs-treemap> |
Legend Title | Property: legendSettings.title<ej-treemap id="treemap"> <e-legend-settings title="Population"/> </ej-treemap> |
Property: legendSettings.title<ejs-treemap id="treemap"> <e-treemap-legendsettings title="Population"/> </ejs-treemap> |
Legend Shape | Not Applicable | Property: legendSettings.shape<ejs-treemap id="treemap"> <e-treemap-legendsettings shape="Rectangle"/> </ejs-treemap> |
Legend Mode | Property: legendSettings.mode<ej-treemap id="treemap"> <e-legend-settings mode="Interactive"/> </ej-treemap> |
Property: legendSettings.mode<ejs-treemap id="treemap"> <e-treemap-legendsettings mode="Interactive"/> </ejs-treemap> |
Legend Text Customization | Not Applicable | Property: legendSettings.textStylevar style = new LegendSettingsTextStyleLegendSettings { Size = '10px', Opacity = 0.5, Color = "red" }; <ejs-treemap id="treemap"> <e-treemap-legendsettings textStyle="style"/> </ejs-treemap> |
Legend Title Customization | Not Applicable | Property: legendSettings.titleStylevar style = new LegendSettingsTitleStyleLegendSettings { Size = '10px', Opacity = 0.5, Color = "red" }; <ejs-treemap id="treemap"> <e-treemap-legendsettings titleStyle="style"/> </ejs-treemap> |
Legend Shape Border | Not Applicable | Property: legendSettings.shapeBordervar style = new LegendSettingsBorderLegendSettings { Color = "red", Width = 2 }; <ejs-treemap id="treemap"> <e-treemap-legendsettings shapeBorder="style"/> </ejs-treemap> |
Legend Template | Property: legendSettings.template<ej-treemap id="treemap"> <e-legend-settings template="template"/> </ej-treemap> |
Not Applicable |
Left Label | Property: legendSettings.leftLabel<ej-treemap id="treemap"> <e-legend-settings left-label="10Million"/> </ej-treemap> |
Not Applicable |
Right Label | Property: legendSettings.rightLabel<ej-treemap id="treemap"> <e-legend-settings right-label="100Million"/> </ej-treemap> |
Not Applicable |
Legend Shape Image | Not Applicable | Property: legendSettings.imageUrl<ej-treemap id="treemap"> <e-treemap-legendsettings imageUrl="image.png"/> </ej-treemap> |
Position in Intractive Legend | Not Applicable | Property: legendSettings.labelPosition<ejs-treemap id="treemap"> <e-treemap-legendsettings labelPosition="Before"/> </ejs-treemap> |
Legend Orientation | Not Applicable | Property: legendSettings.orientation<ejs-treemap id="treemap"> <e-treemap-legendsettings orientation="Horizontal"/> </ejs-treemap> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Random Colors | Not Applicable | Property: levels.autoFill<ejs-treemap id="treemap"> <e-treemap-levels> <e-treemap-level autoFill="true"/> </e-treemap-levels> </ejs-treemap> |
Level Background Color | Property: levels.groupBackground<ej-treemap id="treemap"> <e-levels> <e-level group-background="white"/> </e-levels> </ej-treemap> |
Property: levels.fill<ejs-treemap id="treemap"> <e-treemap-levels> <e-treemap-level fill="white"/> </e-treemap-levels> </ejs-treemap> |
Level Border Color | Property: levels.groupBorderColor<ej-treemap id="treemap"> <e-levels> <e-level group-border-color="#58585B"/> </e-levels> </ej-treemap> |
Property: levels.border.colorvar border = new TreeMapBorder { Color = "#58585B" }; <ejs-treemap id="treemap"> <e-treemap-levels> <e-treemap-level border="border"/> </e-treemap-levels> </ejs-treemap> |
Level Border Width | Property: levels.groupBorderThickness<ej-treemap id="treemap"> <e-levels> <e-level group-border-thickness="2"/> </e-levels> </ej-treemap> |
Property: levels.border.widthvar border = new TreeMapBorder { Width = 2 }; <ejs-treemap id="treemap"> <e-treemap-levels> <e-treemap-level border="border"/> </e-treemap-levels> </ejs-treemap> |
Group Gap | Property: levels.groupGap<ej-treemap id="treemap"> <e-levels> <e-level group-gap="2"/> </e-levels> </ej-treemap> |
Property: levels.groupGap<ejs-treemap id="treemap"> <e-treemap-levels> <e-treemap-level groupGap="2"/> </e-treemap-levels> </ejs-treemap> |
Group Padding | Property: levels.groupPadding<ej-treemap id="treemap"> <e-levels> <e-level group-padding="1"/> </e-levels> </ej-treemap> |
Property: levels.groupPadding<ejs-treemap id="treemap"> <e-treemap-levels> <e-treemap-level groupPadding="1"/> </e-treemap-levels> </ejs-treemap> |
Group Path | Property: levels.groupPath<ej-treemap id="treemap"> <e-levels> <e-level group-path="pathname"/> </e-levels> </ej-treemap> |
Property: levels.groupPath<ejs-treemap id="treemap"> <e-treemap-levels> <e-treemap-level groupPath="pathname"/> </e-treemap-levels> </ejs-treemap> |
Height of Header Level | Property: levels.headerHeight<ej-treemap id="treemap"> <e-levels> <e-level header-height="20"/> </e-levels> </ej-treemap> |
Property: levels.headerHeight<ejs-treemap id="treemap"> <e-treemap-levels> <e-treemap-level headerHeight="20"/> </e-treemap-levels> </ejs-treemap> |
Header Template | Property: levels.headerTemplate<ej-treemap id="treemap"> <e-levels> <e-level header-template="template"/> </e-levels> </ej-treemap> |
Property: levels.headerTemplate<ejs-treemap id="treemap"> <e-treemap-levels> <e-treemap-level headerTemplate="template"/> </e-treemap-levels> </ejs-treemap> |
Opacity of Color | Not Applicable | Property: levels.opacity<ejs-treemap id="treemap"> <e-treemap-levels> <e-treemap-level opacity="0.5"/> </e-treemap-levels> </ejs-treemap> |
Header Visibility | Property: levels.showHeader<ej-treemap id="treemap"> <e-levels> <e-level show-header="false"/> </e-levels> </ej-treemap> |
Property: levels.showHeader<ejs-treemap id="treemap"> <e-treemap-levels> <e-treemap-level showHeader="true"/> </e-treemap-levels> </ejs-treemap> |
Template Position | Property: levels.labelPosition<ej-treemap id="treemap"> <e-levels> <e-level label-position="TopLeft"/> </e-levels> </ej-treemap> |
Property: levels.templatePosition<ejs-treemap id="treemap"> <e-treemap-levels> <e-treemap-level templatePosition="Center"/> </e-treemap-levels> </ejs-treemap> |
Header Style | Not Applicable | Property: levels.headerStylevar style = new LeafItemSettingsLabelStyleLeafItemSettings { Size = '16px', Color = 'red', Opacity = 0.7 }; <ejs-treemap id="treemap"> <e-treemap-levels> <e-treemap-level headerStyle="style"/> </e-treemap-levels> </ejs-treemap> |
Header Format | Not Applicable | Property: levels.headerFormat<ejs-treemap id="treemap"> <e-treemap-levels> <e-treemap-level headerFormat="${Continent}"/> </e-treemap-levels> </ejs-treemap> |
Header Alignment | Not Applicable | Property: levels.headerAlignment<ejs-treemap id="treemap"> <e-treemap-levels> <e-treemap-level headerAlignment="Center"/> </e-treemap-levels> </ejs-treemap> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Selection | Property: selectionMode<ej-treemap id="treemap" selection-mode="Default"> </ej-treemap> |
Property: selectionSettings.mode<ejs-treemap id="treemap"> <e-treemap-selectionsettings enable="true", mode="Item"/> </ejs-treemap> |
Selection Color | Not Applicable | Property: selectionSettings.fill<ejs-treemap id="treemap"> <e-treemap-selectionsettings enable="true", fill="blue"/> </ejs-treemap> |
Selection Color Opacity | Not Applicable | Property: selectionSettings.opacity<ejs-treemap id="treemap"> <e-treemap-selectionsettings enable="true", opacity="0.6"/> </ejs-treemap> |
Border for selection | Not Applicable | Property: selectionSettings.bordervar border = new SelectionSettingsBorderSelectionSettings { Color = "white", Width = 0.5 }; <ejs-treemap id="treemap"> <e-treemap-selectionsettings border="border"/> </ejs-treemap> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Highlight Group Selection Mode | Property: highlightGroupOnSelection<ej-treemap id="treemap" highlight-group-on-selection="true"> </ej-treemap> |
Property: highlightSettings.mode<ejs-treemap id="treemap"> <e-treemap-highlightsettings enable="true", mode="All"/> </ejs-treemap> |
Highlight Selection Mode | Property: highlightOnSelection<ej-treemap id="treemap" highlight-on-selection="true"> </ej-treemap> |
Property: highlightSettings.mode<ejs-treemap id="treemap"> <e-treemap-highlightsettings enable="true", mode="Item"/> </ejs-treemap> |
Highlight Group Border Color | Property: highlightGroupBorderBrush<ej-treemap id="treemap" highlight-border-brush="gray"> </ej-treemap> |
Property: highlightSettings.border.colorvar border = new HighlightSettingsBorderHighlightSettings { Color = "gary" }; <ejs-treemap id="treemap"> <e-treemap-highlightsettings enable="true", mode="All", border="border"/> </ejs-treemap> |
Highlight Group Border Width | Property: highlightGroupBorderThickness<ej-treemap id="treemap" highlight-border-thickness="3"> </ej-treemap> |
Property: highlightSettings.border.widthvar border = new HighlightSettingsBorderHighlightSettings { Width = 3 }; <ejs-treemap id="treemap"> <e-treemap-highlightsettings enable="true", mode="All", border="border"/> </ejs-treemap> |
Highlight Selection Border Color | Property: highlightBorderBrush<ej-treemap id="treemap" highlight-border-brush="gray"> </ej-treemap> |
Property: highlightSettings.border.colorvar border = new HighlightSettingsBorderHighlightSettings { Color = "gary" }; <ejs-treemap id="treemap"> <e-treemap-highlightsettings enable="true", mode="Item", border="border"/> </ejs-treemap> |
Highlight Selection Border Width | Property: highlightBorderThickness<ej-treemap id="treemap" highlight-border-thickness="3"> </ej-treemap> |
Property: highlightSettings.border.widthvar border = new HighlightSettingsBorderHighlightSettings { Width = 3 }; <ejs-treemap id="treemap"> <e-treemap-highlightsettings enable="true", mode="Item", border="border"/> </ejs-treemap> |
Highlight Color | Not Applicable | Property: highlightSettings.fill<ejs-treemap id="treemap"> <e-treemap-highlightsettings enable="true", fill="red"/> </ejs-treemap> |
Highlight Color Opacity | Not Applicable | Property: highlightSettings.opacity<ejs-treemap id="treemap"> <e-treemap-highlightsettings enable="true", fill="red", opacity="0.5"/> </ejs-treemap> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
From value | Property: rangeColorMapping.from<ej-treemap id="treemap"> <e-range-color-mappings> <e-range-color-mapping from="1000"/> </e-range-color-mappings> </ej-treemap> |
Property: leafItemSettings.colorMapping.fromvar map = new { from = 1000 }; <ejs-treemap id="treemap"> <e-treemap-leafitemsettings colorMapping="map"/> </ejs-treemap> |
To value | Property: rangeColorMapping.to<ej-treemap id="treemap"> <e-range-color-mappings> <e-range-color-mapping to="10000"/> </e-range-color-mappings> </ej-treemap> |
Property: leafItemSettings.colorMapping.tovar map = new { to = 10000 }; <ejs-treemap id="treemap"> <e-treemap-leafitemsettings colorMapping="map"/> </ejs-treemap> |
Color | Property: rangeColorMapping.color<ej-treemap id="treemap"> <e-range-color-mappings> <e-range-color-mapping color="#77D8D8"/> </e-range-color-mappings> </ej-treemap> |
Property: leafItemSettings.colorMapping.colorvar map = new { color = "#77D8D8" }; <ejs-treemap id="treemap"> <e-treemap-leafitemsettings colorMapping="map"/> </ejs-treemap> |
Legend Label | Property: rangeColorMapping.legendLabel<ej-treemap id="treemap"> <e-range-color-mappings> <e-range-color-mapping legendlabel="Growth"/> </e-range-color-mappings> </ej-treemap> |
Property: leafItemSettings.colorMapping.labelvar map = new { label = "Growth" }; <ejs-treemap id="treemap"> <e-treemap-leafitemsettings colorMapping="map"/> </ejs-treemap> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
From value | Property: desaturationColorMapping.from<ej-treemap id="treemap"> <e-desaturation-color-mapping from = "1000"/> </ej-treemap> |
Property: leafItemSettings.colorMapping.fromvar map = new { from = 1000 }; <ejs-treemap id="treemap"> <e-treemap-leafitemsettings colorMapping="map"/> </ejs-treemap> |
To value | Property: desaturationColorMapping.to<ej-treemap id="treemap"> <e-desaturation-color-mapping to = "10000"/> </ej-treemap> |
Property: leafItemSettings.colorMapping.tovar map = new { to = 10000 }; <ejs-treemap id="treemap"> <e-treemap-leafitemsettings colorMapping="map"/> </ejs-treemap> |
Color | Property: desaturationColorMapping.color<ej-treemap id="treemap"> <e-desaturation-color-mapping color="#77D8D8"/> </ej-treemap> |
Property: leafItemSettings.colorMapping.colorvar map = new { color = "#77D8D8" }; <ejs-treemap id="treemap"> <e-treemap-leafitemsettings colorMapping="map"/> </ejs-treemap> |
Value | Not Applicable | Property: leafItemSettings.colorMapping.valuevar map = new { value = "Population" }; <ejs-treemap id="treemap"> <e-treemap-leafitemsettings colorMapping="map"/> </ejs-treemap> |
Minimum Opacity | Not Applicable | Property: leafItemSettings.colorMapping.minOpacityvar map = new { minOpacity = 0.7 }; <ejs-treemap id="treemap"> <e-treemap-leafitemsettings colorMapping="map"/> </ejs-treemap> |
Maximum Opacity | Not Applicable | Property: leafItemSettings.colorMapping.maxOpacityvar map = new { maxOpacity = 1 }; <ejs-treemap id="treemap"> <e-treemap-leafitemsettings colorMapping="map"/> </ejs-treemap> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Tooltip | Property: showTooltip<ej-treemap id="treemap" show-tooltip="true"> </ej-treemap> |
Property: tooltipSettings.visible<ejs-treemap id="treemap"> <e-treemap-tooltipsettings visible="true"/> </ejs-treemap> |
Tooltip Template | Property: tooltipTemplate<ej-treemap id="treemap" tooltip-template="template"> </ej-treemap> |
Property: tooltipSettings.template<ejs-treemap id="treemap"> <e-treemap-tooltipsettings template="template"/> </ejs-treemap> |
Tooltip Border | Not Applicable | Property: tooltipSettings.bordervar border = new TreeMapBorder{ Color = "red", Width = 2 }; <ejs-treemap id="treemap"> <e-treemap-tooltipsettings border="border"/> </ejs-treemap> |
Tooltip Color | Not Applicable | Property: tooltipSettings.fill<ejs-treemap id="treemap"> <e-treemap-tooltipsettings fill="gray"/> </ejs-treemap> |
Tooltip Format | Not Applicable | Property: tooltipSettings.format<ejs-treemap id="treemap"> <e-treemap-tooltipsettings format="${Population}"/> </ejs-treemap> |
Tooltip Marker Shape | Not Applicable | Property: tooltipSettings.markerShapes<ejs-treemap id="treemap"> <e-treemap-tooltipsettings markerShapes="Circle"/> </ejs-treemap> |
Tooltip Color Opacity | Not Applicable | Property: tooltipSettings.opacity<ejs-treemap id="treemap"> <e-treemap-tooltipsettings opacity="0.5"/> </ejs-treemap> |
Tooltip Text Style | Not Applicable | Property: tooltipSettings.textStylevar style = new TooltipSettingsTextStyleTooltipSettings { Size = '12px', Opacity = 0.5, Color = "red" }; <ejs-treemap id="treemap"> <e-treemap-tooltipsettings textStyle="style"/> </ejs-treemap> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Drilldown | Property: enableDrillDown<ej-treemap id="treemap" enable-drill-down="true"> </ej-treemap> |
Property: enableDrillDown<ejs-treemap id="treemap" enableDrillDown="true"> </ejs-treemap> |
Drilldown Level | Property: drillDownLevel<ej-treemap id="treemap" drill-down-level="1"> </ej-treemap> |
Property: InitialDrillSettings.groupIndex<ejs-treemap id="treemap"> <e-treemap-initialdrilldown groupIndex="1"/> </ejs-treemap> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Treemap Refresh Method | Method: refreshvar treemap = $("#container").ejTreeMap("instance"); treemap.refresh(); |
Method: refreshvar treemap = document.getElementById('container').ej2_instances[0]; treemap.refresh(); |
Method to Drilldown | Method: drillDownvar treemap = $("#container").ejTreeMap("instance"); treemap.drillDown(); |
Not Applicable |
Append to Method | Not Applicable | Method: appendTovar treemap = document.getElementById('container').ej2_instances[0]; treemap.appendTo(); |
Add Event Listener Method | Not Applicable | Method: addEventListenervar treemap = document.getElementById('container').ej2_instances[0]; treemap.addEventListener(); |
Treemap Destroy Method | Not Applicable | Method: destroyvar treemap = document.getElementById('container').ej2_instances[0]; treemap.destroy(); |
Treemap Exporting Method | Not Applicable | Method: exportvar treemap = document.getElementById('container').ej2_instances[0]; treemap.export(); |
Get the Module Name | Not Applicable | Method: getModuleNamevar treemap = document.getElementById('container').ej2_instances[0]; treemap.getModuleName(); |
Printing the Treemap | Not Applicable | Method: printvar treemap = document.getElementById('container').ej2_instances[0]; treemap.print(); |
Resizing the Treemap | Not Applicable | Method: resizeOnTreeMapvar treemap = document.getElementById('container').ej2_instances[0]; treemap.resizeOnTreeMap(); |
Inject Method (Tooltip) | Not Applicable | Method: resizeOnTreeMapTreeMap.Inject(TreeMapTooltip); var treemap = document.getElementById('container').ej2_instances[0]; treemap.resizeOnTreeMap(); |
Remove Event Listener Method | Not Applicable | Method: removeEventListenervar treemap = document.getElementById('container').ej2_instances[0]; treemap.removeEventListener(); |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Treemap Load Event | Not Applicable | Event: load<ejs-treemap id="treemap" load="load" </ejs-treemap> function load(args) { } |
Treemap Loaded Event | Not Applicable | Event: loaded<ejs-treemap id="treemap" loaded="loaded" </ejs-treemap> function loaded(args) { } |
Event Before Print | Not Applicable | Event: beforePrint<ejs-treemap id="treemap" beforePrint="beforePrint" </ejs-treemap> function beforePrint(args) { } |
Click Event | Event: click<ej-treemap id="treemap" click="click"> </ej-treemap> function click(args) { } |
Event: click<ejs-treemap id="treemap" click="click" </ejs-treemap> function click(args) { } |
Drill Start Event | Not Applicable | Event: drillStart<ejs-treemap id="treemap" drillStart="drillStart" </ejs-treemap> function click(args) { } |
Drill End Event | Not Applicable | Event: drillEnd<ejs-treemap id="treemap" drillEnd="drillEnd" </ejs-treemap> function drillEnd(args) { } |
Event on Item Click | Not Applicable | Event: itemClick<ejs-treemap id="treemap" itemClick="itemClick" </ejs-treemap> function itemClick(args) { } |
Treemap Item Select Event | Event: treeMapItemSelected<ej-treemap id="treemap" tree-map-item-selected="treeMapItemSelected"> </ej-treemap> function treeMapItemSelected(args) { } |
Event: itemSelected<ejs-treemap id="treemap" itemSelected="itemSelected" </ejs-treemap> function itemSelected(args) { } |
Treemap Item Rendering Event | Event: itemRendering<ej-treemap id="treemap" item-rendering="itemRendering"> </ej-treemap> function itemRendering(args) { } |
Event: itemRendering<ejs-treemap id="treemap" itemRendering="itemRendering" </ejs-treemap> function itemRendering(args) { } |
Treemap Item Move Event | Not Applicable | Event: itemMove<ejs-treemap id="treemap" itemMove="itemMove" </ejs-treemap> function itemMove(args) { } |
Treemap Item Highlight Event | Not Applicable | Event: itemHighlight<ejs-treemap id="treemap" itemHighlight="itemHighlight" </ejs-treemap> function itemHighlight(args) { } |
Template Header Render Event | Event: headerTemplateRendering<ej-treemap id="treemap" header-template-rendering="headerTemplateRendering"> </ej-treemap> function headerTemplateRendering(args) { } |
Not Applicable |
Drilldown Item Select Event | Event: drillDownItemSelected<ej-treemap id="treemap" drill-down-item-selected="drillDownItemSelected"> </ej-treemap> function drillDownItemSelected(args) { } |
Not Applicable |
Mouse Event | Not Applicable | Event: mouseMove<ejs-treemap id="treemap" mouseMove="mouseMove" </ejs-treemap> function mouseMove(args) { } |
Resize Event | Not Applicable | Event: resize<ejs-treemap id="treemap" resize="resize" </ejs-treemap> function resize(args) { } |
Tooltip Render Event | Not Applicable | Event: tooltipRendering<ejs-treemap id="treemap" tooltipRendering="tooltipRendering" </ejs-treemap> function tooltipRendering(args) { } |
Double Click Event | Event: doubleClick<ej-treemap id="treemap" double-click="doubleClick"> </ej-treemap> function doubleClick(args) { } |
Not Applicable |
Right Click Event | Event: rightClick<ej-treemap id="treemap" right-click="rightClick"> </ej-treemap> function rightClick(args) { } |
Not Applicable |