Colorpicker in dropdownbutton in EJ2 TypeScript Color picker control

29 Aug 20235 minutes to read

This section explains about how to render the ColorPicker in DropDownButton. The target property of the DropDownButton helps to achieve this scenario. To know about the usage of target property refer to Popup templating section.

In the below sample, the color picker is rendered as inline type by setting inline property as true and the rendered color picker wrapper is passed as a target to the DropDownButton to achieve the above scenario.

import { ColorPicker, ColorPickerEventArgs } from '@syncfusion/ej2-inputs';
import { DropDownButton, BeforeOpenCloseMenuEventArgs, OpenCloseMenuEventArgs } from '@syncfusion/ej2-splitbuttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

let colorPicker: ColorPicker = new ColorPicker(
    {
        inline: true,
        change: (args: ColorPickerEventArgs): void => {
            (ddb.element.children[0] as HTMLElement).style.backgroundColor = args.currentValue.rgba;
            closePopup();
        }
    },
    '#element');

let ddb: DropDownButton = new DropDownButton(
    {
        target: ".e-colorpicker-wrapper",
        iconCss: "e-dropdownbtn-preview",
        beforeClose: (args: BeforeOpenCloseMenuEventArgs): void => {
            args.element.parentElement.querySelector('.e-cancel').removeEventListener('click', closePopup);
        },
        open: (args: OpenCloseMenuEventArgs): void => {
            args.element.parentElement.querySelector('.e-cancel').addEventListener('click', closePopup);
            tooltip();
        }
    },
    '#dropdownbtn');

function closePopup(): void {
    ddb.toggle();
}

function tooltip(): void {
    let zindex = (document.getElementsByClassName('e-color-picker-tooltip')[0] as HTMLElement).style.zIndex;
    let zindexIntValue = parseInt(zindex) + 2;
    (document.getElementsByClassName('e-color-picker-tooltip')[0] as HTMLElement).style.zIndex = zindexIntValue.toString();
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 ColorPicker</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="TypeScript ColorPicker Component" />
    <meta name="author" content="Syncfusion" />
    <link href="styles.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div class='wrap'>
            <h4>Choose color</h4>
            <input id="element" type="color" />
            <button id="dropdownbtn"></button>
        </div>
    </div>
</body>
</html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.wrap {
  margin: 0 auto;
  width: 300px;
  text-align: center;
}

/* DropDownButton preview customization */
#dropdownbtn .e-btn-icon.e-dropdownbtn-preview {
  background-color: #008000;
  height: 18px;
  width: 18px;
  margin-top: 0; 
}

#dropdownbtn {
  padding: 4px;
}

h4 {
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
  font-size: 14px;
}