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 { 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'));
<!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>
#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, 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'));