Migration from Essential® JS 1

8 Dec 202410 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

@Html.EJ().ColorPicker("colorpicker").Value("#278787") 		property: value

@Html.EJS().ColorPicker("colorpicker").Value("#278787").Render()
Inline mode color picker property: displayInline

@Html.EJ().ColorPicker("colorpicker").DisplayInline(true).TagName("div") 		property: inline

@Html.EJS().ColorPicker("colorpicker").Inline(true).Render()
Adding custom class property: cssClass

@Html.EJ().ColorPicker("colorpicker").CssClass ("e-custom") 		property: cssClass

@Html.EJS().ColorPicker("colorpicker").CssClass.("e-custom").Render()
Disable the ColorPicker component property: enabled

@Html.EJ().ColorPicker("colorpicker").Enabled(false) 		property: disabled

@Html.EJS().ColorPicker("colorpicker").Disabled(true).Render()
To display custom text in button elements property: buttonText

@Html.EJ().ColorPicker("colorpicker").ColorPickerButtonText(color=>
  color.Apply("Apply").Cancel("Cancel")) 		Not Applicable
To display customized text or content when mouse over the color picker elements property: tooltipText

@Html.EJ().ColorPicker("colorpicker").ColorPickerTooltipText(tooltip=>
  tooltip.Switcher("Switch").Sandy("arenoso")) 		Not Applicable
Disable / hide opacity property: enableOpacity

@Html.EJ().ColorPicker("colorpicker").EnableOpacity(false) 		property: enableOpacity

@Html.EJS().ColorPicker("colorpicker").enableOpacity(false).Render()
ColorPicker Button mode property: buttonMode

@Html.EJ().ColorPicker("colorpicker").ButtonMode(ButtonMode.Dropdown) 		Not Applicable
To show / hide the control (apply / cancel) buttons property: showApplyCancel

@Html.EJ().ColorPicker("colorpicker").ShowApplyCancel(false) 		property: showButtons

@Html.EJS().ColorPicker("colorpicker").ShowButtons(false).Render()
To show / hide the clear button property: showClearButton

@Html.EJ().ColorPicker("colorpicker").ShowClearButton(false) 		Not Applicable
Show / hide the mode (picker / palette) switcher property: showSwitcher

@Html.EJ().ColorPicker("colorpicker").ShowSwitcher(false) 		property: modeSwitcher

@Html.EJS().ColorPicker("colorpicker").ModeSwitcher(false).Render()
To show / hide the preview area property: showPreview

@Html.EJ().ColorPicker("colorpicker").ShowPreview(false) 		Not Applicable
To show / hide the recent selected color list property: showRecentColors

@Html.EJ().ColorPicker("colorpicker").ShowRecentColors(true) 		Not Applicable
To show / hide the color picker slider tooltip property: showTooltip

@Html.EJ().ColorPicker("colorpicker").ShowTooltip(false) 		Not Applicable
Custom icon in dropdown control color area property: toolIcon

@Html.EJ().ColorPicker("colorpicker").ToolIcon("e-font-icon") 		Not Applicable
ColorPicker mode property: modelType

@Html.EJ().ColorPicker("colorpicker").(ModelType.Picker) 		property: mode

@Html.EJS().ColorPicker("colorpicker")
  .Mode(Syncfusion.EJ2.Inputs.ColorPickerMode.Palette)).Render()
Opacity value property: opacityValue

@Html.EJ().ColorPicker("colorpicker").OpacityValue(80) 		Not Applicable
Number of columns in color palette property: columns

@Html.EJ().ColorPicker("colorpicker").Columns(10) 		property: columns

@Html.EJS().ColorPicker("colorpicker").Columns(15).Render()
Custom colors property: palette

@Html.EJ().ColorPicker("colorpicker").Palette(PaletteType.CustomPalette)
  .ModelType(ModelType.Palette).Custom(@ViewBag.colors)
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

@Html.EJS().ColorPicker("colorpicker").PresetColors(@ViewBag.colors)
  .Render()
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

@Html.EJ().ColorPicker("colorpicker").ModelType(ModelType.Palette)
  .PresetType(PresetsType.FlatColors) 		Not Applicable
No color option in color palette Not Applicable property: noColor

@Html.EJS().ColorPicker("colorpicker").NoColor(true).ModeSwitcher(false)
  .Mode(Syncfusion.EJ2.Inputs.ColorPickerMode.Palette)).Render()
Localization property: locale

@Html.EJ().ColorPicker("colorpicker").Locale("zh-CN")
scripts:
ej.ColorPicker.Locale[“zh-CN”] = {
  buttonText: {
    apply: “应用”,
    cancel: “取消”,
    swatches: “色板”
  },
  tooltipText: {
    switcher: “切换器,
    addButton: “添加颜色”,
    basic: “基本”
  }
}		 property: locale

@Html.EJS().ColorPicker("colorpicker").Locale("ar").Render()
scripts:
ej.base.L10n.load({
  ‘ar’: {
    “colorpicker”: {
      “Apply”:”تطبيق”,
      “Cancel”:”إلغاء”,
      “ModeSwitcher”: “مفتاح كهربائي الوضع”
    }
  }
});
Right to left property: enableRTL

