Customize ColorPicker Control
19 Dec 202216 minutes to read
Custom palette
By default, the Palette will be rendered with default colors. To load custom colors in the palette, specify the colors in the presetColors property. To customize the color palette, add a custom class to palette tiles using beforeTileRender event.
The following sample demonstrates the above functionalities.
<div class='wrap'>
<div id="preview"></div>
<h4>Select color</h4>
@Html.EJS().ColorPicker("element").Mode(Syncfusion.EJ2.Inputs.ColorPickerMode.Palette).Inline(true).ModeSwitcher(false).ShowButtons(false).Columns(4).BeforeTileRender("tileRender").PresetColors(@ViewBag.customColors).Change("onChange").Render()
</div>
<script>
// Triggers while selecting colors from palette.
function onChange(args) {
document.getElementById('preview').style.backgroundColor = args.currentValue.hex;
}
// Triggers before rendering each palette tile.
function tileRender(args) {
args.element.classList.add("e-icons");
args.element.classList.add("e-custom-tile");
}
</script>
<style>
.e-container {
background-color: transparent;
border-color: transparent;
box-shadow: none;
}
.e-container .e-palette .e-custom-tile {
border: 0;
color: #fff;
height: 36px;
font-size: 18px;
width: 36px;
line-height: 36px;
border-radius: 50%;
margin: 2px 5px;
}
.e-container .e-custom-palette.e-palette-group {
height: 182px;
}
.e-container .e-palette .e-custom-tile.e-selected::before {
content: '\e933';
}
.e-container .e-palette .e-custom-tile.e-selected {
outline: none;
}
.wrap {
margin: 0 auto;
width: 300px;
text-align: center;
}
#preview {
background-color: #ba68c8;
height: 50px;
width: 100%;
}
</style>public ActionResult CustomPalette()
{
List<object> custom = new List<object>();
custom.Add(new
{
Custom1 = new string[] {"#ef9a9a", "#e57373", "#ef5350",
"#f44336", "#f48fb1", "#f06292", "#ec407a", "#e91e63", "#ce93d8",
"#ba68c8", "#ab47bc", "#9c27b0", "#b39ddb", "#9575cd", "#7e57c2", "#673AB7"},
Custom2 = new string[] {"#9FA8DA", "#7986CB", "#5C6BC0", "#3F51B5",
"#90CAF9", "#64B5F6", "#42A5F5", "#2196F3", "#81D4FA", "#4FC3F7", "#29B6F6", "#03A9F4",
"#80DEEA", "#4DD0E1", "#26C6DA", "#00BCD4"},
Custom3 = new string[] {"#80CBC4", "#4DB6AC", "#26A69A", "#009688",
"#A5D6A7", "#81C784", "#66BB6A", "#4CAF50", "#C5E1A5", "#AED581", "#9CCC65", "#8BC34A", "#E6EE9C",
"#DCE775", "#D4E157", "#CDDC39"},
Custom4 = new string[] {"#FFF59D", "#FFF176", "#FFEE58", "#FFEB3B",
"#FFE082", "#FFD54F", "#FFCA28", "#FFC107", "#FFCC80", "#FFB74D", "#FFA726", "#FF9800", "#FFAB91",
"#FF8A65", "#FF7043", "#FF5722"}
});
ViewBag.customColors = custom[0];
return View();
}Hide input area from picker
By default, the input area will be rendered in ColorPicker. To hide the input area from it, add e-hide-value class to ColorPicker using the cssClass property.
In the following sample, the ColorPicker is rendered without input area.
<div class='wrap'>
<h4>Choose Color</h4>
@Html.EJS().ColorPicker("element").CssClass("e-hide-value").ModeSwitcher(false).Render()
</div>
<style>
.wrap {
margin: 0 auto;
width: 300px;
text-align: center;
}
</style>public ActionResult HideInput()
{
return View();
}Custom handle
Color picker handle shape and UI can be customized. Here, the handle has been customized as svg icon. The same way you can customize the handle based on your requirement.
<div class='wrap'>
<h4>Choose Color</h4>
@Html.EJS().ColorPicker("element").Value("#344aae").CssClass("e-custom-picker").ModeSwitcher(false).Open("onOpen").Render()
</div>
<script>
// Triggers after the color picker popup open.
function onOpen(args) {
args.element.querySelector('.e-handler').classList.add('e-icons');
}
</script>
<style>
.wrap {
margin: 0 auto;
width: 300px;
text-align: center;
}
/* To hide the handle balloon preview */
.e-color-picker-tooltip.e-popup.e-popup-open {
display: none;
}
/* Handle customization styles */
.e-custom-picker .e-container .e-hsv-container .e-handler {
background: transparent url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNiAxNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTYgMTY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPGc+Cgk8cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjE2LDYgMTAsNiAxMCwwIDYsMCA2LDYgMCw2IDAsMTAgNiwxMCA2LDE2IDEwLDE2IDEwLDEwIDE2LDEwIAkiLz4KPC9nPgo8cGF0aCBkPSJNMTAsNlYwSDZ2NkgwdjRoNnY2aDR2LTZoNlY2SDEweiBNMTUsOUg5djZIN1Y5SDFWN2g2VjFoMnY2aDZWOXoiLz4KPC9zdmc+Cg==');
font-size: 16px;
height: 16px;
line-height: 16px;
margin-left: -8px;
margin-top: -8px;
border: none;
box-shadow: none;
width: 16px;
}
</style>public ActionResult CustomHandle()
{
return View();
}Custom primary button
By default, the applied color will be updated in primary button of the color picker. You can customize that as icon.
In the following sample, the picker icon is added to primary button and using change event, the selected color will be updated in bottom portion of the icon.
<div class='wrap'>
<h4>Chosse color</h4>
@Html.EJS().ColorPicker("element").CssClass("e-custom-icon").Change("onChange").Render()
</div>
<script>
var iconPreview;
window.onload = function () {
iconPreview = document.querySelector('.e-custom-icon .e-selected-color');
iconPreview.classList.add("e-icons");
}
function onChange(args) {
iconPreview.style.borderBottomColor = args.currentValue.rgba;
}
</script>
<style>
.wrap {
margin: 0 auto;
width: 300px;
text-align: center;
}
/* Icon customization */
.e-custom-icon.e-colorpicker-wrapper .e-split-btn-wrapper .e-split-btn .e-selected-color {
background: none;
border-bottom-style: solid;
border-bottom-width: 3px;
width: 14px;
margin: 0px 2px;
border-bottom-color: #008000;
}
.e-custom-icon.e-colorpicker-wrapper .e-split-btn-wrapper .e-split-btn .e-selected-color .e-split-preview {
display: none;
}
.e-custom-icon.e-colorpicker-wrapper .e-split-btn-wrapper .e-split-btn .e-selected-color::before {
content: '\e35c';
}
</style>public ActionResult Icon()
{
return View();
}NOTE
The Essential JS 2 provides a set of icons that can be loaded by applying
e-iconsclass name to the element. You can also use third party icon to customize the primary button.
Display hex code in input
The color picker input element can be showcased in the place of primary button. The applied color hex code will be updated in the primary button input.
<div class='wrap'>
<h4>Choose color</h4>
@Html.EJS().ColorPicker("element").CssClass("e-custom-input").Render()
</div>
<script>
window.onload = function () {
var target = document.getElementById("element");
ej.base.attributes(target, { "type": "text" });
ej.base.addClass([target], "e-input");
// Moving the ColorPicker input element before the secondary button.
target.nextElementSibling.insertBefore(target, target.nextElementSibling.children[1]);
}
</script>
<style>
.wrap {
margin: 0 auto;
width: 300px;
text-align: center;
}
/* Input element customization */
.e-custom-input.e-colorpicker-wrapper .e-split-btn-wrapper .e-input {
height: 16px;
margin: 0;
opacity: 1;
position: initial;
width: 75px;
}
/* To hide primary button */
.e-custom-input.e-colorpicker-wrapper .e-split-btn-wrapper .e-split-btn {
display: none;
}
/* Secondary button customization */
.e-custom-input.e-colorpicker-wrapper .e-split-btn-wrapper .e-btn.e-dropdown-btn {
background: transparent;
border-color: transparent;
border-bottom-color: rgba(0, 0, 0, 0.42);
}
.e-custom-input.e-colorpicker-wrapper .e-split-btn-wrapper .e-input:focus+.e-btn.e-dropdown-btn {
padding-bottom: 3px;
border-bottom-width: 2px;
border-bottom-color: #e3165b;
}
/* Rotating the dropdown arrow */
.e-custom-input.e-colorpicker-wrapper .e-split-btn-wrapper .e-btn.e-dropdown-btn .e-caret {
transform: rotate(0deg);
transition: transform 200ms ease-in-out;
}
.e-custom-input.e-colorpicker-wrapper .e-split-btn-wrapper .e-btn.e-dropdown-btn.e-active .e-caret {
transform: rotate(180deg);
}
</style>public ActionResult Input()
{
return View();
}Custom UI
The color picker UI can be customized in all possible ways. The following sample shows the excel like UI customization with the help of SplitButton and Dialog component. In that by clicking the more colors option from color palette, the dialog contains color picker will open.
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Popups
<div class="wrap">
<ul id="target" tabindex="0">
<li class="e-item e-palette-item">
@Html.EJS().ColorPicker("palette").Mode(Syncfusion.EJ2.Inputs.ColorPickerMode.Palette).Inline(true).ModeSwitcher(false).ShowButtons(false).Change("onPaletteChange").Render()
</li>
<li class="e-item" tabindex="-1">
<span class="e-menu-icon e-morecolors"></span>
More colors...
</li>
</ul>
<div>
@Html.EJS().ColorPicker("picker").Inline(true).ModeSwitcher(false).Created("onPickerCreated").Change("onPickerChange").Render()
<h4>Select color</h4>
@Html.EJS().SplitButton("splitbtn").IconCss("e-icons e-font-icon").Target("#target").Open("onDdPopupOpen").Created("onSplitBtnCreated").BeforeClose("onBeforeDdPopupClose").Render()
@Html.EJS().Dialog("picker-dialog").CssClass("e-dlg-picker").Created("onLoad").AnimationSettings(new DialogAnimationSettings() { Effect = DialogEffect.Zoom }).IsModal(true).Visible(false).OverlayClick("closePickerDlg").Content("<div class='dlgContent'></div>").Width("270px").Height("336px").Target(".wrap").Render()
</div>
</div>
<script>
var splitBtnIcon, dlg, picker;
function onSplitBtnCreated() {
splitBtnIcon = document.getElementById("splitbtn");
}
function onPickerCreated() {
picker = document.getElementById("picker");
}
function onLoad() {
dlg = document.getElementById("picker-dialog");
picker.nextElementSibling.querySelector('.e-ctrl-btn .e-cancel').addEventListener('click', closePickerDlg);
dlg.querySelector(".dlgContent").appendChild(picker.parentElement);
}
function onPickerChange(args) {
onPaletteChange(args);
closePickerDlg();
}
function onPaletteChange(args) {
splitBtnIcon.querySelector('.e-font-icon').style.borderBottomColor = args.currentValue.rgba;
}
function onDdPopupOpen(args) {
args.element.children[1].addEventListener('click', openPickerDlg);
}
function onBeforeDdPopupClose(args) {
args.element.children[1].removeEventListener('click', openPickerDlg);
}
function openPickerDlg() {
dlg.ej2_instances[0].show();
}
function closePickerDlg() {
dlg.ej2_instances[0].hide();
}
</script>
<style>
.wrap {
margin: 0 auto;
width: 100%;
height: 100%;
min-height: 350px;
text-align: center;
}
.e-btn-icon.e-font-icon {
border-bottom-style: solid;
border-bottom-width: 3px;
}
.e-btn-icon.e-font-icon::before {
content: '\e34c';
}
.e-colorpicker-wrapper.e-hide-palette {
display: none;
}
.e-dropdown-popup ul .e-item:first-child.e-palette-item {
height: auto;
padding: 0;
}
.e-dlg-picker.e-dialog .e-dlg-content {
padding: 0;
background-color: transparent;
}
.e-dlg-picker.e-dialog {
max-height: 336px !important;
background-color: transparent;
}
.e-dropdown-popup ul .e-item .e-menu-icon.e-morecolors {
height: 24px;
margin-top: 6px;
width: 24px;
background-image: linear-gradient(to bottom, #fff 0, #000 100%);
background-color: #0450c2;
background-blend-mode: hard-light;
}
</style>public ActionResult ExcelUi()
{
return View();
}NOTE