React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

ColorPicker in DropDownButton in React ColorPicker component

23 Feb 2021 / 2 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.

Source
Preview
index.tsx
index.html
styles.css
index.jsx
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";

class App extends React.Component<{}, {}> {
    public ddb: DropDownButtonComponent;
    public cp: ColorPickerComponent;
    constructor(props: any) {
        super(props);
        this.onChange = this.onChange.bind(this);
        this.onCreated = this.onCreated.bind(this);
    }
    public onChange(args: ColorPickerEventArgs): void {
        (this.ddb.element.children[0] as HTMLElement).style.backgroundColor = args.currentValue.rgba;
        this.closePopup();
    }  

    public closePopup(): void {
        this.ddb.toggle();
    }

    public onCreated() {
        const parentElem = this.cp.element.parentElement as HTMLElement;
        const cancelBtn = parentElem.querySelector('.e-cancel') as HTMLElement;
        cancelBtn.addEventListener('click', this.closePopup.bind(this));
    }

    public render() {
        return (
          <div id='container'>
            <div className='wrap'>
                <h4>Choose Color</h4>
                <ColorPickerComponent ref={(scope) => { this.cp = scope as ColorPickerComponent; }} id='colorpicker' inline={true} change={this.onChange}/>
                <DropDownButtonComponent id='dropdownbtn' target='.e-colorpicker-wrapper' ref={(scope) => { this.ddb = scope as DropDownButtonComponent; }} iconCss='e-dropdownbtn-preview' created={this.onCreated}/>
            </div>
          </div>
        );
    }
}
ReactDOM.render(<App />, document.getElementById('element'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 React ColorPicker</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="React ColorPicker Component" />
    <meta name="author" content="Syncfusion" />
    <link href="styles.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
#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;
}
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";
class App extends React.Component {
    constructor(props) {
        super(props);
        this.onChange = this.onChange.bind(this);
        this.onCreated = this.onCreated.bind(this);
    }
    onChange(args) {
        this.ddb.element.children[0].style.backgroundColor = args.currentValue.rgba;
        this.closePopup();
    }
    closePopup() {
        this.ddb.toggle();
    }
    onCreated() {
        const parentElem = this.cp.element.parentElement;
        const cancelBtn = parentElem.querySelector('.e-cancel');
        cancelBtn.addEventListener('click', this.closePopup.bind(this));
    }
    render() {
        return (<div id='container'>
            <div className='wrap'>
                <h4>Choose Color</h4>
                <ColorPickerComponent ref={(scope) => { this.cp = scope; }} id='colorpicker' inline={true} change={this.onChange}/>
                <DropDownButtonComponent id='dropdownbtn' target='.e-colorpicker-wrapper' ref={(scope) => { this.ddb = scope; }} iconCss='e-dropdownbtn-preview' created={this.onCreated}/>
            </div>
          </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('element'));
Previous
Next