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: dataSource<EJ.TreeMap id="treemap" dataSource={[{State:"United States", GDP:17946, percentage:11.08, Rank:1}]} weightValuePath='GDP' leafItemSettings={leaf}></EJ.TreeMap> var leaf={labelPath: 'State'} |
Property: dataSource<TreeMapComponent id="treemap" dataSource={[{State:"United States", GDP:17946, percentage:11.08, Rank:1}]} weightValuePath='GDP' leafItemSettings={labelPath: 'State'}></TreeMapComponent>, |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Layout | Property: itemsLayoutMode<EJ.TreeMap id="treemap" itemsLayoutMode= "sliceanddiceauto"></EJ.TreeMap> |
Property: layoutType<TreeMapComponent id="treemap" layoutType= 'SliceAndDiceAuto'></TreeMapComponent> |
Weight Value Path | Property: weightValuePath<EJ.TreeMap id="treemap" weightValuePath= "Population" ></EJ.TreeMap> |
Property: weightValuePath<TreeMapComponent id="treemap" weightValuePath= 'Population'></TreeMapComponent> |
Range Color Value Path | Property: colorValuePath<EJ.TreeMap id="treemap" colorValuePath= "Continent"></EJ.TreeMap> |
Property: rangeColorValuePath<TreeMapComponent id="treemap" rangeColorValuePath= 'Continent' ></TreeMapComponent> |
Equal Color Value Path | Not Applicable | Property: equalColorValuePath<TreeMapComponent id="treemap" equalColorValuePath= 'Asia' ></TreeMapComponent> |
Height | Property: height<EJ.TreeMap id="treemap" height= 50 ></EJ.TreeMap> |
Property: height<TreeMapComponent id="treemap" height= '50px' ></TreeMapComponent> |
Width | Property: width<EJ.TreeMap id="treemap" width= 400></EJ.TreeMap> |
Property: width<TreeMapComponent id="treemap" width='400px' ></TreeMapComponent> |
Theme | Not Applicable | Property: theme<TreeMapComponent id="treemap" theme= 'Highcontrast' ></TreeMapComponent> |
Localization | Property: locale<EJ.TreeMap id="treemap" locale= "en-US"></EJ.TreeMap> |
Property: locale<TreeMapComponent id="treemap" locale='en-US' ></TreeMapComponent> |
Palette Colors | Property: paletteColorMapping.colors<EJ.TreeMap id="treemap" paletteColorMapping="paletteColorMapping"></EJ.TreeMap> var paletteColorMapping={ colors: ['red','green'] } |
Property: palette<TreeMapComponent palette={['#C33764', '#AB3566']} id="treemap" ></TreeMapComponent> |
Margin | Not Applicable | Property: margin<TreeMapComponent id="treemap" ></TreeMapComponent> |
Resize | Property: enableResize<EJ.TreeMap id="treemap" enableResize: true></EJ.TreeMap> |
Not Applicable |
Responsive | Property: isResponsive<EJ.TreeMap id="treemap" isResponsive= 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" leafItemSettings ={leafItem} showLabels={true}></EJ.TreeMap> var leafItem={borderBrush: "blue" } |
Property: leafItemSettings.border<TreeMapComponent id="treemap" leafItemSettings={ border: { color: 'white' } }></TreeMapComponent> |
Border Width | Property: leafItemSettings.borderThickness<EJ.TreeMap id="treemap" leafItemSettings ={leafItem} showLabels={true}></EJ.TreeMap> var leafItem={ borderThickness: 5} |
Property: leafItemSettings.border<TreeMapComponent id="treemap" leafItemSettings={ border: { width: 5 } }></TreeMapComponent> |
Gap Value | Property: leafItemSettings.gap<EJ.TreeMap id="treemap" leafItemSettings ={leafItem} showLabels={true}></EJ.TreeMap> var leafItem={ gap: 5} |
Property: leafItemSettings.gap<TreeMapComponent id="treemap" leafItemSettings={ gap: 5 }></TreeMapComponent> |
Leaf Item Label | Property: leafItemSettings.itemTemplate<EJ.TreeMap id="treemap" leafItemSettings ={leafItem} showLabels={true}></EJ.TreeMap> var leafItem={ itemTemplate: "template"} |
Property: leafItemSettings.labelTemplate<TreeMapComponent id="treemap" leafItemSettings={ labelTemplate: 'template' }></TreeMapComponent> |
Leaf Label Path | Property: leafItemSettings.labelPath<EJ.TreeMap id="treemap" leafItemSettings ={leafItem} showLabels={true}></EJ.TreeMap> var leafItem={ labelPath: "GameName" } |
Property: leafItemSettings.labelPath<TreeMapComponent id="treemap" leafItemSettings={ labelPath: 'GameName' }></TreeMapComponent> |
Leaf Label Position | Property: leafItemSettings.labelPosition<EJ.TreeMap id="treemap" leafItemSettings ={leafItem} showLabels={true}></EJ.TreeMap> var leafItem={ labelPosition: "topcenter"} |
Property: leafItemSettings.labelPosition<TreeMapComponent id="treemap" leafItemSettings={ labelPosition: 'Center' }></TreeMapComponent> |
Leaf Label Color | Not Applicable | Property: leafItemSettings.fill<TreeMapComponent id="treemap" leafItemSettings={ fill: 'red'}></TreeMapComponent> |
Random Colors | Not Applicable | Property: leafItemSettings.autoFill<TreeMapComponent id="treemap" leafItemSettings={ autoFill: true }></TreeMapComponent> |
Format | Not Applicable | Property: leafItemSettings.labelFormat<TreeMapComponent id="treemap" leafItemSettings={ labelFormat: '${Continent}-${Population}' }></TreeMapComponent> |
Labels Visibility | Property: leafItemSettings.showLabels<EJ.TreeMap id="treemap" showLabels={true}></EJ.TreeMap> |
Property: leafItemSettings.showLabels<TreeMapComponent id="treemap" leafItemSettings={ showLabels: false }></TreeMapComponent> |
Opacity | Not Applicable | Property: *leafItemSettings.opacity *<TreeMapComponent id="treemap" leafItemSettings={ opacity: 0.7 }></TreeMapComponent> |
Padding | Not Applicable | Property: *leafItemSettings.padding *<TreeMapComponent id="treemap" leafItemSettings={ padding: 5}></TreeMapComponent> |
Font Customization | Not Applicable | Property: leafItemSettings.labelStyle<TreeMapComponent id="treemap" leafItemSettings={ labelStyle: { size: '12px', color: 'red', opacity: 0.5 } }></TreeMapComponent> |
Position of Template | Not Applicable | Property: leafItemSettings.templatePosition<TreeMapComponent id="treemap" leafItemSettings={ templatePosition: 'Center'}></TreeMapComponent> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Legend Alignment | Property: legendSettings.alignment<EJ.TreeMap id="treemap" legendSettings = {legend} ></EJ.TreeMap> var legend={ alignment: "far" } |
Property: legendSettings.alignment <TreeMapComponent id="treemap" legendSettings={alignment: 'Near' }></TreeMapComponent> |
Legend Visibility | Property: showLegend<EJ.TreeMap id="treemap" legendSettings = {legend} ></EJ.TreeMap> var legend={ showLegend: false } |
Property: legendSettings.visible<TreeMapComponent id="treemap" legendSettings={visible: true }></TreeMapComponent> |
Legend Position | Property: legendSettings.dockPosition<EJ.TreeMap id="treemap" legendSettings = {legend} ></EJ.TreeMap> var legend={ dockPosition: "bottom" } |
Property: legendSettings.position<TreeMapComponent id="treemap" legendSettings={ position: 'Top' }></TreeMapComponent> |
Legend Height | Property: legendSettings.height<EJ.TreeMap id="treemap" legendSettings = {legend} ></EJ.TreeMap> var legend={ height: 40} |
Property: legendSettings.height<TreeMapComponent id="treemap" legendSettings={ height: '40px' }></TreeMapComponent> |
Legend Width | Property: legendSettings.width<EJ.TreeMap id="treemap" legendSettings = {legend} ></EJ.TreeMap> var legend={ width: 100} |
Property: legendSettings.width<TreeMapComponent id="treemap" legendSettings={ width: '100px' }</TreeMapComponent> |
Shape Height | Property: legendSettings.iconHeight<EJ.TreeMap id="treemap" legendSettings = {legend} ></EJ.TreeMap> var legend={ iconHeight: 15 } |
Property: legendSettings.shapeHeight<TreeMapComponent id="treemap" legendSettings={ shapeHeight: '40px' }></TreeMapComponent> |
Shape Width | Property: legendSettings.iconWidth<EJ.TreeMap id="treemap" legendSettings = {legend} ></EJ.TreeMap> var legend={iconWidth: 8 } |
Property: legendSettings.shapeWidth<TreeMapComponent id="treemap" legendSettings={shapeWidth: '40px' }></TreeMapComponent> |
Padding | Not Applicable | Property: legendSettings.shapePadding<TreeMapComponent id="treemap" legendSettings={ shapePadding: 10}></TreeMapComponent> |
Legend Title | Property: legendSettings.title<EJ.TreeMap id="treemap" legendSettings = {legend} ></EJ.TreeMap> var legend={ iconWidth: 8 } |
Property: legendSettings.title<TreeMapComponent id="treemap" legendSettings={title: 'Legend' }></TreeMapComponent> |
Legend Shape | Not Applicable | Property: legendSettings.shape<TreeMapComponent id="treemap" legendSettings={shape: 'Rectangle' }></TreeMapComponent> |
Legend Mode | Property: legendSettings.mode<EJ.TreeMap id="treemap" legendSettings = {legend} ></EJ.TreeMap> var legend={ mode: "interactive"} |
Property: legendSettings.mode<TreeMapComponent id="treemap" legendSettings={ mode: 'Interactive' }></TreeMapComponent> |
Legend Text Customization | Not Applicable | Property: legendSettings.textStyle<TreeMapComponent id="treemap" legendSettings={textStyle: { size: '10px', opacity: 0.5, color: 'red' } }></TreeMapComponent> |
Legend Title Customization | Not Applicable | Property: legendSettings.titleStyle<TreeMapComponent id="treemap" legendSettings={ titleStyle: { size: '10px', opacity: 0.5, color: 'red' } }></TreeMapComponent> |
Legend Shape Border | Not Applicable | Property: legendSettings.shapeBorder<TreeMapComponent id="treemap" legendSettings={shapeBorder: { width: 2, color: 'red' } }></TreeMapComponent> |
Legend Template | Property: legendSettings.template<EJ.TreeMap id="treemap" legendSettings = {legend} ></EJ.TreeMap> var legend={ template: "template" } |
Not Applicable |
Left Label | Property: legendSettings.leftLabel<EJ.TreeMap id="treemap" legendSettings = {legend} ></EJ.TreeMap> var legend={ mode: "interactive", leftLabel: "10Million" } |
Not Applicable |
Right Label | Property: legendSettings.rightLabel<EJ.TreeMap id="treemap" legendSettings = {legend} ></EJ.TreeMap> var legend={ mode: "interactive", rightLabel: "100Million"} |
Not Applicable |
Legend Shape Image | Not Applicable | Property: legendSettings.imageUrl<TreeMapComponent id="treemap" legendSettings={ imageUrl: "image.png" }></TreeMapComponent> |
Position in Interactive Legend | Not Applicable | Property: legendSettings.labelPosition<TreeMapComponent id="treemap" legendSettings={labelPosition: "Center" }></TreeMapComponent> |
Legend Location | Not Applicable | Property: legendSettings.location<TreeMapComponent id="treemap" legendSettings={ location: { x: 10, y: 20 } }></TreeMapComponent> |
Legend Orientation | Not Applicable | Property: legendSettings.orientation<TreeMapComponent id="treemap" legendSettings={orientation: "Horizontal" }></TreeMapComponent> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Random Colors | Not Applicable | Property: levels.autoFill<TreeMapComponent id="treemap"><LevelsDirective><LevelDirective autoFill=true></LevelDirective></LevelsDirective></TreeMapComponent> |
Level Background Color | Property: levels.groupBackground<EJ.TreeMap id="treemap" levels = {levels}></EJ.TreeMap> var levels=[groupBackground: "white" ] |
Property: levels.fill<TreeMapComponent id="treemap"><LevelsDirective><LevelDirective fill= 'white'></LevelDirective></LevelsDirective></TreeMapComponent> |
Level Border Color | Property: levels.groupBorderColor<EJ.TreeMap id="treemap" levels = {levels}></EJ.TreeMap> var levels=[groupBorderColor: "#58585B" ] |
Property: levels.border.color<TreeMapComponent id="treemap"><LevelsDirective><LevelDirective border= { color: "#58585B" } ></LevelDirective></LevelsDirective></TreeMapComponent> |
Level Border Width | Property: levels.groupBorderThickness<EJ.TreeMap id="treemap" levels = {levels}></EJ.TreeMap> var levels=[groupBorderThickness: 2 ] |
Property: levels.border.width<TreeMapComponent id="treemap"><LevelsDirective><LevelDirective border= { width: 2 }></LevelDirective></LevelsDirective></TreeMapComponent> |
Group Gap | Property: levels.groupGap<EJ.TreeMap id="treemap" levels = {levels}></EJ.TreeMap> var levels=[groupGap: 2 ] |
Property: levels.groupGap<TreeMapComponent id="treemap"><LevelsDirective><LevelDirective groupGap= 2></LevelDirective></LevelsDirective></TreeMapComponent> |
Group Padding | Property: levels.groupPadding<EJ.TreeMap id="treemap" levels = {levels}></EJ.TreeMap> var levels=[groupPadding: 1 ] |
Property: levels.groupPadding<TreeMapComponent id="treemap"><LevelsDirective><LevelDirective groupPadding={1} ></LevelDirective></LevelsDirective></TreeMapComponent> |
Group Path | Property: levels.groupPath<EJ.TreeMap id="treemap" levels = {levels}></EJ.TreeMap> var levels=[groupPath: "pathname" ] |
Property: levels.groupPath<TreeMapComponent id="treemap"><LevelsDirective><LevelDirective groupPath= 'pathname'></LevelDirective></LevelsDirective></TreeMapComponent> |
Height of Header Level | Property: levels.headerHeight<EJ.TreeMap id="treemap" levels = {levels}></EJ.TreeMap> var levels=[ headerHeight: 20 ] |
Property: levels.headerHeight<TreeMapComponent id="treemap"><LevelsDirective><LevelDirective headerHeight={20} ></LevelDirective></LevelsDirective></TreeMapComponent> |
Header Template | Property: levels.headerTemplate<EJ.TreeMap id="treemap" levels = {levels}></EJ.TreeMap> var levels=[ headerTemplate: "template" ] |
Property: levels.headerTemplate<TreeMapComponent id="treemap"><LevelsDirective><LevelDirective headerTemplate= 'template' ></LevelDirective></LevelsDirective></TreeMapComponent> |
Opacity of Color | Not Applicable | Property: levels.opacity<TreeMapComponent id="treemap"><LevelsDirective><LevelDirective opacity={0.5}></LevelDirective></LevelsDirective></TreeMapComponent> |
Header Visibility | Property: levels.showHeader<EJ.TreeMap id="treemap" levels = {levels}></EJ.TreeMap> var levels=[showHeader: false ] |
Property: levels.showHeader<TreeMapComponent id="treemap"><LevelsDirective><LevelDirective showHeader={false}></LevelDirective></LevelsDirective> </TreeMapComponent> |
Template Position | Property: levels.labelPosition<EJ.TreeMap id="treemap" levels = {levels}></EJ.TreeMap> var levels=[ labelPosition: "topleft" ] |
Property: levels.templatePosition<TreeMapComponent id="treemap"><LevelsDirective><LevelDirective templatePosition= 'Center' ></LevelDirective></LevelsDirective></TreeMapComponent> |
Header Style | Not Applicable | Property: levels.headerStyle<TreeMapComponent id="treemap"><LevelsDirective><LevelDirective headerStyle= { color: 'red', size: '16px', opacity: 0.7 } ></LevelDirective></LevelsDirective></TreeMapComponent> |
Header Format | Not Applicable | Property: levels.headerFormat<TreeMapComponent id="treemap"><LevelsDirective><LevelDirective headerFormat= '${Continent}' ></LevelDirective></LevelsDirective></TreeMapComponent> |
Header Alignment | Not Applicable | Property: levels.headerAlignment<TreeMapComponent id="treemap"><LevelsDirective><LevelDirective headerAlignment= 'Center' ></LevelDirective></LevelsDirective></TreeMapComponent> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Selection | Property: selectionMode<EJ.TreeMap id="treemap" selectionMode="default"> </EJ.TreeMap> |
Property: selectionSettings.mode<TreeMapComponent id="treemap" selectionSettings={ enable: true, mode: 'Item'}></TreeMapComponent> <Inject services={[TreeMapSelection]}/> |
Selection Color | Not Applicable | Property: selectionSettings.fill<TreeMapComponent id="treemap" selectionSettings={ enable: true, fill: 'blue' }></TreeMapComponent> <Inject services={[TreeMapSelection]}/> |
Selection Color Opacity | Not Applicable | Property: selectionSettings.opacity<TreeMapComponent id="treemap" selectionSettings={ enable: true, fill: 'blue', opacity: 0.6}></TreeMapComponent> <Inject services={[TreeMapSelection]}/> |
Border for selection | Not Applicable | Property: selectionSettings.border<TreeMapComponent id="treemap" selectionSettings={ border: { color: 'red', width: 2 } }></TreeMapComponent> <Inject services={[TreeMapSelection]}/> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Highlight Group Selection Mode | Property: highlightGroupOnSelection<EJ.TreeMap id="treemap" highlightGroupOnSelection= {true} ></EJ.TreeMap> |
Property: highlightSettings.mode<TreeMapComponent id="treemap" highlightSettings={ enable: true, mode: 'All'}></TreeMapComponent> <Inject services={[TreeMapHighlight]}/> |
Highlight Selection Mode | Property: highlightOnSelection<EJ.TreeMap id="treemap" highlightOnSelection= {true}></EJ.TreeMap> |
Property: highlightSettings.mode<TreeMapComponent id="treemap" highlightSettings={enable: true, mode: 'Item' }></TreeMapComponent> <Inject services={[TreeMapHighlight]}/> |
Highlight Group Border Color | Property: highlightGroupBorderBrush<EJ.TreeMap id="treemap" highlightGroupBorderBrush= 'gray'></EJ.TreeMap> |
Property: highlightSettings.border.color<TreeMapComponent id="treemap" highlightSettings={ enable: true, mode: 'All',border: { color: 'gray' } }></TreeMapComponent> <Inject services={[TreeMapHighlight]}/> |
Highlight Group Border Width | Property: highlightGroupBorderThickness<EJ.TreeMap id="treemap" highlightGroupBorderThickness= {3} ></EJ.TreeMap> |
Property: highlightSettings.border.width<TreeMapComponent id="treemap" highlightSettings={enable: true, mode: 'All', border: { width: 3 } }></TreeMapComponent> <Inject services={[TreeMapHighlight]}/> |
Highlight Selection Border Color | Property: highlightBorderBrush<EJ.TreeMap id="treemap" highlightBorderBrush= 'gray' ></EJ.TreeMap> |
Property: highlightSettings.border.color<TreeMapComponent id="treemap" highlightSettings={ enable: true, mode: 'Item', border: { color: 'gray' }}></TreeMapComponent> <Inject services={[TreeMapHighlight]}/> |
Highlight Selection Border Width | Property: highlightBorderThickness<EJ.TreeMap id="treemap" highlightBorderThickness= {3}></EJ.TreeMap> |
Property: highlightSettings.border.width<TreeMapComponent id="treemap" highlightSettings={ enable: true, mode: 'Item', border: { width: 3 } }></TreeMapComponent> <Inject services={[TreeMapHighlight]}/> |
Highlight Color | Not Applicable | Property: highlightSettings.fill<TreeMapComponent id="treemap" highlightSettings={ enable: true, fill: 'red' }></TreeMapComponent> <Inject services={[TreeMapHighlight]}/> |
Highlight Color Opacity | Not Applicable | Property: highlightSettings.opacity<TreeMapComponent id="treemap" highlightSettings={ enable: true, fill: 'red', opacity: 0.5 }></TreeMapComponent> <Inject services={[TreeMapHighlight]}/> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
From value | Property: rangeColorMapping.from<EJ.TreeMap id="treemap" rangeColorMapping="range"></EJ.TreeMap> var range=[{ from: 1000 } ] |
Property: leafItemSettings.colorMapping.from<TreeMapComponent id="treemap" leafItemSettings={colorMapping: [{ from: 1000 }] }></TreeMapComponent> |
To value | Property: rangeColorMapping.to<EJ.TreeMap id="treemap" rangeColorMapping="range"></EJ.TreeMap> var range=[{ to: 100000 } ] |
Property: leafItemSettings.colorMapping.to<TreeMapComponent id="treemap" leafItemSettings={ colorMapping: [{ to: 100000 }] }></TreeMapComponent> |
Color | Property: rangeColorMapping.color<EJ.TreeMap id="treemap" rangeColorMapping="range"></EJ.TreeMap> var range=[{ color: "#77D8D8" } ] |
Property: leafItemSettings.colorMapping.color<TreeMapComponent id="treemap" leafItemSettings={ colorMapping: [{ color: "#77D8D8" }] }></TreeMapComponent> |
Legend Label | Property: rangeColorMapping.legendLabel<EJ.TreeMap id="treemap" rangeColorMapping="range"></EJ.TreeMap> var range=[{ legendLabel: "Growth" } ] |
Property: leafItemSettings.colorMapping.label<TreeMapComponent id="treemap" leafItemSettings={ colorMapping: [{ label: "Growth" }] }></TreeMapComponent> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
From value | Property: desaturationColorMapping.from<EJ.TreeMap id="treemap" desaturationColorMapping="desaturation"> </EJ.TreeMap> var desaturation=[{ from: 1000 } ] |
Property: leafItemSettings.colorMapping.from<TreeMapComponent id="treemap" leafItemSettings={ colorMapping: [{ from: 1000 }] }></TreeMapComponent> |
To value | Property: desaturationColorMapping.to<EJ.TreeMap id="treemap" desaturationColorMapping="desaturation"> </EJ.TreeMap> var desaturation=[{ to: 10000 } ] |
Property: leafItemSettings.colorMapping.to<TreeMapComponent id="treemap" leafItemSettings={colorMapping: [{ to: 10000 }]}></TreeMapComponent> |
Color | Property: desaturationColorMapping.color<EJ.TreeMap id="treemap" desaturationColorMapping="desaturation"> </EJ.TreeMap> var desaturation=[{ color: "#77D8D8" } ] |
Property: leafItemSettings.colorMapping.color<TreeMapComponent id="treemap" leafItemSettings={colorMapping: [{ color: "#77D8D8" }] }></TreeMapComponent> |
Value | Not Applicable | Property: leafItemSettings.colorMapping.value<TreeMapComponent id="treemap" leafItemSettings={colorMapping: [{ value: "Population" }]}></TreeMapComponent> |
Minimum Opacity | Not Applicable | Property: leafItemSettings.colorMapping.minOpacity<TreeMapComponent id="treemap" leafItemSettings={colorMapping: [{ minOpacity: 0.7 }]}></TreeMapComponent> |
Maximum Opacity | Not Applicable | Property: leafItemSettings.colorMapping.maxOpacity<TreeMapComponent id="treemap" leafItemSettings={colorMapping: [{ maxOpacity: 1 }] }></TreeMapComponent> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Tooltip | Property: showTooltip<EJ.TreeMap id="treemap" showTooltip={true}></EJ.TreeMap> |
Property: tooltipSettings.visible<TreeMapComponent id="treemap" tooltipSettings={ visible: true}></TreeMapComponent> <Inject services={[TreeMapTooltip, TreeMapLegend]}/> |
Tooltip Template | Property: tooltipTemplate<EJ.TreeMap id="treemap" showTooltip={true} tooltipTemplate='template' ></EJ.TreeMap> |
Property: tooltipSettings.template<TreeMapComponent id="treemap" tooltipSettings={visible: true,template: 'template' }></TreeMapComponent> <Inject services={[TreeMapTooltip, TreeMapLegend]}/> |
Tooltip Border | Not Applicable | Property: tooltipSettings.border<TreeMapComponent id="treemap" tooltipSettings={visible: true,border: { color: 'red', width: 2 } }></TreeMapComponent> <Inject services={[TreeMapTooltip, TreeMapLegend]}/> |
Tooltip Color | Not Applicable | Property: tooltipSettings.fill<TreeMapComponent id="treemap" tooltipSettings={visible: true, fill: 'gray'}></TreeMapComponent> <Inject services={[TreeMapTooltip, TreeMapLegend]}/> |
Tooltip Format | Not Applicable | Property: tooltipSettings.format<TreeMapComponent id="treemap" tooltipSettings={visible: true, format: '${Population}'}></TreeMapComponent> <Inject services={[TreeMapTooltip, TreeMapLegend]}/> |
Tooltip Marker Shape | Not Applicable | Property: tooltipSettings.markerShapes<TreeMapComponent id="treemap" tooltipSettings={visible: true, markerShapes: 'Circle' }></TreeMapComponent> <Inject services={[TreeMapTooltip, TreeMapLegend]}/> |
Tooltip Color Opacity | Not Applicable | Property: tooltipSettings.opacity<TreeMapComponent id="treemap" tooltipSettings={visible: true,opacity: 0.5 }></TreeMapComponent> <Inject services={[TreeMapTooltip, TreeMapLegend]}/> |
Tooltip Text Style | Not Applicable | Property: tooltipSettings.textStyle<TreeMapComponent id="treemap" tooltipSettings={visible: true,textStyle: { Color: 'red', opacity: 0.5, size: '12px' }}></TreeMapComponent> <Inject services={[TreeMapTooltip, TreeMapLegend]}/> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Drilldown | Property: enableDrillDown<EJ.TreeMap id="treemap" enableDrillDown= {true} ></EJ.TreeMap> |
Property: enableDrillDown<TreeMapComponent id="treemap" enableDrillDown= {true}></TreeMapComponent> |
Drilldown Level | Property: drillDownLevel<EJ.TreeMap id="treemap" drillDownLevel= {1}></EJ.TreeMap> |
Property: InitialDrillSettings.groupIndex<TreeMapComponent id="treemap" InitialDrillSettings= { groupIndex: 1 }></TreeMapComponent> |
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: resizeOnTreeMap TreeMap.Inject(TreeMapTooltip); TreeMap.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<TreeMapComponent id="treemap" load={this.load.bind(this)}></TreeMapComponent> load(args){ } |
Treemap Loaded Event | Not Applicable | Event: loaded<TreeMapComponent id="treemap" loaded={this.loaded.bind(this)}></TreeMapComponent> loaded(args){ } |
Event Before Print | Not Applicable | Event: beforePrint<TreeMapComponent id="treemap" beforePrint={this.beforePrint.bind(this)}></TreeMapComponent> beforePrint(args){ } |
Click Event | Event: click<EJ.TreeMap id="treemap" click = {click}></EJ.TreeMap> function click(args){} |
Event: click<TreeMapComponent id="treemap" click={this.click.bind(this)}></TreeMapComponent> click(args){ } |
Drill Start Event | Event: drillStarted<EJ.TreeMap id="treemap" drillStarted = {drillStarted}></EJ.TreeMap> function drillStarted(args){} |
Event: drillStart<TreeMapComponent id="treemap" drillStart={this. drillStart.bind(this)}></TreeMapComponent> drillStart(args){ } |
Drill End Event | Not Applicable | Event: drillEnd<TreeMapComponent id="treemap" drillEnd={this.drillEnd.bind(this)}></TreeMapComponent> drillEnd(args){ } |
Event on Item Click | Not Applicable | Event: itemClick<TreeMapComponent id="treemap" itemClick={this. itemClick.bind(this)}></TreeMapComponent> itemClick(args){ } |
Treemap Item Select Event | Event: treeMapItemSelected<EJ.TreeMap id="treemap" treeMapItemSelected = {TreeMapItemSelected}></EJ.TreeMap> function treeMapItemSelected(args){} |
Event: itemSelected<TreeMapComponent id="treemap" itemSelected={this. itemSelected.bind(this)}></TreeMapComponent> itemSelected(args){ } |
Treemap Item Rendering Event | Event: itemRendering<EJ.TreeMap id="treemap" itemRendering = { itemRendering}></EJ.TreeMap> function itemRendering(args){} |
Event: itemRendering<TreeMapComponent id="treemap" itemRendering={this. itemRendering.bind(this)}></TreeMapComponent> itemRendering(args){ } |
Treemap Item Move Event | Not Applicable | Event: itemMove<TreeMapComponent id="treemap" itemMove={this.itemMove.bind(this)}></TreeMapComponent> itemMove(args){ } |
Treemap Item Highlight Event | Not Applicable | Event: itemHighlight<TreeMapComponent id="treemap" itemHighlight={this.itemHighlight.bind(this)}></TreeMapComponent> itemHighlight(args){ } |
Template Header Render Event | Event: headerTemplateRendering<EJ.TreeMap id="treemap" headerTemplateRendering = {headerTemplateRendering}></EJ.TreeMap> function headerTemplateRendering(args){} |
Not Applicable |
Drilldown Item Select Event | Event: drillDownItemSelected<EJ.TreeMap id="treemap" drillDownItemSelected = {drillDownItemSelected}></EJ.TreeMap> function drillDownItemSelected(args){} |
Not Applicable |
Refresh Event | Event: refreshed<EJ.TreeMap id="treemap" refreshed = {refreshed}></EJ.TreeMap> function refreshed(args){} |
Not Applicable |
Group Select Event | Event: treeMapGroupSelected<EJ.TreeMap id="treemap" treeMapGroupSelected = { treeMapGroupSelected}></EJ.TreeMap> function treeMapGroupSelected(args){} |
Not Applicable |
Mouse Event | Not Applicable | Event: mouseMove<TreeMapComponent id="treemap" mouseMove={this.mouseMove.bind(this)}></TreeMapComponent> mouseMove(args){ } |
Resize Event | Not Applicable | Event: resize<TreeMapComponent id="treemap" resize={this.resize.bind(this)}></TreeMapComponent> resize(args){ } |
Tooltip Render Event | Not Applicable | Event: tooltipRendering<TreeMapComponent id="treemap" tooltipRendering={this.tooltipRendering.bind(this)}></TreeMapComponent> tooltipRendering(args){ } |
Double Click Event | Event: doubleClick<EJ.TreeMap id="treemap" doubleClick = {doubleClick}></EJ.TreeMap> function doubleClick(args){} |
Not Applicable |
Right Click Event | Event: rightClick<EJ.TreeMap id="treemap" rightClick = {rightClick}></EJ.TreeMap> function rightClick(args){} |
Not Applicable |