@Html.EJ().ColorPicker("colorpicker").EnableRTL(true) 		property: enableRtl

@Html.EJS().ColorPicker("colorpicker").EnableRtl(true).Render()

Methods

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

@Html.EJ().ColorPicker("colorpicker")
var colorPickerObj = $(“#colorpicker”).data(“ejColorPicker”);
colorPickerObj.show();		 Method: toggle

@Html.EJS().ColorPicker("colorpicker").Render()
var colorPickerObj = document.getElementById(“colorpicker”).ej2_instances[0];
colorPickerObj.toggle();
Method to close color picker popup Method: hide

@Html.EJ().ColorPicker("colorpicker")
var colorPickerObj = $(“#colorpicker”).data(“ejColorPicker”);
colorPickerObj.hide();		 Method: toggle

@Html.EJS().ColorPicker("colorpicker").Render()
var colorPickerObj = document.getElementById(“colorpicker”).ej2_instances[0];
colorPickerObj.toggle();
Enable the color picker control Method: enable

@Html.EJ().ColorPicker("colorpicker")
var colorPickerObj = $(“#colorpicker”).data(“ejColorPicker”);
colorPickerObj.enable();		 Not Applicable
Disables the color picker control Method: disable

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

@Html.EJ().ColorPicker("colorpicker")
var colorPickerObj = $(“#colorpicker”).data(“ejColorPicker”);
colorPickerObj.getValue();		 Method: getValue

@Html.EJS().ColorPicker("colorpicker").Render()
var colorPickerObj = document.getElementById(“colorpicker”).ej2_instances[0];
colorPickerObj.getValue();
Method returns the selected color value in RGB format Method: getColor

@Html.EJ().ColorPicker("colorpicker")
var colorPickerObj = $(“#colorpicker”).data(“ejColorPicker”);
colorPickerObj.getColor();		 Method: getValue

@Html.EJS().ColorPicker("colorpicker").Render()
var colorPickerObj = document.getElementById(“colorpicker”).ej2_instances[0];
colorPickerObj.getValue(null, ‘RGB’);
Method convert the color value from hexCode to RGB Method: hexCodeToRGB

@Html.EJ().ColorPicker("colorpicker")
var colorPickerObj = $(“#colorpicker”).data(“ejColorPicker”);
colorPickerObj.hexCodeToRGB(“#278787”);		 Method: getValue

@Html.EJS().ColorPicker("colorpicker").Render()
var colorPickerObj = document.getElementById(“colorpicker”).ej2_instances[0];
colorPickerObj.getValue(“#278787”, ‘RGB’);
Method convert the color value from RGB to Hex code Method: RGBToHEX

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

@Html.EJS().ColorPicker("colorpicker").Render()
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

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

@Html.EJS().ColorPicker("colorpicker").Render()
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

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

@Html.EJS().ColorPicker("colorpicker").Render()
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

@Html.EJS().ColorPicker("colorpicker").BeforeOpen("beforeOpen").Render()
function beforeOpen(args) {
    /** code block */
}
Event triggers before closing the ColorPicker popup Not Applicable Event: beforeClose

@Html.EJS().ColorPicker("colorpicker").BeforeClose("beforeClose").Render()
function beforeClose(args) {
    /** code block */
}
Event triggers after opening the ColorPicker popup Event: open

@Html.EJ().ColorPicker("colorpicker").Open("open")
function open(args) {
    /** code block */
}		 Event: open

@Html.EJS().ColorPicker("colorpicker").Open("open").Render()
function open(args) {
    /** code block */
}
Event triggers after closing the ColorPicker popup Event: close

@Html.EJ().ColorPicker("colorpicker").Close("close")
function close(args) {
    /** code block */
}		 Not Applicable
Event triggers once the component rendering is completed Event: create

@Html.EJ().ColorPicker("colorpicker").Create("create")
function create(args) {
    /** code block */
}		 Event: created

@Html.EJS().ColorPicker("colorpicker").Created("created").Render()
function created() {
    /** code block */
}
Event triggers once the color picker control is destroyed Event: destroy

@Html.EJ().ColorPicker("colorpicker").Destroy("destroy")
function destroy(args) {
    /** code block */
}		 Not Applicable
Event triggers before Switching between Picker / Palette mode Not Applicable Event: beforeModeSwitch

@Html.EJS().ColorPicker("colorpicker").BeforeModeSwitch("beforeModeSwitch").Render()
function beforeModeSwitch(args) {
    /** code block */
}
Event triggers after color value has been selected Event: select

@Html.EJ().ColorPicker("colorpicker").Select("select")
function select(args) {
    /** code block */
}		 Event: select

@Html.EJS().ColorPicker("colorpicker").Select("select").Render()
function select(args) {
    /** code block */
}
Event triggers after color value has been changed Event: change

@Html.EJ().ColorPicker("colorpicker").Change("change")
function change(args) {
    /** code block */
}		 Event: change

@Html.EJS().ColorPicker("colorpicker").Change("change").Render()
function change(args) {
    /** code block */
}