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 Ts: @Component({templateUrl: <ej-treemap id="treemap" [dataSource]="datasource"></ej-treemap>})export class DefaultComponent {constructor(public treemapDataService: TreeMapDataService) {datasource:any= treemapDataService.getTreemapData();}} |
Property: dataSource Ts: @Component({templateUrl: <ejs-treemap id="treemap" [weightValuePath]='weightValuePath' [dataSource]="datasource"></ejs-treemap>})export class DefaultComponent {weightValuePath: string = 'Population';dataSource: object[] = [{ Continent: "Asia", population: 1749046000}];} |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Layout | Property: itemsLayoutMode<ej-treemap id="treemap" itemsLayoutMode= "sliceanddiceauto" ></ej-treemap> |
Property: layoutType<ejs-treemap id="treemap" layoutType='SliceAndDiceAuto'></ejs-treemap> |
| Weight Value Path | Property: weightValuePath<ej-treemap id="treemap" weightValuePath= "Population" ></ej-treemap> |
Property: weightValuePath<ejs-treemap id="treemap" weightValuePath= 'Population' ></ejs-treemap> |
| Range Color Value Path | Property: colorValuePath<ej-treemap id="treemap" colorValuePath= "Continent"></ej-treemap> |
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-treemap id="treemap" height= 50 ></ej-treemap> |
Property: height<ejs-treemap id="treemap" height='50px' ></ejs-treemap> |
| Width | Property: width<ej-treemap id="treemap" width= 400 ></ej-treemap> |
Property: width<ejs-treemap id="treemap" width= '400px' ></ejs-treemap> |
| Theme | Not Applicable | Property: theme<ejs-treemap id="treemap" theme= 'Highcontrast' ></ejs-treemap> |
| Localization | Property: locale<ej-treemap id="treemap" locale= "en-US"></ej-treemap> |
Property: locale<ejs-treemap id="treemap" locale= 'en-US' ></ejs-treemap> |
| Palette Colors | Property: paletteColorMapping.colors<ej-treemap id="treemap" [paletteColorMapping]= "paletteColorMapping"></ej-treemap>paletteColorMapping:any={ colors: ['red','green'] } |
Property: palette<ejs-treemap id="treemap" [palette]="palette"></ejs-treemap>palette: string[] =['red','green'] |
| Margin | Not Applicable | Property: margin<ejs-treemap id="treemap" [margin]="margin"></ejs-treemap>margin:object={ left: 5, top: 8 } |
| 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]="leaf"></ej-treemap>leaf: any={ showLabels: true, borderBrush: "blue" } |
Property: leafItemSettings.border<ejs-treemap id="treemap" [leafItemSettings]="leafItem" ></ejs-treemap>leafItem: object={border: { color: 'white' }} |
| Border Width | Property: leafItemSettings.borderThickness<ej-treemap id="treemap" [leafItemSettings]="leaf"></ej-treemap>leaf: any={showLabels: true,borderThickness: 5} |
Property: leafItemSettings.border<ejs-treemap id="treemap" [leafItemSettings]="leafItem" ></ejs-treemap>leafItem: object={border: { width: 5 } } |
| Gap Value | Property: leafItemSettings.gap<ej-treemap id="treemap" [leafItemSettings]="leaf"></ej-treemap>leaf: any={showLabels: true,gap: 5 } |
Property: leafItemSettings.gap<ejs-treemap id="treemap" [leafItemSettings]="leafItem" ></ejs-treemap>leafItem: object={gap: 5} |
| Leaf Item Label | Property: leafItemSettings.itemTemplate<ej-treemap id="treemap" [leafItemSettings]="leaf"></ej-treemap>leaf: any={showLabels: true, itemTemplate: "template"} |
Property: leafItemSettings.labelTemplate<ejs-treemap id="treemap" [leafItemSettings]="leafItem" ></ejs-treemap>leafItem: object={labelTemplate: 'template'} |
| Leaf Label Path | Property: leafItemSettings.labelPath<ej-treemap id="treemap" [leafItemSettings]="leaf"></ej-treemap>leaf: any={showLabels: true, labelPath: "GameName"} |
Property: leafItemSettings.labelPath<ejs-treemap id="treemap" [leafItemSettings]="leafItem" ></ejs-treemap>leafItem: object={labelPath: 'GameName'} |
| Leaf Label Position | Property: leafItemSettings.labelPosition<ej-treemap id="treemap" [leafItemSettings]="leaf"></ej-treemap>leaf: any={ showLabels: true, labelPosition: "topcenter"} |
Property: leafItemSettings.labelPosition<ejs-treemap id="treemap" [leafItemSettings]="leafItem" ></ejs-treemap>leafItem: object={labelPosition: 'Center'} |
| Leaf Label Color | Not Applicable | Property: leafItemSettings.fill<ejs-treemap id="treemap" [leafItemSettings]="leafItem" ></ejs-treemap>leafItem: object={fill: 'red'} |
| Random Colors | Not Applicable | Property: leafItemSettings.autoFill<ejs-treemap id="treemap" [leafItemSettings]="leafItem" ></ejs-treemap>leafItem: object={autoFill: true } |
| Format | Not Applicable | Property: leafItemSettings.labelFormat<ejs-treemap id="treemap" [leafItemSettings]="leafItem" ></ejs-treemap>leafItem: object={ labelFormat: '${Continent}-${Population}'} |
| Labels Visibility | Property: leafItemSettings.showLabels<ej-treemap id="treemap" [leafItemSettings]="leaf"></ej-treemap>leaf: any={showLabels: true } |
Property: leafItemSettings.showLabels<ejs-treemap id="treemap" [leafItemSettings]="leafItem" ></ejs-treemap>leafItem: object={ showLabels: false} |
| Opacity | Not Applicable | Property: *leafItemSettings.opacity *<ejs-treemap id="treemap" [leafItemSettings]="leafItem" ></ejs-treemap>leafItem: object={opacity: 0.7} |
| Padding | Not Applicable | Property: *leafItemSettings.padding *<ejs-treemap id="treemap" [leafItemSettings]="leafItem" ></ejs-treemap>leafItem: object={padding: 5} |
| Font Customization | Not Applicable | Property: leafItemSettings.labelStyle<ejs-treemap id="treemap" [leafItemSettings]="leafItem" ></ejs-treemap>leafItem: object={labelStyle: { size: '12px', color: 'red', opacity: 0.5 }} |
| Position of Template | Not Applicable | Property: leafItemSettings.templatePosition<ejs-treemap id="treemap" [leafItemSettings]="leafItem" ></ejs-treemap>leafItem: object={templatePosition: 'Center'} |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Legend Alignment | Property: legendSettings.alignment<ej-treemap id="treemap" [legendSettings]="legend" [showLegend]="true"></ej-treemap>legend: any={ alignment: "far"} |
Property: legendSettings.alignment<ejs-treemap id="treemap" [legendSettings]="legend" ></ejs-treemap>TreeMap.Inject(TreeMapLegend);legend: object={ legendSettings: { alignment: 'Near'} |
| Legend Visibility | Property: showLegend<ej-treemap id="treemap" [showLegend]="false"></ej-treemap> |
Property: legendSettings.visible<ejs-treemap id="treemap" [legendSettings]="legend" ></ejs-treemap>TreeMap.Inject(TreeMapLegend);legend: object={visible: true} |
| Legend Position | Property: legendSettings.dockPosition<ej-treemap id="treemap" [legendSettings]="legend" [showLegend]="true"></ej-treemap>legend: any={dockPosition: "bottom"} |
Property: legendSettings.position<ejs-treemap id="treemap" [legendSettings]="legend" ></ejs-treemap>TreeMap.Inject(TreeMapLegend);legend: object={position: 'Top' } |
| Legend Height | Property: legendSettings.height<ej-treemap id="treemap" [legendSettings]="legend" [showLegend]="true"></ej-treemap>legend: any={height: 40} |
Property: legendSettings.height<ejs-treemap id="treemap" [legendSettings]="legend" ></ejs-treemap>TreeMap.Inject(TreeMapLegend);legend: object={ height: '40px' } |
| Legend Width | Property: legendSettings.width<ej-treemap id="treemap" [legendSettings]="legend" [showLegend]="true"></ej-treemap>legend: any={width: 100 } |
Property: legendSettings.width<ejs-treemap id="treemap" [legendSettings]="legend" ></ejs-treemap>TreeMap.Inject(TreeMapLegend);legend: object={ width: '100px' } |
| Shape Height | Property: legendSettings.iconHeight<ej-treemap id="treemap" [legendSettings]="legend" [showLegend]="true"></ej-treemap>legend: any={iconHeight: 15 } |
Property: legendSettings.shapeHeight<ejs-treemap id="treemap" [legendSettings]="legend" ></ejs-treemap>TreeMap.Inject(TreeMapLegend);legend: object={ shapeHeight: '40px' } |
| Shape Width | Property: legendSettings.iconWidth<ej-treemap id="treemap" [legendSettings]="legend" [showLegend]="true"></ej-treemap>legend: any={iconWidth: 8 } |
Property: legendSettings.shapeWidth<ejs-treemap id="treemap" [legendSettings]="legend" ></ejs-treemap>TreeMap.Inject(TreeMapLegend);legend: object={shapeWidth: '40px'} |
| Padding | Not Applicable | Property: legendSettings.shapePadding<ejs-treemap id="treemap" [legendSettings]="legend" ></ejs-treemap>TreeMap.Inject(TreeMapLegend);legend: object={shapePadding: 10} |
| Legend Title | Property: legendSettings.title<ej-treemap id="treemap" [legendSettings]="legend" [showLegend]="true"></ej-treemap>legend: any={title: "Population" } |
Property: legendSettings.title<ejs-treemap id="treemap" [legendSettings]="legend" ></ejs-treemap>TreeMap.Inject(TreeMapLegend);legend: object={title: 'Legend' } |
| Legend Shape | Not Applicable | Property: legendSettings.shape<ejs-treemap id="treemap" [legendSettings]="legend" ></ejs-treemap>TreeMap.Inject(TreeMapLegend);legend: object={ shape: 'Rectangle' } |
| Legend Mode | Property: legendSettings.mode<ej-treemap id="treemap" [legendSettings]="legend" [showLegend]="true"></ej-treemap>legend: any={mode: "interactive" } |
Property: legendSettings.mode<ejs-treemap id="treemap" [legendSettings]="legend" ></ejs-treemap>TreeMap.Inject(TreeMapLegend);legend: object={mode: 'Interactive'} |
| Legend Text Customization | Not Applicable | Property: legendSettings.textStyle<ejs-treemap id="treemap" [legendSettings]="legend" ></ejs-treemap>TreeMap.Inject(TreeMapLegend);legend: object={textStyle: { size: '10px', opacity: 0.5, color: 'red' }} |
| Legend Title Customization | Not Applicable | Property: legendSettings.titleStyle<ejs-treemap id="treemap" [legendSettings]="legend" ></ejs-treemap>TreeMap.Inject(TreeMapLegend);legend: object={titleStyle: { size: '10px', opacity: 0.5, color: 'red' }} |
| Legend Shape Border | Not Applicable | Property: legendSettings.shapeBorder<ejs-treemap id="treemap" [legendSettings]="legend" ></ejs-treemap>TreeMap.Inject(TreeMapLegend);legend: object={shapeBorder: { width: 2, color: 'red' }} |
| Legend Template | Property: legendSettings.template<ej-treemap id="treemap" [legendSettings]="legend" [showLegend]="true"></ej-treemap>legend: any={ template: "template"} |
Not Applicable |
| Left Label | Property: legendSettings.leftLabel<ej-treemap id="treemap" [legendSettings]="legend" [showLegend]="true"></ej-treemap>legend: any={} |
Not Applicable |
| Right Label | Property: legendSettings.rightLabel<ej-treemap id="treemap" [legendSettings]="legend" [showLegend]="true"></ej-treemap>legend: any={} |
Not Applicable |
| Legend Shape Image | Not Applicable | Property: legendSettings.imageUrl<ejs-treemap id="treemap" [legendSettings]="legend" ></ejs-treemap>TreeMap.Inject(TreeMapLegend);legend: object={imageUrl: "image.png"} |
| Position in Intractive Legend | Not Applicable | Property: legendSettings.labelPosition<ejs-treemap id="treemap" [legendSettings]="legend" ></ejs-treemap>TreeMap.Inject(TreeMapLegend);legend: object={labelPosition: "Center" } |
| Legend Location | Not Applicable | Property: legendSettings.location<ejs-treemap id="treemap" [legendSettings]="legend" ></ejs-treemap>TreeMap.Inject(TreeMapLegend);legend: object={location: { x: 10, y: 20 }} |
| Legend Orientation | Not Applicable | Property: legendSettings.orientation<ejs-treemap id="treemap" [legendSettings]="legend" ></ejs-treemap>TreeMap.Inject(TreeMapLegend);legend: object={orientation: "Horizontal" } |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Random Colors | Not Applicable | Property: levels.autoFill<ejs-treemap id="treemap"> <e-levels><e-level autoFill="true"></e-level></e-levels></ejs-treemap> |
| Level Background Color | Property: levels.groupBackground<ej-treemap id="treemap"> <e-levels><e-level groupBackground= "white" ></e-level></e-levels></ej-treemap> |
Property: levels.fill<ejs-treemap id="treemap"> <e-levels><e-level fill= 'white'></e-level> </e-levels></ejs-treemap> |
| Level Border Color | Property: levels.groupBorderColor<ej-treemap id="treemap"> <e-levels><e-level groupBorderColor="#58585B"></e-level></e-levels></ej-treemap> |
Property: levels.border.color<ejs-treemap id="treemap"><e-levels><e-level [border]="border"></e-level></e-levels></ejs-treemap>border:object={color: "#58585B"} |
| Level Border Width | Property: levels.groupBorderThickness<ej-treemap id="treemap"><e-levels><e-level groupBorderThickness= 2></e-level></e-levels></ej-treemap> |
Property: levels.border.width<ejs-treemap id="treemap"> <e-levels><e-level [border]="border"> </e-level> </e-levels></ejs-treemap>border:object={width: 2} |
| Group Gap | Property: levels.groupGap<ej-treemap id="treemap"><e-levels><e-level groupGap= 2 ></e-level></e-levels></ej-treemap> |
Property: levels.groupGap<ejs-treemap id="treemap"><e-levels><e-level groupGap= 2 ></e-level></e-levels></ejs-treemap> |
| Group Padding | Property: levels.groupPadding<ej-treemap id="treemap"><e-levels><e-level groupPadding= 1 ></e-level></e-levels></ej-treemap> |
Property: levels.groupPadding<ejs-treemap id="treemap"><e-levels><e-level groupPadding= 1></e-level> </e-levels></ejs-treemap> |
| Group Path | Property: levels.groupPath |
This article describes the API migration process of Accordion component from Essential JS 1 to Essential JS | **Property:** *levels.groupPath*<br/><br/>|
|Height of Header Level| **Property:** *levels.headerHeight*<br/><br/>| **Property:** *levels.headerHeight*<br/><br/>|
|Header Template| **Property:** *levels.headerTemplate*<br/><br/>| **Property:** *levels.headerTemplate*<br/><br/>|
|Opacity of Color| Not Applicable| **Property:** *levels.opacity*<br/><br/>|
|Header Visibility| **Property:** *levels.showHeader*<br/><br/>| **Property:** *levels.showHeader*<br/><br/>|
|Template Position| **Property:** *levels.labelPosition*<br/><br/>| **Property:** *levels.templatePosition*<br/><br/>|
|Header Style| Not Applicable| **Property:** *levels.headerStyle*<br/><br/><br><br/>headstyle: object={ color: ‘red’, size: ‘16px’, opacity: 0.7}|
|Header Format| Not Applicable| **Property:** *levels.headerFormat*<br/><br/>|
|Header Alignment| Not Applicable| **Property:** *levels.headerAlignment*<br/><br/>
| 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<ejs-treemap id="treemap" [selectionSettings]="selection" ></ejs-treemap>TreeMap.Inject(TreeMapSelection);selection: object={enable: true, mode: 'Item'} |
| Selection Color | Not Applicable | Property: selectionSettings.fill<ejs-treemap id="treemap" [selectionSettings]="selection" ></ejs-treemap>TreeMap.Inject(TreeMapSelection);selection: object={enable: true, fill: 'blue'} |
| Selection Color Opacity | Not Applicable | Property: selectionSettings.opacity<ejs-treemap id="treemap" [selectionSettings]="selection" ></ejs-treemap>TreeMap.Inject(TreeMapSelection);selection: object={enable: true, fill: 'blue', opacity: 0.6 } |
| Border for selection | Not Applicable | Property: selectionSettings.border<ejs-treemap id="treemap" [selectionSettings]="selection" ></ejs-treemap>TreeMap.Inject(TreeMapSelection);selection: object={border: { color: 'red', width: 2 }} |
| 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<ejs-treemap id="treemap" [highlightSettings]="highlight" ></ejs-treemap>TreeMap.Inject(TreeMapHighlight);highlight: object={enable: true, mode: 'All' } |
| Highlight Selection Mode | Property: highlightOnSelection<ej-treemap id="treemap" highlightGroupOnSelection= "true" ></ej-treemap> |
Property: highlightSettings.mode<ejs-treemap id="treemap" [highlightSettings]="highlight" ></ejs-treemap>TreeMap.Inject(TreeMapHighlight);highlight: object={ enable: true, mode: 'Item'} |
| Highlight Group Border Color | Property: highlightGroupBorderBrush<ej-treemap id="treemap" highlightGroupOnSelection= "true" highlightGroupBorderBrush= 'gray' ></ej-treemap> |
Property: highlightSettings.border.color<ejs-treemap id="treemap" [highlightSettings]="highlight" ></ejs-treemap>TreeMap.Inject(TreeMapHighlight);highlight: object={ enable: true, mode: 'All',border: { color: 'gray' }} |
| Highlight Group Border Width | Property: highlightGroupBorderThickness<ej-treemap id="treemap" highlightGroupOnSelection= "true" highlightGroupBorderThickness= 3 ></ej-treemap> |
Property: highlightSettings.border.width<ejs-treemap id="treemap" [highlightSettings]="highlight" ></ejs-treemap>TreeMap.Inject(TreeMapHighlight);highlight: object={ enable: true, mode: 'All', border: { width: 3 }} |
| Highlight Selection Border Color | Property: highlightBorderBrush<ej-treemap id="treemap" highlightGroupOnSelection= "true" highlightBorderBrush= 'gray ></ej-treemap> |
Property: highlightSettings.border.color<ejs-treemap id="treemap" [highlightSettings]="highlight" ></ejs-treemap>TreeMap.Inject(TreeMapHighlight);highlight: object={enable: true, mode: 'Item', border: { color: 'gray' }} |
| Highlight Selection Border Width | Property: highlightBorderThickness<ej-treemap id="treemap" highlightGroupOnSelection= "true" highlightBorderThickness=3></ej-treemap> |
Property: highlightSettings.border.width<ejs-treemap id="treemap" [highlightSettings]="highlight" ></ejs-treemap>TreeMap.Inject(TreeMapHighlight);highlight: object={enable: true, mode: 'Item', border: { width: 3 }} |
| Highlight Color | Not Applicable | Property: highlightSettings.fill<ejs-treemap id="treemap" [highlightSettings]="highlight" ></ejs-treemap>TreeMap.Inject(TreeMapHighlight);highlight: object={enable: true, fill: 'red' } |
| Highlight Color Opacity | Not Applicable | Property: highlightSettings.opacity<ejs-treemap id="treemap" [highlightSettings]="highlight" ></ejs-treemap>TreeMap.Inject(TreeMapHighlight);highlight: object={enable: true, fill: 'red', opacity: 0.5} |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| From value | Property: rangeColorMapping.from<ej-treemap id="treemap" colorValuePath= "Growth"><e-rangecolormapping><e-rangecolor from: 1000></e-rangecolor></e-rangecolormapping></ej-treemap> |
Property: leafItemSettings.colorMapping.from<ejs-treemap id="treemap" rangeColorValuePath = 'Growth' [leafItemSettings]="leaf" ></ejs-treemap>leaf: object={colorMapping: [{ from: 1000 }} |
| To value | Property: rangeColorMapping.to<ej-treemap id="treemap" colorValuePath= "Growth"><e-rangecolormapping><e-rangecolor to= 100000 ></e-rangecolor></e-rangecolormapping> </ej-treemap> |
Property: leafItemSettings.colorMapping.to<ejs-treemap id="treemap" rangeColorValuePath = 'Growth' [leafItemSettings]="leaf" ></ejs-treemap>leaf: object={colorMapping: [{ to: 100000 }} |
| Color | Property: rangeColorMapping.color<ej-treemap id="treemap" colorValuePath= "Growth"><e-rangecolormapping><e-rangecolor color= "#77D8D8" ></e-rangecolor></e-rangecolormapping> </ej-treemap> |
Property: leafItemSettings.colorMapping.color<ejs-treemap id="treemap" rangeColorValuePath = 'Growth' [leafItemSettings]="leaf" ></ejs-treemap>leaf: object={colorMapping: [{ color: "#77D8D8" }} |
| Legend Label | Property: rangeColorMapping.legendLabel<ej-treemap id="treemap" colorValuePath= "Growth"><e-rangecolormapping><e-rangecolor legendLabel= "Growth"></e-rangecolor></e-rangecolormapping></ej-treemap> |
Property: leafItemSettings.colorMapping.label<ejs-treemap id="treemap" rangeColorValuePath = 'Growth' [leafItemSettings]="leaf" ></ejs-treemap>leaf: object={colorMapping: [{ label: "Growth" }} |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| From value | Property: desaturationColorMapping.from<ej-treemap id="treemap" colorValuePath= "Growth" [desaturationColorMapping]="desaturation"></ej-treemap>leaf: any={ from:1000} |
Property: leafItemSettings.colorMapping.from<ejs-treemap id="treemap" rangeColorValuePath ='Growth' [leafItemSettings]="leaf" ></ejs-treemap>leaf: object={colorMapping: [{ from: 1000 }]} |
| To value | Property: desaturationColorMapping.to<ej-treemap id="treemap" colorValuePath= "Growth" [desaturationColorMapping]="desaturation"></ej-treemap>leaf: any={to:10000} |
Property: leafItemSettings.colorMapping.to<ejs-treemap id="treemap" rangeColorValuePath ='Growth' [leafItemSettings]="leaf" ></ejs-treemap>leaf: object={colorMapping: [{ to: 10000 }]} |
| Color | Property: desaturationColorMapping.color<ej-treemap id="treemap" colorValuePath= "Growth" [desaturationColorMapping]="desaturation"></ej-treemap>leaf: any={color:"blue"} |
Property: leafItemSettings.colorMapping.color<ejs-treemap id="treemap" rangeColorValuePath ='Growth' [leafItemSettings]="leaf" ></ejs-treemap>leaf: object={colorMapping: [{ color:"blue" }]} |
| Value | Not Applicable | Property: leafItemSettings.colorMapping.value<ejs-treemap id="treemap" rangeColorValuePath ='Growth' [leafItemSettings]="leaf" ></ejs-treemap>leaf: object={colorMapping: [{ value="India" }]} |
| Minimum Opacity | Property: desaturationColorMapping.rangeMinimum<ej-treemap id="treemap" colorValuePath= "Growth" [desaturationColorMapping]="desaturation"></ej-treemap>leaf: any={rangeMinimum: 1} |
Property: leafItemSettings.colorMapping.minOpacity<ejs-treemap id="treemap" rangeColorValuePath ='Growth' [leafItemSettings]="leaf" ></ejs-treemap>leaf: object={colorMapping: [{ minOpacity: 0.1 }]} |
| Maximum Opacity | desaturationColorMapping.rangeMaximum<ej-treemap id="treemap" colorValuePath= "Growth" [desaturationColorMapping]="desaturation"></ej-treemap>leaf: any={rangeMaximum:10} |
Property: leafItemSettings.colorMapping.maxOpacity<ejs-treemap id="treemap" rangeColorValuePath ='Growth' [leafItemSettings]="leaf" ></ejs-treemap>leaf: object={colorMapping: [{ maxOpacity: 0.6 }]} |
| 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<ejs-treemap id="treemap" [tooltipSettings] = 'tooltip' ></ejs-treemap>tooltip: object={ visible: true} |
| Tooltip Template | Property: tooltipTemplate<ej-treemap id="treemap" showTooltip= "true" tooltipTemplate= 'template' ></ej-treemap> |
Property: tooltipSettings.template<ejs-treemap id="treemap" [tooltipSettings] = 'tooltip' ></ejs-treemap>tooltip: object={template: 'template' } |
| Tooltip Border | Not Applicable | Property: tooltipSettings.border<ejs-treemap id="treemap" [tooltipSettings] = 'tooltip' ></ejs-treemap>tooltip: object={border: { color: 'red', width: 2 }} |
| Tooltip Color | Not Applicable | Property: tooltipSettings.fill<ejs-treemap id="treemap" [tooltipSettings] = 'tooltip' ></ejs-treemap>tooltip: object={fill: 'gray'} |
| Tooltip Format | Not Applicable | Property: tooltipSettings.format<ejs-treemap id="treemap" [tooltipSettings] = 'tooltip' ></ejs-treemap>tooltip: object={format: '${Population}' } |
| Tooltip Marker Shape | Not Applicable | Property: tooltipSettings.markerShapes<ejs-treemap id="treemap" [tooltipSettings] = 'tooltip' ></ejs-treemap>tooltip: object={ markerShapes: 'Circle'} |
| Tooltip Color Opacity | Not Applicable | Property: tooltipSettings.opacity<ejs-treemap id="treemap" [tooltipSettings] = 'tooltip' ></ejs-treemap>tooltip: object={opacity: 0.5} |
| Tooltip Text Style | Not Applicable | Property: tooltipSettings.textStyle<ejs-treemap id="treemap" [tooltipSettings] = 'tooltip' ></ejs-treemap>tooltip: object={ textStyle: { Color: 'red', opacity: 0.5, size: '12px' }} |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Drilldown | Property: enableDrillDown<ej-treemap id="treemap" enableDrillDown= "true" ></ej-treemap> |
Property: enableDrillDown<ejs-treemap id="treemap" enableDrillDown="true" ></ejs-treemap> |
| Drilldown Level | Property: drillDownLevel<ej-treemap id="treemap" drillDownLevel= 1 ></ej-treemap> |
Property: InitialDrillSettings.groupIndex<ejs-treemap id="treemap" [ InitialDrillSettings]=initialDrill ></ejs-treemap>initialDrill: object={ groupIndex: 1} |
| 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<ejs-treemap id="treemap" (load)='load($event)'></ejs-treemap>public load = (args: ILoadEventArgs) => {} |
| Treemap Loaded Event | Not Applicable | Event: loaded<ejs-treemap id="treemap" (loaded)='loaded($event)'></ejs-treemap>public loaded = (args: ILoadedEventArgs) => {} |
| Event Before Print | Not Applicable | Event: beforePrint<ejs-treemap id="treemap" (beforePrint)='beforePrint($event)'></ejs-treemap>public beforePrint = (args: IPrintEventArgs) => {} |
| Click Event | Event: click<ej-treemap id="treemap" (click)="Click($event)"></ej-treemap>Click(sender) {} |
Event: click<ejs-treemap id="treemap" (click)='click($event)'></ejs-treemap>public click = (args: IItemClickEventArgs) => {} |
| Drill Start Event | Event: drillStarted<ej-treemap id="treemap" (drillStarted)="drillStarted($event)"></ej-treemap>drillStarted(sender) {} |
Event: drillStart<ejs-treemap id="treemap" (drillStart)='drillStart($event)'></ejs-treemap>public drillStart = (args: IDrillStartEventArgs) => {} |
| Drill End Event | Not Applicable | Event: drillEnd<ejs-treemap id="treemap" (drillEnd)=' drillEnd($event)'></ejs-treemap>public drillEnd = (args: IDrillEndEventArgs) => {} |
| Event on Item Click | Not Applicable | Event: itemClick<ejs-treemap id="treemap" (itemClick)='itemClick($event)'></ejs-treemap>public itemClick = (args: IItemClickEventArgs) => {} |
| Treemap Item Select Event | Event: treeMapItemSelected<ej-treemap id="treemap" (treeMapItemSelected)="treeMapitemselected($event)"></ej-treemap>treeMapItemSelected(sender) {} |
Event: itemSelected<ejs-treemap id="treemap" (itemSelected)=' itemSelected($event)'></ejs-treemap>public itemSelected = (args: IItemSelectedEventArgs) => {} |
| Treemap Item Rendering Event | Event: itemRendering<ej-treemap id="treemap" (itemRendering)="itemRendering($event)"></ej-treemap>itemRendering(sender) {} |
Event: itemRendering<ejs-treemap id="treemap" (itemRendering)='itemRendering($event)'></ejs-treemap>public itemRendering = (args: IItemRenderingEventArgs) => {} |
| Treemap Item Move Event | Not Applicable | Event: itemMove<ejs-treemap id="treemap" (itemMove)='itemMove($event)'></ejs-treemap>public itemMove = (args: IItemMoveEventArgs) => {} |
| Treemap Item Highlight Event | Not Applicable | Event: itemHighlight<ejs-treemap id="treemap" (itemHighlight)='itemHighlight($event)'></ejs-treemap>public itemHighlight = (args: IItemHighlightEventArgs) => {} |
| Template Header Render Event | Event: headerTemplateRendering<ej-treemap id="treemap" (headerTemplateRendering)="headerTemplateRendering($event)"></ej-treemap>headerTemplateRendering(sender) {} |
Not Applicable |
| Drilldown Item Select Event | Event: drillDownItemSelected<ej-treemap id="treemap" ( drillDownItemSelected)=" drillDownItemSelected($event)"></ej-treemap>drillDownItemSelected(sender) {} |
Not Applicable |
| Refresh Event | Event: refreshed<ej-treemap id="treemap" (refreshed)="refreshed($event)"></ej-treemap>refreshed(sender) {} |
Not Applicable |
| Group Select Event | Event: treeMapGroupSelected<ej-treemap id="treemap" (treeMapGroupSelected)="treeMapGroupSelected($event)"></ej-treemap>treeMapGroupSelected(sender) {} |
Not Applicable |
| Mouse Event | Not Applicable | Event: mouseMove<ejs-treemap id="treemap" (mouseMove)='mouseMove($event)'></ejs-treemap>public mouseMove = (args: IMouseMoveEventArgs) => {} |
| Resize Event | Not Applicable | Event: resize<ejs-treemap id="treemap" ( resize)=' resize($event)'></ejs-treemap>public resize = (args: IResizeEventArgs) => {} |
| Tooltip Render Event | Not Applicable | Event: tooltipRendering<ejs-treemap id="treemap" (tooltipRendering)='tooltipRendering($event)'></ejs-treemap>public tooltipRendering = (args: ITreeMapTooltipRenderEventArgs) => {} |
| Double Click Event | Event: doubleClick<ej-treemap id="treemap" (doubleClick)="doubleClick($event)"></ej-treemap>doubleClick(sender) {} |
Not Applicable |
| Right Click Event | Event: rightClick<ej-treemap id="treemap" (rightClick)="rightClick($event)"></ej-treemap>rightClick(sender) {} |
Not Applicable |