Colorpicker in dropdownbutton in React Color picker component

30 Jan 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.

index.jsx

import { ColorPickerComponent } from '@syncfusion/ej2-react-inputs';
import { DropDownButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
    let ddb;
    let cp;
    function onChange(args) {
        ddb.element.children[0].style.backgroundColor = args.currentValue.rgba;
        closePopup();
    }
    function closePopup() {
        ddb.toggle();
    }
    function onCreated() {
        const parentElem = cp.element.parentElement;
        const cancelBtn = parentElem.querySelector('.e-cancel');
        cancelBtn.addEventListener('click', closePopup.bind(this));
    }
    return (<div id='container'>
        <div className='wrap'>
            <h4>Choose Color</h4>
            <ColorPickerComponent ref={(scope) => { cp = scope; }} id='colorpicker' inline={true} change={onChange}/>
            <DropDownButtonComponent id='dropdownbtn' target='.e-colorpicker-wrapper' ref={(scope) => { ddb = scope; }} iconCss='e-dropdownbtn-preview' created={onCreated}/>
        </div>
        </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

index.tsx

import { ColorPickerComponent, ColorPickerEventArgs } from '@syncfusion/ej2-react-inputs';
import { DropDownButtonComponent} from '@syncfusion/ej2-react-splitbuttons';
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
    let ddb: DropDownButtonComponent;
    let cp: ColorPickerComponent;
    function onChange(args: ColorPickerEventArgs): void {
        (ddb.element.children[0] as HTMLElement).style.backgroundColor = args.currentValue.rgba;
        closePopup();
    }  

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

    function onCreated() {
        const parentElem = cp.element.parentElement as HTMLElement;
        const cancelBtn = parentElem.querySelector('.e-cancel') as HTMLElement;
        cancelBtn.addEventListener('click', closePopup.bind(this));
    }
    return (
        <div id='container'>
        <div className='wrap'>
            <h4>Choose Color</h4>
            <ColorPickerComponent ref={(scope) => { cp = scope as ColorPickerComponent; }} id='colorpicker' inline={true} change={onChange}/>
            <DropDownButtonComponent id='dropdownbtn' target='.e-colorpicker-wrapper' ref={(scope) => { ddb = scope as DropDownButtonComponent; }} iconCss='e-dropdownbtn-preview' created={onCreated}/>
        </div>
        </div>
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));