—
title: “Migration from Essential JS 1”
component: “ColorPicker”
description: “Explains the common steps for migrating from Essential JS 1 application to Essential JS 2 components especially, color picker component.”
—

Ej1 api migration in EJ2 TypeScript Color picker control

8 May 202312 minutes to read

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

Properties

Behavior API in Essential JS 1 API in Essential JS 2
Default property: value

var colorPickerObj = new ej.ColorPicker($(“#colorpicker”), {
value: “#278787”
});		 property: value

let colorPickerObj: ColorPicker = new ColorPicker({
value: ‘#278787’
});
colorPickerObj.appendTo(‘#colorpicker’);
Inline mode color picker property: displayInline

var colorPickerObj = new ej.ColorPicker($(“#colorpicker”), {
displayInline: true
});		 property: inline

let colorPickerObj: ColorPicker = new ColorPicker({
inline: true
});
colorPickerObj.appendTo(‘#colorpicker’);
Adding custom class property: cssClass

var colorPickerObj = new ej.ColorPicker($(“#colorpicker”), {
cssClass: “e-custom”
});		 property: cssClass

let colorPickerObj: ColorPicker = new ColorPicker({
cssClass: ‘e-custom’
});
colorPickerObj.appendTo(‘#colorpicker’);
Disable the ColorPicker component property: enabled

var colorPickerObj = new ej.ColorPicker($(“#colorpicker”), {
enabled: false
});		 property: disabled

let colorPickerObj: ColorPicker = new ColorPicker({
disabled: true
});
colorPickerObj.appendTo(‘#colorpicker’);
To display custom text in button elements property: buttonText

var colorPickerObj = new ej.ColorPicker($(“#colorpicker”), {
buttonText: { apply: “Apply”, cancel: “Cancel”, swatches: “Swatches” }
});		 Not Applicable
To display customized text or content when mouse over the color picker elements property: tooltipText

var colorPickerObj = new ej.ColorPicker($(“#colorpicker”), {
tooltipText: { switcher: “Switch”, currentColor: “New Color”, selectedColor: “Old Color” }}
});		 Not Applicable
Disable / hide opacity property: enableOpacity

var colorPickerObj = new ej.ColorPicker($(“#colorpicker”), {
enableOpacity: false
});		 property: enableOpacity

let colorPickerObj: ColorPicker = new ColorPicker({
enableOpacity: false
});
colorPickerObj.appendTo(‘#colorpicker’);
ColorPicker Button mode property: buttonMode

var colorPickerObj = new ej.ColorPicker($(“#colorpicker”), {
buttonMode: “Dropdown”
});		 Not Applicable
To show / hide the control (apply / cancel) buttons property: showApplyCancel

var colorPickerObj = new ej.ColorPicker($(“#colorpicker”), {
showApplyCancel: false
});		 property: showButtons

let colorPickerObj: ColorPicker = new ColorPicker({
showButtons: false
});
colorPickerObj.appendTo(‘#colorpicker’);
To show / hide the clear button property: showClearButton

var colorPickerObj = new ej.ColorPicker($(“#colorpicker”), {
showClearButton: true
});		 Not Applicable
Show / hide the mode (picker / palette) switcher property: showSwitcher

var colorPickerObj = new ej.ColorPicker($(“#colorpicker”), {
showSwitcher: false
});		 property: modeSwitcher

let colorPickerObj: ColorPicker = new ColorPicker({
modeSwitcher: false
});
colorPickerObj.appendTo(‘#colorpicker’);
To show / hide the preview area property: showPreview

var colorPickerObj = new ej.ColorPicker($(“#colorpicker”), {
showPreview: false
});		 Not Applicable
To show / hide the recent selected color list property: showRecentColors

var colorPickerObj = new ej.ColorPicker($(“#colorpicker”), {
showRecentColors: true
});		 Not Applicable
To show / hide the color picker slider tooltip property: showTooltip

var colorPickerObj = new ej.ColorPicker($(“#colorpicker”), {
showTooltip: false
});		 Not Applicable
Custom icon in dropdown control color area property: toolIcon

var colorPickerObj = new ej.ColorPicker($(“#colorpicker”), {
toolIcon: null
});		 Not Applicable
ColorPicker mode property: modelType

var colorPickerObj = new ej.ColorPicker($(“#colorpicker”), {
modelType: “picker”
});		 property: mode

let colorPickerObj: ColorPicker = new ColorPicker({
mode: ‘Palette’
});
colorPickerObj.appendTo(‘#colorpicker’);
Opacity value property: opacityValue

var colorPickerObj = new ej.ColorPicker($(“#colorpicker”), {
opacityValue: 80
});		 Not Applicable
Number of columns in color palette property: columns

var colorPickerObj = new ej.ColorPicker($(“#colorpicker”), {
columns: 10
});		 property: columns

let colorPickerObj: ColorPicker = new ColorPicker({
columns: 15
});
colorPickerObj.appendTo(‘#colorpicker’);
Custom colors property: palette

var colorPickerObj = new ej.ColorPicker($(“#colorpicker”), {
palette: ej.ColorPicker.Palette.CustomPalette
custom: [“ffffff”, “ffccff”, “ff99ff”, “ff66ff”,
“ff33ff”, “ff00ff”, “ccffff”, “ccccff”,
“cc99ff”, “cc66ff”, “cc33ff”, “cc00ff”,
“99ffff”, “99ccff”, “9999ff”, “9966ff”,
“9933ff”, “9900ff”, “ffffcc”, “ffcccc”
]
});		 property: presetColors

let colorPickerObj: ColorPicker = new ColorPicker({
presetColors: {
‘custom’: [“ffffff”, “ffccff”, “ff99ff”, “ff66ff”,
“ff33ff”, “ff00ff”, “ccffff”, “ccccff”,
“cc99ff”, “cc66ff”, “cc33ff”, “cc00ff”,
“99ffff”, “99ccff”, “9999ff”, “9966ff”,
“9933ff”, “9900ff”, “ffffcc”, “ffcccc”]
}
});
colorPickerObj.appendTo(‘#colorpicker’);
Rendering palette from the predefined set of palettes property: presetType

var colorPickerObj = new ej.ColorPicker($(“#colorpicker”), {
presetType: ej.ColorPicker.Presets.FlatColors
});		 Not Applicable
No color option in color palette Not Applicable property: noColor

let colorPickerObj: ColorPicker = new ColorPicker({
noColor: true,
modeSwitcher: false
mode: ‘Palette’
});
colorPickerObj.appendTo(‘#colorpicker’);
Localization property: locale

var colorPickerObj = new ej.ColorPicker($(“#colorpicker”), {
locale: ‘zh-CN’
});
ej.ColorPicker.Locale[“zh-CN”] = {
buttonText: {
apply: “应用”,
cancel: “取消”,
swatches: “色板”
},
tooltipText: {
switcher: “切换器,
addButton: “添加颜色”,
basic: “基本”
}
}		 property: locale

let colorPickerObj: ColorPicker = new ColorPicker({
locale: ‘ar’
});
colorPickerObj.appendTo(‘#colorpicker’);
L10n.load({
‘ar’: {
‘colorpicker’: {
“Apply”:”تطبيق”,
“Cancel”:”إلغاء”,
“ModeSwitcher”: “مفتاح كهربائي الوضع”
}
}
});
Right to left property: enableRTL

var colorPickerObj = new ej.ColorPicker($(“#colorpicker”), {
enableRTL: true
});		 property: enableRtl

let colorPickerObj: ColorPicker = new ColorPicker({
enableRtl: true
});
colorPickerObj.appendTo(‘#colorpicker’);

Methods

Behavior API in Essential JS 1 API in Essential JS 2
Method to open color picker popup Method: show

var colorPickerObj = new ej.ColorPicker($(“#colorpicker”), {});
colorPickerObj.show();		 Method: toggle

let colorPickerObj: ColorPicker =new ColorPicker({});
colorPickerObj.appendTo(‘#colorpicker’);
colorPickerObj.toggle();
Method to close color picker popup Method: hide

var colorPickerObj = new ej.ColorPicker($(“#colorpicker”), {});
colorPickerObj.hide();		 Method: toggle

let colorPickerObj: ColorPicker =new ColorPicker({});
colorPickerObj.appendTo(‘#colorpicker’);
colorPickerObj.toggle();
Enable the color picker control Method: enable

var colorPickerObj = new ej.ColorPicker($(“#colorpicker”), {});
colorPickerObj.enable();		 Not Applicable
Disables the color picker control Method: disable

var colorPickerObj = new ej.ColorPicker($(“#colorpicker”), {});
colorPickerObj.disable();		 Not Applicable
Method returns the selected color value as hex code Method: getValue

var colorPickerObj = new ej.ColorPicker($(“#colorpicker”), {});
colorPickerObj.getValue();		 Method: getValue

let colorPickerObj: ColorPicker =new ColorPicker({});
colorPickerObj.appendTo(‘#colorpicker’);
colorPickerObj.getValue();
Method returns the selected color value in RGB format Method: getColor

var colorPickerObj = new ej.ColorPicker($(“#colorpicker”), {});
colorPickerObj.getColor();		 Method: getValue

let colorPickerObj: ColorPicker =new ColorPicker({});
colorPickerObj.appendTo(‘#colorpicker’);
colorPickerObj.getValue(null, ‘RGB’);
Method convert the color value from hexCode to RGB Method: hexCodeToRGB

var colorPickerObj = new ej.ColorPicker($(“#colorpicker”), {});
colorPickerObj.hexCodeToRGB(“#278787”);		 Method: getValue

let colorPickerObj: ColorPicker =new ColorPicker({});
colorPickerObj.appendTo(‘#colorpicker’);
colorPickerObj.getValue(“#278787”, ‘RGB’);
Method convert the color value from RGB to Hex code Method: RGBToHEX

var colorPickerObj = new ej.ColorPicker($(“#colorpicker”), {});
colorPickerObj.RGBToHEX({r:38,g:133,b:133});		 Method: getValue

let colorPickerObj: ColorPicker =new ColorPicker({});
colorPickerObj.appendTo(‘#colorpicker’);
colorPickerObj.getValue(“rgb(38,133,133)”, ‘Hex’);
Method convert the color value from RGB to HSV Method: RGBToHSV

var colorPickerObj = new ej.ColorPicker($(“#colorpicker”), {});
colorPickerObj.RGBToHSV({h:230,s:98,v:98});		 Method: getValue

let colorPickerObj: ColorPicker =new ColorPicker({});
colorPickerObj.appendTo(‘#colorpicker’);
colorPickerObj.getValue(“rgb(180,71.1,52.9)”, ‘HSV’);
Method convert the color value from HSV to RGB Method: HSVToRGB

var colorPickerObj = new ej.ColorPicker($(“#colorpicker”), {});
colorPickerObj.HSVToRGB({h:230,s:98,v:98});		 Method: getValue

let colorPickerObj: ColorPicker =new ColorPicker({});
colorPickerObj.appendTo(‘#colorpicker’);
colorPickerObj.getValue(“hsv(180,71.1,52.9)”, ‘RGB’);

Events

Behavior API in Essential JS 1 API in Essential JS 2
Event triggers before opening the ColorPicker popup Not Applicable Event: beforeOpen

let colorPickerObj: ColorPicker =new ColorPicker({
beforeOpen: (args: BeforeOpenCloseEventArgs): void => { }
});
colorPickerObj.appendTo(‘#colorpicker’);
Event triggers before closing the ColorPicker popup Not Applicable Event: beforeClose

let colorPickerObj: ColorPicker =new ColorPicker({
beforeClose: (args: BeforeOpenCloseEventArgs): void => { }
});
colorPickerObj.appendTo(‘#colorpicker’);
Event triggers after opening the ColorPicker popup Event: open

var colorPickerObj = new ej.ColorPicker($(“#colorpicker”), {
open: function(args) { }
});		 Event: open

let colorPickerObj: ColorPicker =new ColorPicker({
open: (args: OpenEventArgs): void => { }
});
colorPickerObj.appendTo(‘#colorpicker’);
Event triggers after closing the ColorPicker popup Event: close

var colorPickerObj = new ej.ColorPicker($(“#colorpicker”), {
close: function(args) { }
});		 Not Applicable
Event triggers once the component rendering is completed Event: create

var colorPickerObj = new ej.ColorPicker($(“#colorpicker”), {
create: function(args) { }
});		 Event: created

let colorPickerObj: ColorPicker =new ColorPicker({
created: (): void => { }
});
colorPickerObj.appendTo(‘#colorpicker’);
Event triggers once the color picker control is destroyed Event: destroy

var colorPickerObj = new ej.ColorPicker($(“#colorpicker”), {
destroy: function(args) { }
});		 Not Applicable
Event triggers before Switching between Picker / Palette mode Not Applicable Event: beforeModeSwitch

let colorPickerObj: ColorPicker =new ColorPicker({
beforeModeSwitch: (args: ModeSwitchEventArgs): void => { }
});
colorPickerObj.appendTo(‘#colorpicker’);
Event triggers after color value has been selected Event: select

var colorPickerObj = new ej.ColorPicker($(“#colorpicker”), {
select: function(args) { }
});		 Event: select

let colorPickerObj: ColorPicker =new ColorPicker({
select: (args: ColorPickerEventArgs): void => { }
});
colorPickerObj.appendTo(‘#colorpicker’);
Event triggers after color value has been changed Event: change

var colorPickerObj = new ej.ColorPicker($(“#colorpicker”), {
change: function(args) { }
});		 Event: change

let colorPickerObj: ColorPicker =new ColorPicker({
change: (args: ColorPickerEventArgs): void => { }
});
colorPickerObj.appendTo(‘#colorpicker’);