—
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 JavaScript Color picker control

8 May 202311 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

$(“#colorpicker”).ejColorPicker({
value: “#278787”
});		 property: value

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

$(“#colorpicker”).ejColorPicker({
displayInline: true
});		 property: inline

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

$(“#colorpicker”).ejColorPicker({
cssClass: “e-custom”
});		 property: cssClass

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

$(“#colorpicker”).ejColorPicker({
enabled: false
});		 property: disabled

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

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

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

$(“#colorpicker”).ejColorPicker({
enableOpacity: false
});		 property: enableOpacity

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

$(“#colorpicker”).ejColorPicker({
buttonMode: “Dropdown”
});		 Not Applicable
To show / hide the control (apply / cancel) buttons property: showApplyCancel

$(“#colorpicker”).ejColorPicker({
showApplyCancel: false
});		 property: showButtons

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

$(“#colorpicker”).ejColorPicker({
showClearButton: true
});		 Not Applicable
Show / hide the mode (picker / palette) switcher property: showSwitcher

$(“#colorpicker”).ejColorPicker({
showSwitcher: false
});		 property: modeSwitcher

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

$(“#colorpicker”).ejColorPicker({
showPreview: false
});		 Not Applicable
To show / hide the recent selected color list property: showRecentColors

$(“#colorpicker”).ejColorPicker({
showRecentColors: true
});		 Not Applicable
To show / hide the color picker slider tooltip property: showTooltip

$(“#colorpicker”).ejColorPicker({
showTooltip: false
});		 Not Applicable
Custom icon in dropdown control color area property: toolIcon

$(“#colorpicker”).ejColorPicker({
toolIcon: null
});		 Not Applicable
ColorPicker mode property: modelType

$(“#colorpicker”).ejColorPicker({
modelType: “picker”
});		 property: mode

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

$(“#colorpicker”).ejColorPicker({
opacityValue: 80
});		 Not Applicable
Number of columns in color palette property: columns

$(“#colorpicker”).ejColorPicker({
columns: 10
});		 property: columns

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

$(“#colorpicker”).ejColorPicker({
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

var colorPickerObj = new ej.inputs.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

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

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

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

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

$(“#colorpicker”).ejColorPicker({
enableRTL: true
});		 property: enableRtl

var colorPickerObj = new ej.inputs.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

$(“#colorpicker”).ejColorPicker({});
var colorPickerObj = $(“#colorpicker”).data(“ejColorPicker”);
colorPickerObj.show();		 Method: toggle

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

$(“#colorpicker”).ejColorPicker({});
var colorPickerObj = $(“#colorpicker”).data(“ejColorPicker”);
colorPickerObj.hide();		 Method: toggle

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

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

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

$(“#colorpicker”).ejColorPicker({});
var colorPickerObj = $(“#colorpicker”).data(“ejColorPicker”);
colorPickerObj.getValue();		 Method: getValue

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

$(“#colorpicker”).ejColorPicker({});
var colorPickerObj = $(“#colorpicker”).data(“ejColorPicker”);
colorPickerObj.getColor();		 Method: getValue

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

$(“#colorpicker”).ejColorPicker({});
var colorPickerObj = $(“#colorpicker”).data(“ejColorPicker”);
colorPickerObj.hexCodeToRGB(“#278787”);		 Method: getValue

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

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

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

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

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

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

var colorPickerObj = new ej.inputs.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

var colorPickerObj = new ej.inputs.ColorPicker({
beforeOpen: function(args) { }
});
colorPickerObj.appendTo(‘#colorpicker’);
Event triggers before closing the ColorPicker popup Not Applicable Event: beforeClose

var colorPickerObj = new ej.inputs.ColorPicker({
beforeClose: function(args) { }
});
colorPickerObj.appendTo(‘#colorpicker’);
Event triggers after opening the ColorPicker popup Event: open

$(“#colorpicker”).ejColorPicker({
open: function(args) { }
});		 Event: open

var colorPickerObj = new ej.inputs.ColorPicker({
open: function(args) { }
});
colorPickerObj.appendTo(‘#colorpicker’);
Event triggers after closing the ColorPicker popup Event: close

$(“#colorpicker”).ejColorPicker({
close: function(args) { }
});		 Not Applicable
Event triggers once the component rendering is completed Event: create

$(“#colorpicker”).ejColorPicker({
create: function(args) { }
});		 Event: created

var colorPickerObj = new ej.inputs.ColorPicker({
created: function() { }
});
colorPickerObj.appendTo(‘#colorpicker’);
Event triggers once the color picker control is destroyed Event: destroy

$(“#colorpicker”).ejColorPicker({
destroy: function(args) { }
});		 Not Applicable
Event triggers before Switching between Picker / Palette mode Not Applicable Event: beforeModeSwitch

var colorPickerObj = new ej.inputs.ColorPicker({
beforeModeSwitch: function(args) { }
});
colorPickerObj.appendTo(‘#colorpicker’);
Event triggers after color value has been selected Event: select

$(“#colorpicker”).ejColorPicker({
select: function(args) { }
});		 Event: select

var colorPickerObj = new ej.inputs.ColorPicker({
select: function(args) { }
});
colorPickerObj.appendTo(‘#colorpicker’);
Event triggers after color value has been changed Event: change

$(“#colorpicker”).ejColorPicker({
change: function(args) { }
});		 Event: change

var colorPickerObj = new ej.inputs.ColorPicker({
change: function(args) { }
});
colorPickerObj.appendTo(‘#colorpicker’);