Popup items in React Drop down button component
7 Aug 202324 minutes to read
Icons
The Popup action item have an icon/image in it to provide visual representation of the action. To place the icon on a popup item,
set the iconCss property to e-icons with the required icon CSS. By default, the icon is
positioned to the left side of the popup action item.
In the following sample, the icons for Edit, Delete, Mark As Read and Like Message menu items are
added using the iconCss property.
import { enableRipple } from '@syncfusion/ej2-base';
import { DropDownButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
// To render DropDownButton.
function App() {
let items = [
{
text: 'Edit',
iconCss: 'ddb-icons e-edit'
},
{
text: 'Delete',
iconCss: 'ddb-icons e-delete'
},
{
text: 'Mark As Read',
iconCss: 'ddb-icons e-read'
},
{
text: 'Like Message',
iconCss: 'ddb-icons e-like'
}
];
return (<div>
<DropDownButtonComponent items={items} iconCss='ddb-icons e-message'> Message </DropDownButtonComponent>
</div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DropDownButtonComponent, ItemModel } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
// To render DropDownButton.
function App() {
let items: ItemModel[] = [
{
text: 'Edit',
iconCss: 'ddb-icons e-edit'
},
{
text: 'Delete',
iconCss: 'ddb-icons e-delete'
},
{
text: 'Mark As Read',
iconCss: 'ddb-icons e-read'
},
{
text: 'Like Message',
iconCss: 'ddb-icons e-like'
}];
return (
<div>
<DropDownButtonComponent items = {items} iconCss= 'ddb-icons e-message'> Message </DropDownButtonComponent>
</div>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));Navigations
Actions in DropDownButton is usage to navigate to the other web page when action item is clicked. This can be achieved by providing link to the action item using the url property. In the following sample, Navigation URL for Flipkart, Amazon, and Snapdeal action items are added using the url property.
import { enableRipple } from '@syncfusion/ej2-base';
import { DropDownButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
// To render DropDownButton.
function App() {
let items = [
{
iconCss: 'e-cart-icon e-link',
text: 'Flipkart',
url: 'https://www.google.co.in/search?q=flipkart'
},
{
iconCss: 'e-cart-icon e-link',
text: 'Amazon',
url: 'https://www.google.co.in/search?q=amazon'
},
{
iconCss: 'e-cart-icon e-link',
text: 'Snapdeal',
url: 'https://www.google.co.in/search?q=snapdeal'
}
];
function itemBeforeEvent(args) {
args.element.getElementsByTagName('a')[0].setAttribute('target', '_blank');
}
return (<div>
<DropDownButtonComponent items={items} iconCss='e-cart-icon e-shopping' beforeItemRender={itemBeforeEvent}> Shop By </DropDownButtonComponent>
</div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));import { enableRipple } from '@syncfusion/ej2-base';
import { DropDownButtonComponent, ItemModel, MenuEventArgs } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
// To render DropDownButton.
function App() {
let items: ItemModel[] = [
{
iconCss: 'e-cart-icon e-link',
text: 'Flipkart',
url: 'https://www.google.co.in/search?q=flipkart'
},
{
iconCss: 'e-cart-icon e-link',
text: 'Amazon',
url: 'https://www.google.co.in/search?q=amazon'
},
{
iconCss: 'e-cart-icon e-link',
text: 'Snapdeal',
url: 'https://www.google.co.in/search?q=snapdeal'
}];
function itemBeforeEvent(args: MenuEventArgs) {
args.element.getElementsByTagName('a')[0].setAttribute('target', '_blank');
}
return (
<div>
<DropDownButtonComponent items = {items} iconCss= 'e-cart-icon e-shopping' beforeItemRender={itemBeforeEvent} > Shop By </DropDownButtonComponent>
</div>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));Template
Item Templating
Popup items can be customized by using the beforeItemRender event. The item render event triggers while rendering each Popup action item. The event argument will be used to identify the action item and customize it based on the requirement.
import { enableRipple } from '@syncfusion/ej2-base';
import { DropDownButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
// To render DropDownButton.
function App() {
let items = [
{
text: 'Edit'
},
{
text: 'Cut'
}
];
function itemBeforeEvent(args) {
if (args.item.text === 'Edit') {
args.element.innerHTML = '<span></span><div><b>Paste Text</b><div>Provides option to paste only the<br>selected text.</div></div>';
args.element.style.height = '80px';
const span = args.element.children[0];
span.setAttribute('class', 'e-cm-icons e-pastetext e-align');
const div = args.element.children[1];
div.setAttribute('class', 'e-div-align');
}
else {
args.element.innerHTML = '<span></span><div><b>Paste Special</b><div>Provides options to paste formulas,<br> values, comments, validations etc...</div></div>';
args.element.style.height = '80px';
const span = args.element.children[0];
span.setAttribute('class', 'e-cm-icons e-pastespecial e-align');
const div = args.element.children[1];
div.setAttribute('class', 'e-div-align');
}
}
return (<div>
<DropDownButtonComponent items={items} iconCss='e-ddb-icons e-paste' cssClass='e-vertical' iconPosition='Top' beforeItemRender={itemBeforeEvent}>Paste</DropDownButtonComponent>
</div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));import { enableRipple } from '@syncfusion/ej2-base';
import { DropDownButtonComponent, ItemModel, MenuEventArgs } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
// To render DropDownButton.
function App() {
let items:ItemModel[] = [
{
text: 'Edit'
},
{
text: 'Cut'
}];
function itemBeforeEvent (args: MenuEventArgs) {
if (args.item.text === 'Edit') {
args.element.innerHTML = '<span></span><div><b>Paste Text</b><div>Provides option to paste only the<br>selected text.</div></div>';
args.element.style.height = '80px';
const span = args.element.children[0];
span.setAttribute('class','e-cm-icons e-pastetext e-align');
const div = args.element.children[1];
div.setAttribute('class', 'e-div-align');
} else {
args.element.innerHTML = '<span></span><div><b>Paste Special</b><div>Provides options to paste formulas,<br> values, comments, validations etc...</div></div>';
args.element.style.height = '80px';
const span = args.element.children[0];
span.setAttribute('class','e-cm-icons e-pastespecial e-align');
const div = args.element.children[1];
div.setAttribute('class', 'e-div-align');
}
}
return (
<div>
<DropDownButtonComponent items = {items} iconCss= 'e-ddb-icons e-paste' cssClass='e-vertical' iconPosition='Top' beforeItemRender={itemBeforeEvent} >Paste</DropDownButtonComponent>
</div>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));Popup Templating
The whole popup can be customized as per the requirement and it can be customized by handling it in target property.
In the following sample, the whole popup item is customized as table template by giving div as target and it can be achieved
using target property.
import { enableRipple } from '@syncfusion/ej2-base';
import { DropDownButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
// To render DropDownButton.
function App() {
function itemBeforeEvent(args) {
args.element.style.height = '105px';
}
return (<div>
<div id="target">
<table>
<caption><b>Insert Table</b></caption>
<tbody>
<tr className='e-row'>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
</tr>
<tr className='e-row'>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
</tr>
<tr className='e-row'>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
</tr>
<tr className='e-row'>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
</tr>
<tr className='e-row'>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
</tr>
<tr className='e-row'>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
</tr>
</tbody>
</table>
</div>
<DropDownButtonComponent target='#target' iconCss='e-icons e-table' iconPosition='Top' cssClass='e-vertical' beforeItemRender={itemBeforeEvent}>Table</DropDownButtonComponent>
</div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));import { enableRipple } from '@syncfusion/ej2-base';
import { DropDownButtonComponent, MenuEventArgs } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
// To render DropDownButton.
function App() {
function itemBeforeEvent(args: MenuEventArgs) {
args.element.style.height = '105px';
}
return (
<div>
<div id="target">
<table>
<caption><b>Insert Table</b></caption>
<tbody>
<tr className='e-row'>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
</tr>
<tr className='e-row'>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
</tr>
<tr className='e-row'>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
</tr>
<tr className='e-row'>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
</tr>
<tr className='e-row'>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
</tr>
<tr className='e-row'>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
<td className='e-data'/>
</tr>
</tbody>
</table>
</div>
<DropDownButtonComponent target='#target' iconCss='e-icons e-table' iconPosition='Top' cssClass='e-vertical' beforeItemRender={itemBeforeEvent} >Table</DropDownButtonComponent>
</div>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));Separator
The Separators are the horizontal lines that are used to separate the popup items. You cannot select the separators. You can enable separators to group the popup items using the separator property.
In the following sample, cut, copy, and paste popup items are grouped using the separator property:
import { enableRipple } from '@syncfusion/ej2-base';
import { DropDownButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
// To render DropDownButton.
function App() {
let items = [
{
iconCss: 'e-db-icons e-cut',
text: 'Cut'
},
{
iconCss: 'e-icons e-copy',
text: 'Copy'
},
{
iconCss: 'e-db-icons e-paste',
text: 'Paste'
},
{
separator: true
},
{
iconCss: 'e-db-icons e-font',
text: 'Font'
},
{
iconCss: 'e-db-icons e-paragraph',
text: 'Paragraph'
}
];
return (<div>
<DropDownButtonComponent items={items} iconCss='e-icons e-edit'> Clipboard </DropDownButtonComponent>
</div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));import { enableRipple } from '@syncfusion/ej2-base';
import { DropDownButtonComponent, ItemModel } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
// To render DropDownButton.
function App() {
let items: ItemModel[] = [
{
iconCss: 'e-db-icons e-cut',
text: 'Cut'
},
{
iconCss: 'e-icons e-copy',
text: 'Copy'
},
{
iconCss: 'e-db-icons e-paste',
text: 'Paste'
},
{
separator: true
},
{
iconCss: 'e-db-icons e-font',
text: 'Font'
},
{
iconCss: 'e-db-icons e-paragraph',
text: 'Paragraph'
}];
return (
<div>
<DropDownButtonComponent items = {items} iconCss= 'e-icons e-edit'> Clipboard </DropDownButtonComponent>
</div>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));