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

ColorPicker in DropDownButton in React ColorPicker component

24 Jun 2022 / 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.jsx
index.html
styles.css
index.tsx
Copied to clipboard
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'));
Copied to clipboard
<!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/20.1.58/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/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>
Copied to clipboard
#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;
}
Copied to clipboard
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'));
Previous
Next