This section explains the Speed Dial events that will be triggered when appropriate actions are performed.
The SpeedDial control triggers the clicked event with SpeedDialItemEventArgs argument when an action item is clicked. You can use this event to perform the required action.
import { SpeedDial, SpeedDialItemEventArgs, SpeedDialItemModel } from '@syncfusion/ej2-buttons';
// Initialize action items
let items: SpeedDialItemModel[] = [
{ text: 'Cut'},
{ text: 'Copy'},
{ text: 'Paste'}
];
// Initialize the SpeedDial control
let speeddial: SpeedDial = new SpeedDial({
items: items,
content: 'Edit',
target: '#targetElement',
clicked: (args:SpeedDialItemEventArgs)=> {
//Your required action here
}
});
// Render initialized SpeedDial
speeddial.appendTo('#speeddial');The Speed Dial control triggers the created event when SpeedDial control rendering is completed.
import { SpeedDial, SpeedDialItemEventArgs, SpeedDialItemModel } from '@syncfusion/ej2-buttons';
// Initialize action items
let items: SpeedDialItemModel[] = [
{ text: 'Cut'},
{ text: 'Copy'},
{ text: 'Paste'}
];
// Initialize the SpeedDial control
let speeddial: SpeedDial = new SpeedDial({
items: items,
content: 'Edit',
target: '#targetElement',
created: ()=> {
//Your required action here
}
});
// Render initialized SpeedDial
speeddial.appendTo('#speeddial');The SpeedDial control triggers the beforeOpen event with SpeedDialBeforeOpenCloseEventArgs argument before the SpeedDial popup is opened.
import { SpeedDial, BeforeOpenCloseEventArgs, SpeedDialItemModel } from '@syncfusion/ej2-buttons';
// Initialize action items
let items: SpeedDialItemModel[] = [
{ text: 'Cut'},
{ text: 'Copy'},
{ text: 'Paste'}
];
// Initialize the SpeedDial control
let speeddial: SpeedDial = new SpeedDial({
items: items,
content: 'Edit',
target: '#targetElement',
beforeOpen: (args:BeforeOpenCloseEventArgs)=> {
//Your required action here
}
});
// Render initialized SpeedDial
speeddial.appendTo('#speeddial');The SpeedDial control triggers the onOpen event with SpeedDialOpenCloseEventArgs argument when SpeedDial popup is opened.
import { SpeedDial, OpenCloseEventArgs, SpeedDialItemModel } from '@syncfusion/ej2-buttons';
// Initialize action items
let items: SpeedDialItemModel[] = [
{ text: 'Cut'},
{ text: 'Copy'},
{ text: 'Paste'}
];
// Initialize the SpeedDial control
let speeddial: SpeedDial = new SpeedDial({
items: items,
content: 'Edit',
target: '#targetElement',
onOpen: (args:OpenCloseEventArgs)=> {
//Your required action here
}
});
// Render initialized SpeedDial
speeddial.appendTo('#speeddial');The SpeedDial control triggers the beforeClose event with SpeedDialBeforeOpenCloseEventArgs argument before the SpeedDial popup is closed.
import { SpeedDial, BeforeOpenCloseEventArgs, SpeedDialItemModel } from '@syncfusion/ej2-buttons';
// Initialize action items
let items: SpeedDialItemModel[] = [
{ text: 'Cut'},
{ text: 'Copy'},
{ text: 'Paste'}
];
// Initialize the SpeedDial control
let speeddial: SpeedDial = new SpeedDial({
items: items,
content: 'Edit',
target: '#targetElement',
beforeClose: (args:BeforeOpenCloseEventArgs)=> {
//Your required action here
}
});
// Render initialized SpeedDial
speeddial.appendTo('#speeddial');The SpeedDial control triggers the onClose event with SpeedDialOpenCloseEventArgs argument when SpeedDial popup is closed.
import { SpeedDial, OpenCloseEventArgs, SpeedDialItemModel } from '@syncfusion/ej2-buttons';
// Initialize action items
let items: SpeedDialItemModel[] = [
{ text: 'Cut'},
{ text: 'Copy'},
{ text: 'Paste'}
];
// Initialize the SpeedDial control
let speeddial: SpeedDial = new SpeedDial({
items: items,
content: 'Edit',
target: '#targetElement',
onClose: (args:OpenCloseEventArgs)=> {
//Your required action here
}
});
// Render initialized SpeedDial.
speeddial.appendTo('#speeddial');The SpeedDial control triggers the beforeItemRender event with SpeedDialItemEventArgs argument for each SpeedDialItem once it is rendered.
import { SpeedDial, SpeedDialItemEventArgs, SpeedDialItemModel } from '@syncfusion/ej2-buttons';
// Initialize action items
let items: SpeedDialItemModel[] = [
{ text: 'Cut'},
{ text: 'Copy'},
{ text: 'Paste'}
];
// Initialize the SpeedDial control
let speeddial: SpeedDial = new SpeedDial({
items: items,
content: 'Edit',
target: '#targetElement',
beforeItemRender: (args:SpeedDialItemEventArgs)=> {
//Your required action here
}
});
// Render initialized SpeedDial
speeddial.appendTo('#speeddial');Below example demonstrates the clicked event of the Speed Dial control.
import { SpeedDial, SpeedDialItemModel, SpeedDialItemModel } from '@syncfusion/ej2-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
// Initialize action items
let items: SpeedDialItemModel[] = [
{ text: 'Cut'},
{ text: 'Copy'},
{ text: 'Paste'}
];
// Initialize the SpeedDial control with clicked event
let speeddial: SpeedDial = new SpeedDial({
items: items,
content: 'Edit',
target: '#targetElement',
clicked: (args:SpeedDialItemEventArgs)=> {
alert(args.item.text + " is clicked");
}
});
// Render initialized SpeedDial
speeddial.appendTo('#speeddial');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 SpeedDial</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<!-- Add the SpeedDial component styles. -->
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="styles.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='loader'>LOADING....</div>
<div id='container'>
<!-- Elements to render the SpeedDial component. -->
<div id="targetElement" style="position:relative;min-height:350px;border:1px solid;"></div>
<button id='speeddial' title='Edit'></button>
</div>
</body>
</html>#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}