This article describes the API migration process of ColorPicker component from Essential JS 1 to Essential JS 2.
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() |
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’); |
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 */ } |