Migration from Essential® JS 1

8 Dec 202422 minutes to read

This article describes the API migration process of Accordion component from Essential® JS 1 to Essential® JS 2.

Data Binding

Behavior API in Essential® JS 1 API in Essential® JS 2
Datasource Property: dataSource

@(Html.EJ().TreeMap("container").
DataSource(datasource)
.WeightValuePath("population"))
 @section ControlsSection{@{ var datasource = ViewData["medals"];}

script:

public ActionResult Customization()
{ViewData["medals"] = MedalData.GetPopulation();
return View();}public class MedalData{
public static List<MedalData> GetPopulation()
List<MedalData> medals = new List<MedalData>();
medals.Add(new MedalData(){
Continent: "Asia", Population: 1749046000} return medals; }} 		Property: dataSource
@Html.EJS().TreeMap("container")
.Load("load")
.LayoutType(LayoutMode.Squarified).Render();
function load(args)
{var data=[{ Continent: "Asia", Population: 1749046000}];
args.treemap.dataSource = data;}

Appearance

Behavior API in Essential® JS 1 API in Essential® JS 2
Layout Property: itemsLayoutMode

@(Html.EJ().TreeMap("container").
ItemsLayoutMode("SliceAndDiceAuto")) 		Property: layoutType

@Html.EJS().TreeMap("container")
.LayoutType(LayoutMode.Squarified)
.Render();
Weight Value Path Property: weightValuePath

@(Html.EJ().TreeMap("container").
.WeightValuePath("Population")) 		Property: weightValuePath

@Html.EJS().TreeMap("container")
.WeightValuePath("Population")
.Render();
Range Color Value Path Property: colorValuePath

@(Html.EJ().TreeMap("container").
.ColorValuePath("Continent") ) 		Property: rangeColorValuePath

@Html.EJS().TreeMap("container")
.ColorValuePath("Continent")
.Render();
Equal Color Value Path Not Applicable Property: equalColorValuePath

@Html.EJS().TreeMap("container")
equalColorValuePath('Asia').Render();
Height Property: height

@(Html.EJ().TreeMap("container").Height(50)) 		Property: height

@Html.EJS().TreeMap("container")
Height('50px')
.Render();
Width Property: width

@(Html.EJ().TreeMap("container").
Width(400)) 		Property: width

@Html.EJS().TreeMap("container")
Width('400px')
.Render();
Theme Not Applicable Property: theme

@Html.EJS().TreeMap("container")
theme('Highcontrast').Render();
Localization Property: locale

@(Html.EJ().TreeMap("container").
Locale("en-US") 		Property: locale

@Html.EJS().TreeMap("container")
Locale("en-US")
.Render();
Palette Colors Property: paletteColorMapping.colors

@(Html.EJ().TreeMap("container").
.TreeMapPaletteColorMapping(
colors(['red','green'] ) 		Property: palette

@Html.EJS().TreeMap("container")
Palette(new string[]
{'#C33764', '#AB3566'})
.Render();
Margin Not Applicable Property: margin

@Html.EJS().TreeMap("container")
Margin(mar=>mar.
left(10).top('10'))
.Render();
Resize Property: enableResize

@(Html.EJ().TreeMap("container").
enableResize(true) 		Not Applicable
Responsive Property: isResponsive
@(Html.EJ().TreeMap("container").
isResponsive(true)) 		Not Applicable

Leaf Items

Behavior API in Essential® JS 1 API in Essential® JS 2
Border Color Property: leafItemSettings.borderBrush

@(Html.EJ().TreeMap("container")
.LeafItemsSetting(lls =>{ lls.showLabels(true)
.borderBrush("blue")
}) 		Property: leafItemSettings.border

@Html.EJS().TreeMap("container")
.LeafItemSettings(
leaf => leaf.Border(new TreeMapBorder
{ Color = "white", Width = 0.5 })
)
.Render();
Border Width Property: leafItemSettings.borderThickness

@(Html.EJ().TreeMap("container").
.LeafItemsSetting(lls =>{ lls.showLabels(true) .borderThickness(5)
}) 		Property: leafItemSettings.border

@Html.EJS().TreeMap("container")
.LeafItemSettings(
leaf =>leaf.Border(new TreeMapBorder
{ Width = 0.5 })
)
.Render();
Gap Value Property: leafItemSettings.gap

@(Html.EJ().TreeMap("container").
.LeafItemsSetting(lls =>{ lls.showLabels(true)
.gap(5)
}) 		Property: leafItemSettings.gap

@Html.EJS().TreeMap("container")
.LeafItemSettings(
leaf =><br/>leaf.Gap(5)
)
.Render();
Leaf Item Label Property: leafItemSettings.itemTemplate

@(Html.EJ().TreeMap("container")
.LeafItemsSetting(lls =>{lls.showLabels(true)
.ItemTemplate("template")
}) 		Property: leafItemSettings.labelTemplate
@Html.EJS().TreeMap("container")
.LeafItemSettings(
leaf =>
leaf.LabelTemplate('template')
).Render();
Leaf Label Path Property: leafItemSettings.labelPath

@(Html.EJ().TreeMap("container").
.LeafItemsSetting(lls =>{ lls.showLabels(true)
.LabelPath("GameName")
}) 		Property: leafItemSettings.labelPath

@Html.EJS().TreeMap("container")
.LeafItemSettings(
leaf =>
.LabelPath('GameName') ).Render();
Leaf Label Position Property: leafItemSettings.labelPosition

@(Html.EJ().TreeMap("container").
.LeafItemsSetting(lls =>{ lls.showLabels( true)
labelPosition: "topcenter"
}) 		Property: leafItemSettings.labelPosition

@Html.EJS().TreeMap("container")
.LeafItemSettings(
leaf =>
leaf.LabelPosition('Center')
)
.Render();
Leaf Label Color Not Applicable Property: leafItemSettings.fill

@Html.EJS().TreeMap("container")
.LeafItemSettings(
leaf =>
leaf.Fill('red')
)
.Render();
Random Colors Not Applicable Property: leafItemSettings.autoFill

@Html.EJS().TreeMap("container")
.LeafItemSettings(
leaf =>
leaf.AutoFill(true)
)
.Render();
Format Not Applicable Property: leafItemSettings.labelFormat

@Html.EJS().TreeMap("container")
.LeafItemSettings(
leaf =>
leaf.LabelFormat('${Continent}-${Population}')<br/>).Render();
Labels Visibility Property: leafItemSettings.showLabels

@(Html.EJ().TreeMap("container")
 .LeafItemsSetting(lls =>{
 lls.ShowLabels(true)
}) 		Property: leafItemSettings.showLabels

@Html.EJS().TreeMap("container")
.LeafItemSettings(
leaf =>
leaf.ShowLabels(false)
)
.Render();
Opacity Not Applicable Property: *leafItemSettings.opacity *

@Html.EJS().TreeMap("container")
.LeafItemSettings(
leaf =>
leaf.Opacity(0.7))
.Render();
Padding Not Applicable Property: *leafItemSettings.padding *

@Html.EJS().TreeMap("container")
.LeafItemSettings(
leaf =>
leaf.Padding(5) )
.Render();
Font Customization Not Applicable Property: leafItemSettings.labelStyle

@Html.EJS().TreeMap("container")
.LeafItemSettings(
leaf =>
leaf.LabelStyle(new
TreeMapFont {size= '12px', color= 'red', opacity= 0.5 })
)
.Render();
Position of Template Not Applicable Property: leafItemSettings.templatePosition
@Html.EJS().TreeMap("container")
.LeafItemSettings(
leaf =>
leaf.TemplatePosition('Center')
)
.Render();

Legend

Behavior API in Essential® JS 1 API in Essential® JS 2
Legend Alignment Property: legendSettings.alignment

@(Html.EJ().TreeMap("container").
.TreeMapLegend(t1=>{t1.Alignment("far")
}) 		Property: legendSettings.alignment

@Html.EJS().TreeMap("container")
.LegendSettings(
t1=> t1.Alignment("far")
).Render();
Legend Visibility Property: showLegend

@(Html.EJ().TreeMap("container").
.TreeMapLegend(t1=>{t1.ShowLegend(false)
}) 		Property: legendSettings.visible

@Html.EJS().TreeMap("container")
.LegendSettings(
t1=>t1.ShowLegend(false)
).Render();
Legend Position Property: legendSettings.dockPosition

@(Html.EJ().TreeMap("container").
.TreeMapLegend(t1=>{t1.DockPosition("bottom")
}) 		Property: legendSettings.position

@Html.EJS().TreeMap("container")
.LegendSettings(
t1=> t1.position('Top')
).Render();
Legend Height Property: legendSettings.height

@(Html.EJ().TreeMap("container").
.TreeMapLegend(t1=>{t1.Height(100)
}) 		Property: legendSettings.height

@Html.EJS().TreeMap("container")
.LegendSettings(
t1=> t1.Height('100px')
).Render();
Legend Width Property: legendSettings.width

@(Html.EJ().TreeMap("container").
.TreeMapLegend(t1=>{t1.Width(100)
}) 		Property: legendSettings.width

@Html.EJS().TreeMap("container")
.LegendSettings(
t1=> t1.Width('100')
).Render();
Shape Height Property: legendSettings.iconHeight

@(Html.EJ().TreeMap("container").
.TreeMapLegend(t1=>{t1.IconHeight(15)
}) 		Property: legendSettings.shapeHeight

@Html.EJS().TreeMap("container")
.LegendSettings(
t1=> t1.ShapeHeight('40px')
).Render();
Shape Width Property: legendSettings.iconWidth

@(Html.EJ().TreeMap("container").
.TreeMapLegend(t1=>{t1.IconWidth(8)
}) 		Property: legendSettings.shapeWidth

@Html.EJS().TreeMap("container")
.LegendSettings(
t1=>t1.ShapeWidth('40px')
).Render();
Padding Not Applicable Property: legendSettings.shapePadding

@Html.EJS().TreeMap("container")
.LegendSettings(
t1=> t1.ShapePadding (10)
).Render();
Legend Title Property: legendSettings.title

@(Html.EJ().TreeMap("container").
.TreeMapLegend(t1=>{t1.Title("Population")
}) 		Property: legendSettings.title

@Html.EJS().TreeMap("container")
.LegendSettings(
t1=>t1.Title('Legend')
).Render();
Legend Shape Not Applicable Property: legendSettings.shape

@Html.EJS().TreeMap("container")
.LegendSettings(
t1=>t1.Shape('Rectangle')
).Render();
Legend Mode Property: legendSettings.mode

@(Html.EJ().TreeMap("container").
.TreeMapLegend(t1=>{t1.mode("interactive")
}) 		Property: legendSettings.mode

@Html.EJS().TreeMap("container")
.LegendSettings(
t1=>t1.mode("interactive")
).Render();
Legend Text Customization Not Applicable Property: legendSettings.textStyle

@Html.EJS().TreeMap("container")
.LegendSettings(
legend=>legend.TextStyle(new TreeMapFont
{ Size= "10px", Opacity= 0.5, Color= "red"
})
).Render();
Legend Title Customization Not Applicable Property: legendSettings.titleStyle

@Html.EJS().TreeMap("container")
.LegendSettings(
legend=>
legend.TitleStyle(new TreeMapFont
{ Size= "10px", Opacity= 0.5, Color= "red" })
).Render();
Legend Shape Border Not Applicable Property: legendSettings.shapeBorder

@Html.EJS().TreeMap("container")
.LegendSettings(
legend.ShapeBorder(new TreeMapBorder
{ Color= "red", Width= 1 })
).Render();
Legend Template Property: legendSettings.template

@(Html.EJ().TreeMap("container").
.TreeMapLegend(t1=>{t1.template("template")
}) 		Not Applicable
Left Label Property: legendSettings.leftLabel

@(Html.EJ().TreeMap("container").
.TreeMapLegend(t1=>{t1.Mode("interactive")
.LeftLabel("10Million")
}) 		Not Applicable
Right Label Property: legendSettings.rightLabel

@(Html.EJ().TreeMap("container").
.TreeMapLegend(t1=>{t1.Mode("interactive")
.LeftLabel("10Million")
}) 		Not Applicable
Legend Shape Image Not Applicable Property: legendSettings.imageUrl

@Html.EJS().TreeMap("container")
.LegendSettings(
t1=>t1.ImageUrl('')
).Render();
Position in Intractive Legend Not Applicable Property: legendSettings.labelPosition

@Html.EJS().TreeMap("container")
.LegendSettings(
t1=>t1.LabelPosition("Center")
).Render();
Legend Location Not Applicable Property: legendSettings.location

@Html.EJS().TreeMap("container")
.LegendSettings(
t1=>t1.Location({ x=10, y= 20 })
).Render();
Legend Orientation Not Applicable Property: legendSettings.orientation

@Html.EJS().TreeMap("container")
.LegendSettings(
t1=>t1.Orientation("Horizontal")
).Render();

Levels

Behavior API in Essential® JS 1 API in Essential® JS 2
Random Colors Not Applicable Property: levels.autoFill

@Html.EJS().TreeMap("container")
.Levels(
l1=>l1.AutoFill(true)
).Render();
Level Background Color Property: levels.groupBackground

@(Html.EJ().TreeMap("container").
.Levels(l1=>
{l1.GroupBackground("white")
}) 		Property: levels.fill

@Html.EJS().TreeMap("container")
.Levels(
l1=> l1.Fill('white')
).Render();
Level Border Color Property: levels.groupBorderColor

@(Html.EJ().TreeMap("container")
.Levels(l1=>
l1.GroupBorderColor("#58585B") {
}) 		Property: levels.border.color
@Html.EJS().TreeMap("container")
.Levels(
l1=>l1.Border(new TreeMapBorder{color ='black'})
).Render();
Level Border Width Property: levels.groupBorderThickness

@(Html.EJ().TreeMap("container").
.Levels(l1=>
{l1.GroupBorderThickness(2)
}) 		Property: levels.border.width

@Html.EJS().TreeMap("container")
.Levels(
l1=>l1.Border(new TreeMapBorder{width =0.5})
).Render();
Group Gap Property: levels.groupGap

@(Html.EJ().TreeMap("container").
.Levels(l1=>
{l1.groupGap(2)
}) 		Property: levels.groupGap

@Html.EJS().TreeMap("container")
.Levels(
l1=>l1.GroupGap(2)
).Render();
Group Padding Property: levels.groupPadding

@(Html.EJ().TreeMap("container").
.Levels(l1=>
l1.GroupPadding(1){
}) 		Property: levels.groupPadding
@Html.EJS().TreeMap("container")
.Levels(
l1=> l1.GroupPadding(1)
).Render();
Group Path Property: levels.groupPath

@(Html.EJ().TreeMap("container").
.Levels(l1=>
{l1.GroupPath("pathname")
}) 		Property: levels.groupPath

@Html.EJS().TreeMap("container")
.Levels(
l1=>l1.GroupPath("pathname")
).Render();
Height of Header Level Property: levels.headerHeight

@(Html.EJ().TreeMap("container").
.Levels(l1=>
{l1.HeaderHeight(20)
}) 		Property: levels.headerHeight

@Html.EJS().TreeMap("container")
.Levels(
l1=>l1.HeaderHeight(20)
).Render();
Header Template Property: levels.headerTemplate

@(Html.EJ().TreeMap("container").
.Levels(l1=>
{l1.HeaderTemplate("template")
}) 		Property: levels.headerTemplate

@Html.EJS().TreeMap("container")
.Levels(
l1=> l1.HeaderTemplate("template")
).Render();
Opacity of Color Not Applicable Property: levels.opacity

@Html.EJS().TreeMap("container")
.Levels(
l1=>l1.Opacity(0.5)
).Render();
Header Visibility Property: levels.showHeader

@(Html.EJ().TreeMap("container").
.Levels(l1=>
{l1.ShowHeader(false)
}) 		Property: levels.showHeader

@Html.EJS().TreeMap("container")
.Levels(
l1=>l1.ShowHeader(false)
).Render();
Template Position Property: levels.labelPosition

@(Html.EJ().TreeMap("container").
.Levels(l1=>
{l1.labelPosition("topleft")
}) 		Property: levels.templatePosition

@Html.EJS().TreeMap("container")
.Levels(
l1=>l1.TemplatePosition('Center')
).Render();
Header Style Not Applicable Property: levels.headerStyle

@Html.EJS().TreeMap("container")
.Levels(
l1=>l1.HeaderStyle(new TreeMapFont {
Color= 'red', Size= '16px', Opacity= 0.7 })
).Render();
Header Format Not Applicable Property: levels.headerFormat

@Html.EJS().TreeMap("container")
.Levels(
l1=>l1.HeaderFormat('${Continent}')
).Render();
Header Alignment Not Applicable Property: levels.headerAlignment

@Html.EJS().TreeMap("container")
.Levels(
l1=> l1.HeaderAlignment('Center')
).Render();

Selection

Behavior API in Essential® JS 1 API in Essential® JS 2
Selection Property: selectionMode

@(Html.EJ().TreeMap("container").
.selectionMode("default")) 		Property: selectionSettings.mode

@Html.EJS().TreeMap("container")
.SelectionSettings(
selectionSettings=>
selectionSettings.Enable(true).Mode('Item')
).Render();
Selection Color Not Applicable Property: selectionSettings.fill

@Html.EJS().TreeMap("container")
.SelectionSettings(
selectionSettings=>
selectionSettings.Enable(true).Fill('blue')
).Render();
Selection Color Opacity Not Applicable Property: selectionSettings.opacity

@Html.EJS().TreeMap("container")
.SelectionSettings(
selectionSettings=>
selectionSettings.Enable(true)
.Opacity('0.5')
).Render();
Border for selection Not Applicable Property: selectionSettings.border

@Html.EJS().TreeMap("container")
.SelectionSettings(
selectionSettings=>
selectionSettings.Enable(true).Border(new TreeMapBorder{
Color= 'red', Width=2 })
).Render();

Hightlight

Behavior API in Essential® JS 1 API in Essential® JS 2
Highlight Group Selection Mode Property: highlightGroupOnSelection

@(Html.EJ().TreeMap("container")
.highlightGroupOnSelection(true)) 		Property: highlightSettings.mode

@Html.EJS().TreeMap("container")
HighlightSettings
(highlight =>
highlight.Enable(true)
.Mode('All')
).Render();
Highlight Selection Mode Property: highlightOnSelection

@(Html.EJ().TreeMap("container")
.highlightOnSelection(true) 		Property: highlightSettings.mode

@Html.EJS().TreeMap("container")
HighlightSettings
(highlight =>
highlight.Enable(true)
Mode('Item')
).Render();
Highlight Group Border Color Property: highlightGroupBorderBrush

@(Html.EJ().TreeMap("container")
.highlightGroupBorderBrush('gray') 		Property: highlightSettings.border.color

@Html.EJS().TreeMap("container")
HighlightSettings
(highlight =>
highlight.Enable(true)
.Mode('All')
.Border(new TreeMapBorder
{color="red"}).Render();
Highlight Group Border Width Property: highlightGroupBorderThickness

@(Html.EJ().TreeMap("container")
.highlightGroupBorderThickness(3) 		Property: highlightSettings.border.width

@Html.EJS().TreeMap("container")
HighlightSettings
(highlight =>
highlight.Enable(true)
).Mode('All')
.Border(new TreeMapBorder
{Width=0.8}).Render();
Highlight Color Not Applicable Property: highlightSettings.fill

@Html.EJS().TreeMap("container")
HighlightSettings
(highlight =>
highlight.Enable(true)
.Fill('red')
).Render();
Highlight Color Opacity Not Applicable Property: highlightSettings.opacity

@Html.EJS().TreeMap("container")
HighlightSettings
(highlight =>
highlight.Enable(true)
Fill('red')
.Opacity(0.5)).Render();

Range ColorMapping

Behavior API in Essential® JS 1 API in Essential® JS 2
From value Property: rangeColorMapping.from

@(Html.EJ().TreeMap("container")
.TreeMapRangeColorMappings(
cm =>cm.From(1000)
)) 		Property: leafItemSettings.colorMapping.from

@Html.EJS().TreeMap("container")
.Load("load").Render();
function load(args)
{args.treemap.leafItemSettings
.colorMapping[0] =
{
from:1000}
}
To value Property: rangeColorMapping.to

@(Html.EJ().TreeMap("container")
.TreeMapRangeColorMappings(
cm =>cm.To(1000)
)) 		Property: leafItemSettings.colorMapping.to

@Html.EJS().TreeMap("container")
.Load("load").Render();
function load(args)
{args.treemap.leafItemSettings
.colorMapping[0] =
{
to:10000}
}
Color Property: rangeColorMapping.color

@(Html.EJ().TreeMap("container")
.TreeMapRangeColorMappings(
cm =>cm.Color('red')
)) 		Property: leafItemSettings.colorMapping.color

@Html.EJS().TreeMap("container")
.Load("load").Render();
function load(args)
{args.treemap.leafItemSettings
.colorMapping[0] =
{
color:'red'}
}
Legend Label Property: rangeColorMapping.legendLabel

@(Html.EJ().TreeMap("container")
.TreeMapRangeColorMappings(
cm =>cm.LegendLabel("Growth")
)) 		Property: leafItemSettings.colorMapping.label
@Html.EJS().TreeMap("container")
.Load("load").Render();
function load(args)
{args.treemap.leafItemSettings
.colorMapping[0] =
{
label: "Growth"}
}

Desaturation ColorMapping

Behavior API in Essential® JS 1 API in Essential® JS 2
From value Property: desaturationColorMapping.from

@(Html.EJ().TreeMap("container")
.TreeMapDesaturationColorMapping(
cm =>
cm.From(1))) 		Property: leafItemSettings.colorMapping.from

@Html.EJS().TreeMap("container")
.Load("load").Render();
function load(args)
{args.treemap.leafItemSettings
.colorMapping[0] =
{
from:1000
} }
To value Property: desaturationColorMapping.to

@(Html.EJ().TreeMap("container")
.TreeMapDesaturationColorMapping(
cm =>
cm.To(0.2))) 		Property: leafItemSettings.colorMapping.to

@Html.EJS().TreeMap("container")
.Load("load").Render();
function load(args)
{args.treemap.leafItemSettings
.colorMapping[0] =
{
to:10000
} }
Color Property: desaturationColorMapping.color

@(Html.EJ().TreeMap("container")
.TreeMapDesaturationColorMapping(
cm =>
cm.color('red'))) 		Property: leafItemSettings.colorMapping.color

@Html.EJS().TreeMap("container")
.Load("load").Render();
function load(args)
{args.treemap.leafItemSettings
.colorMapping[0] =
{
color:'red'
} }
Value Not Applicable Property: leafItemSettings.colorMapping.value
@Html.EJS().TreeMap("container")
.Load("load").Render();
function load(args)
{args.treemap.leafItemSettings
.colorMapping[0] =
{
value: "Population"
} }
Minimum Opacity Not Applicable Property: leafItemSettings.colorMapping.minOpacity

@Html.EJS().TreeMap("container")
.Load("load").Render();
function load(args)
{args.treemap.leafItemSettings
.colorMapping[0] =
{
minOpacity: 0.7
} }
Maximum Opacity Not Applicable Property: leafItemSettings.colorMapping.maxOpacity

@Html.EJS().TreeMap("container")
.Load("load").Render();
function load(args)
{args.treemap.leafItemSettings
.colorMapping[0] =
{
maxOpacity: 0.7}
}

Tooltip

Behavior API in Essential® JS 1 API in Essential® JS 2
Tooltip Property: showTooltip
@(Html.EJ().TreeMap("container")
.ShowTooltip(true)) 		Property: tooltipSettings.visible

@Html.EJS().TreeMap("container")
.TooltipSettings(new TreeMapTooltipSettings{Visible =true}
).Render();
Tooltip Template Property: tooltipTemplate

@(Html.EJ().TreeMap("container")
.ShowTooltip(true)
.TooltipTemplate("template")) 		Property: tooltipSettings.template

@Html.EJS().TreeMap("container")
.TooltipSettings(new TreeMapTooltipSettings{
Visible =true,
template='template'}
).Render();
Tooltip Border Not Applicable Property: tooltipSettings.border

@Html.EJS().TreeMap("container")
.TooltipSettings(new TreeMapTooltipSettings{
Visible=true,
Border=(new TreemapBorder{Color='red'}) }
).Render();
Tooltip Color Not Applicable Property: tooltipSettings.fill

@Html.EJS().TreeMap("container")
.TooltipSettings(new TreeMapTooltipSettings{
Visible =true , Fill='red'}
).Render();
Tooltip Format Not Applicable Property: tooltipSettings.format

@Html.EJS().TreeMap("container")
.TooltipSettings(new TreeMapTooltipSettings{
Visible =true, Format='${Population}'}
).Render();
Tooltip Marker Shape Not Applicable Property: tooltipSettings.markerShapes

@Html.EJS().TreeMap("container")
.TooltipSettings(new TreeMapTooltipSettings{
Visible =true, MarkerShapes='Circle' }
).Render();
Tooltip Color Opacity Not Applicable Property: tooltipSettings.opacity

@Html.EJS().TreeMap("container")
.TooltipSettings(new TreeMapTooltipSettings{
Visible =true, Opacity: 0.5 }
).Render();
Tooltip Text Style Not Applicable Property: tooltipSettings.textStyle

@Html.EJS().TreeMap("container")
.TooltipSettings(new TreeMapTooltipSettings {
Visible =true
TextStyle=(new TreeMapFont { Color= 'red', Opacity=0.5, Size= '12px' })}).Render();

Drilldown

Behavior API in Essential® JS 1 API in Essential® JS 2
Drilldown Property: enableDrillDown
@(Html.EJ().TreeMap("container")
.EnableDrillDown(true)) 		Property: enableDrillDown

@Html.EJS().TreeMap("container")
.EnableDrillDown(true).Render();
Drilldown Level Property: drillDownLevel
@(Html.EJ().TreeMap("container")
.DrillDownLevel(1)) 		Property: InitialDrillSettings.groupIndex

@Html.EJS().TreeMap("container")
.EnableDrillDown(true)
InitialDrillDown
(new TreeMapInitialDrillSettings
{ GroupIndex =1}).Render();

Methods

Behavior API in Essential® JS 1 API in Essential® JS 2
Treemap Refresh Method Method: refresh

var treemap =
  $("#container").ejTreeMap("instance");
treemap.refresh(); 		Method: refresh

var treemap =
  document.getElementById('container').ej2_instances[0];
treemap.refresh();
Method to Drilldown Method: drillDown

var treemap =
  $("#container").ejTreeMap("instance");
treemap.drillDown(); 		Not Applicable
Append to Method Not Applicable Method: appendTo

var treemap =
  document.getElementById('container').ej2_instances[0];
treemap.appendTo();
Add Event Listener Method Not Applicable Method: addEventListener

var treemap =
  document.getElementById('container').ej2_instances[0];
treemap.addEventListener();
Treemap Destroy Method Not Applicable Method: destroy

var treemap =
  document.getElementById('container').ej2_instances[0];
treemap.destroy();
Treemap Exporting Method Not Applicable Method: export

var treemap =
  document.getElementById('container').ej2_instances[0];
treemap.export();
Get the Module Name Not Applicable Method: getModuleName

var treemap =
  document.getElementById('container').ej2_instances[0];
treemap.getModuleName();
Printing the Treemap Not Applicable Method: print

var treemap =
  document.getElementById('container').ej2_instances[0];
treemap.print();
Resizing the Treemap Not Applicable Method: resizeOnTreeMap

var treemap =
  document.getElementById('container').ej2_instances[0];
treemap.resizeOnTreeMap();
Inject Method (Tooltip) Not Applicable Method: resizeOnTreeMap

TreeMap.Inject(TreeMapTooltip);
var treemap =
  document.getElementById('container').ej2_instances[0];
treemap.resizeOnTreeMap();
Remove Event Listener Method Not Applicable Method: removeEventListener

var treemap =
  document.getElementById('container').ej2_instances[0];
treemap.removeEventListener();

Events

Behavior API in Essential® JS 1 API in Essential® JS 2
Treemap Load Event Not Applicable Event: load

@Html.EJS().TreeMap("container")
. Load(" load").Render();
function itemMove(args)
{
}
Treemap Loaded Event Not Applicable Event: loaded

@Html.EJS().TreeMap("container")
.Loaded("load").Render();
function load(args)
{
}
Event Before Print Not Applicable Event: beforePrint

@Html.EJS().TreeMap("container")
.BeforePrint("beforePrint").Render();
function beforePrint(args)
{
}
Click Event Event: click

@(Html.EJ().TreeMap("container")
.Click("click"))
<script>
function click(args)
{
} 		Event: click

@Html.EJS().TreeMap("container")
.Click("click").Render();
function click(args)
{
}
Drill Start Event Event: drillStarted

@(Html.EJ().TreeMap("container")
.DrillStarted("drillStarted"))
<script>
function drillStarted(args)
{
} 		Event: drillStart

@Html.EJS().TreeMap("container")
.DrillStart("drillStart").Render();
function drillStart(args)
{
}
Drill End Event Not Applicable Event: drillEnd

@Html.EJS().TreeMap("container")
.DrillEnd("drillEnd").Render();
function drillEnd(args)
{
}
Event on Item Click Not Applicable Event: itemClick

@Html.EJS().TreeMap("container")
.ItemClick("itemClick").Render();
function itemClick(args)
{
}
Event Before Print Not Applicable Event: beforePrint

@Html.EJS().TreeMap("container")</br>.BeforePrint("beforePrint").Render();
function beforePrint(args)
{
}
Click Event Event: click

@(Html.EJ().TreeMap("container")
.Click("click"))</br><script></br>function click(args)</br>{</br>} 		Event: click

@Html.EJS().TreeMap("container")</br>.Click("click").Render();
function click(args)
{
}
Drill Start Event Event: drillStarted

@(Html.EJ().TreeMap("container")
.DrillStarted("drillStarted"))</br>function drillStarted(args)</br>{} 		Event: drillStart

@Html.EJS().TreeMap("container")</br>.DrillStart("drillStart").Render();
function drillStart(args)
{
}
Drill End Event Not Applicable Event: drillEnd

@Html.EJS().TreeMap("container")</br>.DrillEnd("drillEnd").Render();
function drillEnd(args)
{
}
Event on Item Click Not Applicable Event: itemClick

@Html.EJS().TreeMap("container").ItemClick("itemClick").Render();
function itemClick(args)
{
}
Treemap Item Select Event Event: treeMapItemSelected

@(Html.EJ().TreeMap("container")
.TreeMapItemSelected("treeMapItemSelected"))
function treeMapItemSelected(args)</br>{ </br> } 		Event: itemSelected

@Html.EJS().TreeMap("container")
.ItemSelected("itemSelected").Render();
function itemSelected(args)
{
}