Migration from Essential JS 1

17 Feb 202211 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

<ej-color-picker id="colorpicker" value="#278787"></ej-color-picker> 		property: value

<ejs-colorpicker id="colorpicker" value="#278787"></ejs-colorpicker>
Inline mode color picker property: displayInline

<ej-color-picker id="colorpicker" display-inline="true" tag-name="div"></ej-color-picker> 		property: inline

<ejs-colorpicker id="colorpicker" inline="true"></ejs-colorpicker>
Adding custom class property: cssClass

<ej-color-picker id="colorpicker" css-class ="custom-class"></ej-color-picker> 		property: cssClass

<ejs-colorpicker id="colorpicker" cssClass="custom-class"></ejs-colorpicker>
Disable the ColorPicker component property: enabled

<ej-color-picker id="colorpicker" enabled="false"></ej-color-picker> 		property: disabled

<ejs-colorpicker id="colorpicker" disabled="true"></ejs-colorpicker>
To display custom text in button elements property: buttonText

<ej-color-picker id="colorpicker">
  <e-color-picker-button-text apply="Apply" cancel="Cancel"/>
</ej-color-picker> 		Not Applicable
To display customized text or content when mouse over the color picker elements property: tooltipText

<ej-color-picker id="colorpicker">
  <e-color-picker-tooltip-text switcher="Switch" sandy="arenoso" />
</ej-color-picker> 		Not Applicable
Disable / hide opacity property: enableOpacity

<ej-color-picker id="colorpicker" enable-opacity="false"></ej-color-picker> 		property: enableOpacity

<ejs-colorpicker id="colorpicker" enableOpacity="false"></ejs-colorpicker>
ColorPicker Button mode property: buttonMode

<ej-color-picker id="colorpicker" button-mode="Dropdown"></ej-color-picker> 		Not Applicable
To show / hide the control (apply / cancel) buttons property: showApplyCancel

<ej-color-picker id="colorpicker" show-apply-cancel="false"></ej-color-picker> 		property: showButtons

<ejs-colorpicker id="colorpicker" showButtons="false"></ejs-colorpicker>
To show / hide the clear button property: showClearButton

<ej-color-picker id="colorpicker" show-clear-button="false"></ej-color-picker> 		Not Applicable
Show / hide the mode (picker / palette) switcher property: showSwitcher

<ej-color-picker id="colorpicker" show-switcher="false"></ej-color-picker> 		property: modeSwitcher

<ejs-colorpicker id="colorpicker" modeSwitcher="false"></ejs-colorpicker>
To show / hide the preview area property: showPreview

<ej-color-picker id="colorpicker" show-preview="false"></ej-color-picker> 		Not Applicable
To show / hide the recent selected color list property: showRecentColors

<ej-color-picker id="colorpicker" show-recent-colors="true"></ej-color-picker> 		Not Applicable
To show / hide the color picker slider tooltip property: showTooltip

<ej-color-picker id="colorpicker" show-tooltip="false"></ej-color-picker> 		Not Applicable
Custom icon in dropdown control color area property: toolIcon

<ej-color-picker id="colorpicker" tool-icon="e-font-icon"></ej-color-picker> 		Not Applicable
ColorPicker mode property: modelType

<ej-color-picker id="colorpicker" model-type ="@ModelType.Picker"></ej-color-picker> 		property: mode

<ejs-colorpicker id="colorpicker" mode="Palette"></ejs-colorpicker>
Opacity value property: opacityValue

<ej-color-picker id="colorpicker" opacity-value="80"></ej-color-picker> 		Not Applicable
Number of columns in color palette property: columns

<ej-color-picker id="colorpicker" columns="10"></ej-color-picker> 		property: columns

<ejs-colorpicker id="colorpicker" columns="15"></ejs-colorpicker>
Custom colors property: palette

<ej-color-picker id="colorpicker" palette="@PaletteType.CustomPalette" model-type ="@ModelType.Palette" custom="ViewBag.colors"></ej-color-picker>
List<String> colors = new List<string> { “ffffff”, “ffccff”, “ff99ff”, “ff66ff”, “ff33ff”, “ff00ff”, “ccffff”, “ccccff”, “cc99ff”, “cc66ff”, “cc33ff”, “cc00ff”, “99ffff”, “99ccff”, “9999ff”, “9966ff”, “9933ff”, “9900ff”, “ffffcc”, “ffcccc” };
ViewBag.colors = colors;		 property: presetColors

