Handle no color support in Color Picker Control
19 Dec 20229 minutes to read
The ColorPicker component supports no color functionality. By clicking the no color tile from palette, the selected color becomes empty and considered as no color has been selected from color picker.
Default no color
To achieve this, set noColor property as true.
In the following sample, the first tile of the color palette represents the no color tile. By clicking the no color tile you can achieve the above functionalities.
<div class='wrap'>
<div id="preview"></div>
<h4>Select color</h4>
@Html.EJS().ColorPicker("element").Mode(Syncfusion.EJ2.Inputs.ColorPickerMode.Palette).Created("onCreated").NoColor(true).Value("#ba68c8").ModeSwitcher(false).ShowButtons(false).Change("onChange").Render()
</div>
<script>
var preview;
function onCreated() {
preview = document.getElementById("preview");
// Initially set the default color and value to preview.
preview.style.backgroundColor = "#ba68c8";
preview.textContent = "#ba68c8";
}
// Triggers while selecting colors from palette.
function onChange(args) {
preview.style.backgroundColor = args.currentValue.hex;
preview.textContent = args.currentValue.hex ? args.currentValue.hex : 'No color';
}
</script>
<style>
.wrap {
margin: 0 auto;
width: 300px;
text-align: center;
}
#preview {
border: 1px solid;
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
font-size: 14px;
height: 40px;
line-height: 40px;
}
</style>public ActionResult Nocolor()
{
return View();
}Custom no color
<div class='wrap'>
<ul id="target" tabindex="0">
<li class="e-item e-palette-item">
@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()
</li>
<li class="e-item" id="no-color" tabindex="-1">
<span class="e-menu-icon e-nocolor"></span>
No color
</li>
</ul>
<div id="preview"></div>
<h4>Select color</h4>
@Html.EJS().SplitButton("splitbtn").IconCss("e-cp-icons e-picker-icon").Target("#target").Render()
</div>
<script>
var preview;
document.addEventListener("DOMContentLoaded", function () {
preview = document.getElementById("preview");
// Initially set the default color and value to preview.
preview.style.backgroundColor = "#f44336";
preview.textContent = "#f44336";
// Binding click event for no color li.
document.getElementById('no-color').onclick = function () {
//sets color picker value property to null.
ej.base.getInstance(document.getElementById("element"), ejs.inputs.ColorPicker).setProperties({ 'value': "" }, true);
document.querySelector('.e-split-btn .e-picker-icon').style.borderBottomColor = "transparent";
preview.textContent = "No color"
preview.style.backgroundColor = "transparent";
}
});
// Triggers while selecting colors from palette.
function onChange(args) {
var splitBtnInst = ej.base.getInstance(document.getElementById('splitbtn'), ejs.splitbuttons.SplitButton);
document.querySelector(".e-split-btn .e-picker-icon").style.borderBottomColor = args.currentValue.hex;
preview.style.backgroundColor = args.currentValue.hex;
preview.textContent = args.currentValue.hex;
if (splitBtnInst.element.getAttribute("aria-expanded")) {
splitBtnInst.toggle();
splitBtnInst.element.focus();
}
}
// Triggers before rendering each palette tile.
function tileRender(args) {
args.element.classList.add("e-custom-tile");
}
</script>
<style>
/* Preview area styles */
#preview {
border: 1px solid;
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
font-size: 14px;
height: 40px;
line-height: 40px;
width: 100%;
}
.wrap {
margin: 0 auto;
width: 300px;
text-align: center;
}
@@font-face {
font-family: 'paint';
src:
url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0gSRIAAAEoAAAAVmNtYXDnEOdVAAABiAAAADZnbHlmIZD+uwAAAcgAAADMaGVhZBKhhHQAAADQAAAANmhoZWEHjANrAAAArAAAACRobXR4B+j/8wAAAYAAAAAIbG9jYQBmAAAAAAHAAAAABm1heHABDgBKAAABCAAAACBuYW1ln6hzswAAApQAAAINcG9zdEkLMmUAAASkAAAANgABAAADUv9qAFoEAP/z//4D6gABAAAAAAAAAAAAAAAAAAAAAgABAAAAAQAAAZfc6F8PPPUACwPoAAAAANfSn9kAAAAA19Kf2f/z//wD6gPhAAAACAACAAAAAAAAAAEAAAACAD4AAgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQP0AZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAANS/2oAWgPhAJYAAAABAAAAAAAABAAAAAPo//MAAAACAAAAAwAAABQAAwABAAAAFAAEACIAAAAEAAQAAQAA5wD//wAA5wD//wAAAAEABAAAAAEAAAAAAAAAZgAAAAL/8//8A+oD4QAKAD0AAAEWBgceATc1JiQHJTMmNjceARcVJx4BBx4BFQ4BIiYnNDY3PgEvAS4BIw4BBwEGHgI3AT4BLwE1LgEnDgEDeiRlCgulCxP+8RT+GyYDQFxOZQwTBQEDDxEBJzonAREOCQkPJQ4cDBcdAf6oG1a3nx8BWQ4RHKADeG1oWwHTLHVwYVmL6Kx1BHEqfwYFqWUHEx4tDAocEx0nJx0RHgoVUDQpDgsBFAH+px2guFUaAVkNOiCgCXnhCAWOAAAAAAAAEgDeAAEAAAAAAAAAAQAAAAEAAAAAAAEABQABAAEAAAAAAAIABwAGAAEAAAAAAAMABQANAAEAAAAAAAQABQASAAEAAAAAAAUACwAXAAEAAAAAAAYABQAiAAEAAAAAAAoALAAnAAEAAAAAAAsAEgBTAAMAAQQJAAAAAgBlAAMAAQQJAAEACgBnAAMAAQQJAAIADgBxAAMAAQQJAAMACgB/AAMAAQQJAAQACgCJAAMAAQQJAAUAFgCTAAMAAQQJAAYACgCpAAMAAQQJAAoAWACzAAMAAQQJAAsAJAELIHBhaW50UmVndWxhcnBhaW50cGFpbnRWZXJzaW9uIDEuMHBhaW50Rm9udCBnZW5lcmF0ZWQgdXNpbmcgU3luY2Z1c2lvbiBNZXRybyBTdHVkaW93d3cuc3luY2Z1c2lvbi5jb20AIABwAGEAaQBuAHQAUgBlAGcAdQBsAGEAcgBwAGEAaQBuAHQAcABhAGkAbgB0AFYAZQByAHMAaQBvAG4AIAAxAC4AMABwAGEAaQBuAHQARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAdQBzAGkAbgBnACAAUwB5AG4AYwBmAHUAcwBpAG8AbgAgAE0AZQB0AHIAbwAgAFMAdAB1AGQAaQBvAHcAdwB3AC4AcwB5AG4AYwBmAHUAcwBpAG8AbgAuAGMAbwBtAAAAAAIAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgECAQMADHBhaW50LWJ1Y2tldAAAAAA=) format('truetype');
font-weight: normal;
font-style: normal;
}
.e-cp-icons {
font-family: 'paint' !important;
speak: none;
font-size: 55px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ColorPicker customization */
.e-dropdown-popup ul#target {
padding: 0;
}
.e-dropdown-popup ul .e-item.e-palette-item {
height: auto;
padding: 0;
}
.e-btn-icon.e-picker-icon {
border-bottom-color: #f44336;
border-bottom-style: solid;
border-bottom-width: 3px;
}
/* Picker icon */
.e-btn-icon.e-picker-icon::before {
content: '\e700';
}
/* No color li styles */
.e-dropdown-popup ul .e-item .e-menu-icon.e-nocolor {
height: 22px;
margin-top: 8px;
width: 22px;
background: transparent url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNnB4IiBoZWlnaHQ9IjZweCIgdmlld0JveD0iMCAwIDYgNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTAgKDU0OTgzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCA5PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ikdyb3VwLTkiPgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExIiBmaWxsPSIjRTBFMEUwIiB4PSIwIiB5PSIwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weS0yIiBmaWxsPSIjRkZGRkZGIiB4PSIwIiB5PSIzIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weSIgZmlsbD0iI0ZGRkZGRiIgeD0iMyIgeT0iMCIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExLUNvcHktMyIgZmlsbD0iI0UwRTBFMCIgeD0iMyIgeT0iMyIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+');
}
/* Tile customization */
.e-container .e-palette .e-tile.e-custom-tile {
height: 24px;
width: 24px;
margin: 4px;
}
</style>public ActionResult CustomNocolor()
{
List<object> custom = new List<object>();
custom.Add(new
{
Custom1 = new string[] {"#f44336", "#e91e63", "#9c27b0", "#673ab7", "#2196f3", "#03a9f4", "#00bcd4",
"#009688", "#8bc34a", "#cddc39", "#ffeb3b", "#ffc107"}
});
ViewBag.customColors = custom[0];
return View();
}NOTE