This section explains the Speed Dial events that will be triggered when appropriate actions are performed.
The SpeedDial component triggers the clicked event with SpeedDialItemEventArgs argument when an action item is clicked. You can use this event to perform the required action.
import { SpeedDialComponent, SpeedDialItemModel, SpeedDialItemEventArgs } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
{/* Initialize action items. */}
function App() {
const items: SpeedDialItemModel[] = [
{ text: 'Cut' },
{ text: 'Copy' },
{ text: 'Paste' }
];
function itemClick(args:SpeedDialItemEventArgs){
//Your required action here
}
return (
{/* Initialize the SpeedDial component */}
<SpeedDialComponent id='speeddial' items={items} content='Edit' clicked={ itemClick }></SpeedDialComponent>
);
}
export default App;The Speed Dial component triggers the created event when SpeedDial component rendering is completed.
import { SpeedDialComponent, SpeedDialItemModel } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
{/* Initialize action items. */}
function App() {
const items: SpeedDialItemModel[] = [
{ text: 'Cut' },
{ text: 'Copy' },
{ text: 'Paste' }
];
function created(){
//Your required action here
}
return (
{/* Initialize the SpeedDial component */}
<SpeedDialComponent id='speeddial' items={items} content='Edit' created={ created }></SpeedDialComponent>
);
}
export default App;The SpeedDial component triggers the beforeOpen event with SpeedDialBeforeOpenCloseEventArgs argument before the SpeedDial popup is opened.
import { SpeedDialComponent, SpeedDialItemModel, SpeedDialBeforeOpenCloseEventArgs } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
{/* Initialize action items. */}
function App() {
const items: SpeedDialItemModel[] = [
{ text: 'Cut' },
{ text: 'Copy' },
{ text: 'Paste' }
];
function beforeOpen(args:SpeedDialBeforeOpenCloseEventArgs){
//Your required action here
}
return (
{/* Initialize the SpeedDial component */}
<SpeedDialComponent id='speeddial' items={items} content='Edit' beforeOpen={ beforeOpen }></SpeedDialComponent>
);
}
export default App;The SpeedDial component triggers the onOpen event with SpeedDialOpenCloseEventArgs argument when SpeedDial popup is opened.
import { SpeedDialComponent, SpeedDialItemModel, SpeedDialOpenCloseEventArgs } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
{/* Initialize action items. */}
function App() {
const items: SpeedDialItemModel[] = [
{ text: 'Cut' },
{ text: 'Copy' },
{ text: 'Paste' }
];
function onOpen(args:SpeedDialOpenCloseEventArgs){
//Your required action here
}
return (
{/* Initialize the SpeedDial component */}
<SpeedDialComponent id='speeddial' items={items} content='Edit' onOpen={ onOpen }></SpeedDialComponent>
);
}
export default App;The SpeedDial component triggers the beforeClose event with SpeedDialBeforeOpenCloseEventArgs argument before the SpeedDial popup is closed.
import { SpeedDialComponent, SpeedDialItemModel, SpeedDialBeforeOpenCloseEventArgs } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
{/* Initialize action items. */}
function App() {
const items: SpeedDialItemModel[] = [
{ text: 'Cut' },
{ text: 'Copy' },
{ text: 'Paste' }
];
function beforeClose(args:SpeedDialBeforeOpenCloseEventArgs){
//Your required action here
}
return (
{/* Initialize the SpeedDial component */}
<SpeedDialComponent id='speeddial' items={items} content='Edit' beforeClose={ beforeClose }></SpeedDialComponent>
);
}
export default App;The SpeedDial component triggers the onClose event with SpeedDialOpenCloseEventArgs argument when SpeedDial popup is closed.
import { SpeedDialComponent, SpeedDialItemModel, SpeedDialOpenCloseEventArgs } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
{/* Initialize action items. */}
function App() {
const items: SpeedDialItemModel[] = [
{ text: 'Cut' },
{ text: 'Copy' },
{ text: 'Paste' }
];
function onClose(args:SpeedDialOpenCloseEventArgs){
//Your required action here
}
return (
{/* Initialize the SpeedDial component */}
<SpeedDialComponent id='speeddial' items={items} content='Edit' onClose={ onClose }></SpeedDialComponent>
);
}
export default App;The SpeedDial component triggers the beforeItemRender event with SpeedDialItemEventArgs argument for each SpeedDialItem once it is rendered.
import { SpeedDialComponent, SpeedDialItemModel, SpeedDialItemEventArgs } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
{/* Initialize action items. */}
function App() {
const items: SpeedDialItemModel[] = [
{ text: 'Cut' },
{ text: 'Copy' },
{ text: 'Paste' }
];
function beforeItemRender(args:SpeedDialItemEventArgs){
//Your required action here
}
return (
{/* Initialize the SpeedDial component */}
<SpeedDialComponent id='speeddial' items={items} content='Edit' beforeItemRender={ this.beforeItemRender=this.beforeItemRender.bind(this) }></SpeedDialComponent>
);
}
export default App;Below example demonstrates the clicked event of the Speed Dial component.
import { SpeedDialComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
{ /* Initialize action items. */ }
function App() {
const items = [
{ text: 'Cut' },
{ text: 'Copy' },
{ text: 'Paste' }
];
function itemClick(args) {
alert(args.item.text + " is clicked");
}
return (<div>
<div id="targetElement" style={{ position: 'relative', minHeight: '350px', border: '1px solid' }}></div>
<SpeedDialComponent id='speeddial' items={items} content='Edit' target='#targetElement' clicked={itemClick}></SpeedDialComponent>
</div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Floating Action Button</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="index.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='button'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>import { SpeedDialComponent, SpeedDialItemModel, SpeedDialItemEventArgs } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
{/* Initialize action items. */}
function App() {
const items: SpeedDialItemModel[] = [
{ text: 'Cut' },
{ text: 'Copy' },
{ text: 'Paste' }
];
function itemClick(args:SpeedDialItemEventArgs){
alert(args.item.text + " is clicked")
}
return (
<div>
<div id="targetElement" style={{position:'relative', minHeight:'350px', border:'1px solid'}}></div>
{/* Initialize the SpeedDial component */}
<SpeedDialComponent id='speeddial' items={items} content='Edit' target='#targetElement' clicked={ itemClick }></SpeedDialComponent>
</div>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));