<ejs-colorpicker id="colorpicker" presetColors="ViewBag.colors"></ejs-colorpicker>
List<object> custom = new List<object>() {
Custom = new String[] { “ffffff”, “ffccff”, “ff99ff”, “ff66ff”, “ff33ff”, “ff00ff”, “ccffff”, “ccccff”, “cc99ff”, “cc66ff”, “cc33ff”, “cc00ff”, “99ffff”, “99ccff”, “9999ff”, “9966ff”, “9933ff”, “9900ff”, “ffffcc”, “ffcccc” }
};
ViewBag.colors = colors[0];
Rendering palette from the predefined set of palettes property: presetType

<ej-color-picker id="colorpicker" model-type="@ModelType.Palette" preset-type="@PresetsType.FlatColors"></ej-color-picker> 		Not Applicable
No color option in color palette Not Applicable property: noColor

<ejs-colorpicker id="colorpicker" noColor="true" modeSwitcher="false" mode="Palette"></ejs-colorpicker>
Localization property: locale

<ej-color-picker id="colorpicker" locale="zh-CN"></ej-color-picker>
scripts:
ej.ColorPicker.Locale[“zh-CN”] = {
  buttonText: {
    apply: “应用”,
    cancel: “取消”,
    swatches: “色板”
  },
  tooltipText: {
    switcher: “切换器,
    addButton: “添加颜色”,
    basic: “基本”
  }
}		 property: locale

<ejs-colorpicker id="element" locale="ar"></ejs-colorpicker>
scripts:
ej.base.L10n.load({
  ‘ar’: {
    “colorpicker”: {
      “Apply”:”تطبيق”,
      “Cancel”:”إلغاء”,
      “ModeSwitcher”: “مفتاح كهربائي الوضع”
    }
  }
});
Right to left property: enableRTL

<ej-color-picker id="colorpicker" enable-rtl ="true"></ej-color-picker> 		property: enableRtl

<ejs-colorpicker id="colorpicker" enableRtl="true"></ejs-colorpicker>

Methods

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

<ej-color-picker id="colorpicker"></ej-color-picker>
var colorPickerObj = $(“#colorpicker”).data(“ejColorPicker”);
colorPickerObj.show();		 Method: toggle

<ejs-colorpicker id="colorpicker"></ejs-colorpicker>
var colorPickerObj = document.getElementById(“colorpicker”).ej2_instances[0];
colorPickerObj.toggle();
Method to close color picker popup Method: hide

<ej-color-picker id="colorpicker"></ej-color-picker>
var colorPickerObj = $(“#colorpicker”).data(“ejColorPicker”);
colorPickerObj.hide();		 Method: toggle

<ejs-colorpicker id="colorpicker"></ejs-colorpicker>
var colorPickerObj = document.getElementById(“colorpicker”).ej2_instances[0];
colorPickerObj.toggle();
Enable the color picker control Method: enable

<ej-color-picker id="colorpicker"></ej-color-picker>
var colorPickerObj = $(“#colorpicker”).data(“ejColorPicker”);
colorPickerObj.enable();		 Not Applicable
Disables the color picker control Method: disable

<ej-color-picker id="colorpicker"></ej-color-picker>
var colorPickerObj = $(“#colorpicker”).data(“ejColorPicker”);
colorPickerObj.disable();		 Not Applicable
Method returns the selected color value as hex code Method: getValue

<ej-color-picker id="colorpicker"></ej-color-picker>
var colorPickerObj = $(“#colorpicker”).data(“ejColorPicker”);
colorPickerObj.getValue();		 Method: getValue

<ejs-colorpicker id="colorpicker"></ejs-colorpicker>
var colorPickerObj = document.getElementById(“colorpicker”).ej2_instances[0];
colorPickerObj.getValue();
Method returns the selected color value in RGB format Method: getColor

<ej-color-picker id="colorpicker"></ej-color-picker>
var colorPickerObj = $(“#colorpicker”).data(“ejColorPicker”);
colorPickerObj.getColor();		 Method: getValue

<ejs-colorpicker id="colorpicker"></ejs-colorpicker>
var colorPickerObj = document.getElementById(“colorpicker”).ej2_instances[0];
colorPickerObj.getValue(null, ‘RGB’);
Method convert the color value from hexCode to RGB Method: hexCodeToRGB

<ej-color-picker id="colorpicker"></ej-color-picker>
var colorPickerObj = $(“#colorpicker”).data(“ejColorPicker”);
colorPickerObj.hexCodeToRGB(“#278787”);		 Method: getValue

<ejs-colorpicker id="colorpicker"></ejs-colorpicker>
var colorPickerObj = document.getElementById(“colorpicker”).ej2_instances[0];
colorPickerObj.getValue(“#278787”, ‘RGB’);
Method convert the color value from RGB to Hex code Method: RGBToHEX

<ej-color-picker id="colorpicker"></ej-color-picker>
var colorPickerObj = $(“#colorpicker”).data(“ejColorPicker”);
colorPickerObj.RGBToHEX({r:38,g:133,b:133});		 Method: getValue

<ejs-colorpicker id="colorpicker"></ejs-colorpicker>
var colorPickerObj = document.getElementById(“colorpicker”).ej2_instances[0];
colorPickerObj.getValue(“rgb(38,133,133)”, ‘Hex’);
Method convert the color value from RGB to HSV Method: RGBToHSV

<ej-color-picker id="colorpicker"></ej-color-picker>
var colorPickerObj = $(“#colorpicker”).data(“ejColorPicker”);
colorPickerObj.RGBToHSV({h:230,s:98,v:98});		 Method: getValue

<ejs-colorpicker id="colorpicker"></ejs-colorpicker>
var colorPickerObj = document.getElementById(“colorpicker”).ej2_instances[0];
colorPickerObj.getValue(“rgb(180,71.1,52.9)”, ‘HSV’);
Method convert the color value from HSV to RGB Method: HSVToRGB

<ej-color-picker id="colorpicker"></ej-color-picker>
var colorPickerObj = $(“#colorpicker”).data(“ejColorPicker”);
colorPickerObj.HSVToRGB({h:230,s:98,v:98});		 Method: getValue

<ejs-colorpicker id="colorpicker"></ejs-colorpicker>
var colorPickerObj = document.getElementById(“colorpicker”).ej2_instances[0];
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

<ejs-colorpicker id="colorpicker" beforeOpen="beforeOpen"></ejs-colorpicker>
function beforeOpen(args) {
    /** code block */
}
Event triggers before closing the ColorPicker popup Not Applicable Event: beforeClose

<ejs-colorpicker id="colorpicker" beforeClose="beforeClose"></ejs-colorpicker>
function beforeClose(args) {
    /** code block */
}
Event triggers after opening the ColorPicker popup Event: open

<ej-color-picker id="colorpicker" open="open"></ej-color-picker>
function open(args) {
    /** code block */
}		 Event: open

<ejs-colorpicker id="colorpicker" open="open"></ejs-colorpicker>
function open(args) {
    /** code block */
}
Event triggers after closing the ColorPicker popup Event: close

<ej-color-picker id="colorpicker" close="close"></ej-color-picker>
function close(args) {
    /** code block */
}		 Not Applicable
Event triggers once the component rendering is completed Event: create

<ej-color-picker id="colorpicker" create="create"></ej-color-picker>
function create(args) {
    /** code block */
}		 Event: created

<ejs-colorpicker id="colorpicker" created="created"></ejs-colorpicker>
function created() {
    /** code block */
}
Event triggers once the color picker control is destroyed Event: destroy

<ej-color-picker id="colorpicker" destroy="destroy"></ej-color-picker>
function destroy(args) {
    /** code block */
}		 Not Applicable
Event triggers before Switching between Picker / Palette mode Not Applicable Event: beforeModeSwitch

<ejs-colorpicker id="colorpicker" beforeModeSwitch="beforeModeSwitch"></ejs-colorpicker>
function beforeModeSwitch(args) {
    /** code block */
}
Event triggers after color value has been selected Event: select

<ej-color-picker id="colorpicker" select="select"></ej-color-picker>
function select(args) {
    /** code block */
}		 Event: select

<ejs-colorpicker id="colorpicker" select="select"></ejs-colorpicker>
function select(args) {
    /** code block */
}
Event triggers after color value has been changed Event: change

<ej-color-picker id="colorpicker" change="change"></ej-color-picker>
function change(args) {
    /** code block */
}		 Event: change

<ejs-colorpicker id="colorpicker" change="change"></ejs-colorpicker>
function change(args) {
    /** code block */
}