Event in EJ2 JavaScript Speed dial control
16 Jun 20238 minutes to read
This section explains the Speed Dial events that will be triggered when appropriate actions are performed.
clicked
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.
// Initialize action items
var items = [
{ text: 'Cut'},
{ text: 'Copy'},
{ text: 'Paste'}
];
// Initialize the SpeedDial control
var speeddial= new ej.buttons.SpeedDial({
items: items,
content: 'Edit',
target: '#targetElement',
clicked: (args)=> {
//Your required action here
}
});
// Render initialized SpeedDial
speeddial.appendTo('#speeddial');
created
The Speed Dial control triggers the created
event when SpeedDial control rendering is completed.
// Initialize action items
var items = [
{ text: 'Cut'},
{ text: 'Copy'},
{ text: 'Paste'}
];
// Initialize the SpeedDial control
var speeddial: = new ej.buttons.SpeedDial({
items: items,
content: 'Edit',
target: '#targetElement',
created: ()=> {
//Your required action here
}
});
// Render initialized SpeedDial
speeddial.appendTo('#speeddial');
beforeOpen
The SpeedDial control triggers the beforeOpen
event with SpeedDialBeforeOpenCloseEventArgs
argument before the SpeedDial popup is opened.
// Initialize action items
var items = [
{ text: 'Cut'},
{ text: 'Copy'},
{ text: 'Paste'}
];
// Initialize the SpeedDial control
var speeddial = new ej.buttons.SpeedDial({
items: items,
content: 'Edit',
target: '#targetElement',
beforeOpen: (args)=> {
//Your required action here
}
});
// Render initialized SpeedDial
speeddial.appendTo('#speeddial');
onOpen
The SpeedDial control triggers the onOpen
event with SpeedDialOpenCloseEventArgs
argument when SpeedDial popup is opened.
// Initialize action items
var items = [
{ text: 'Cut'},
{ text: 'Copy'},
{ text: 'Paste'}
];
// Initialize the SpeedDial control
var speeddial = new ej.buttons.SpeedDial({
items: items,
content: 'Edit',
target: '#targetElement',
onOpen: (args)=> {
//Your required action here
}
});
// Render initialized SpeedDial
speeddial.appendTo('#speeddial');
beforeClose
The SpeedDial control triggers the beforeClose
event with SpeedDialBeforeOpenCloseEventArgs
argument before the SpeedDial popup is closed.
// Initialize action items
var items = [
{ text: 'Cut'},
{ text: 'Copy'},
{ text: 'Paste'}
];
// Initialize the SpeedDial control
var speeddial = new ej.buttons.SpeedDial({
items: items,
content: 'Edit',
target: '#targetElement',
beforeClose: (args)=> {
//Your required action here
}
});
// Render initialized SpeedDial
speeddial.appendTo('#speeddial');
onClose
The SpeedDial control triggers the onClose
event with SpeedDialOpenCloseEventArgs
argument when SpeedDial popup is closed.
// Initialize action items
var items = [
{ text: 'Cut'},
{ text: 'Copy'},
{ text: 'Paste'}
];
// Initialize the SpeedDial control
var speeddial = new ej.buttons.SpeedDial({
items: items,
content: 'Edit',
target: '#targetElement',
onClose: (args)=> {
//Your required action here
}
});
// Render initialized SpeedDial.
speeddial.appendTo('#speeddial');
beforeItemRender
The SpeedDial control triggers the beforeItemRender
event with SpeedDialItemEventArgs
argument for each SpeedDialItem
once it is rendered.
// Initialize action items
var items = [
{ text: 'Cut'},
{ text: 'Copy'},
{ text: 'Paste'}
];
// Initialize the SpeedDial control
var speeddial = new ej.buttons.SpeedDial({
items: items,
content: 'Edit',
target: '#targetElement',
beforeItemRender: (args)=> {
//Your required action here
}
});
// Render initialized SpeedDial
speeddial.appendTo('#speeddial');
Below example demonstrates the clicked event of the Speed Dial control.
ej.base.enableRipple(true);
// Initialize action items
var items = [
{ text: 'Cut'},
{ text: 'Copy'},
{ text: 'Paste'}
];
// Initialize SpeedDial control with clicked event
var speeddial = new ej.buttons.SpeedDial({
items: items,
content:'Edit',
target: '#targetElement',
clicked: actionClicked
});
// Render initialized SpeedDial.
speeddial.appendTo('#speeddial');
function actionClicked(args) {
alert(args.item.text + " is clicked");
}
<!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="https://cdn.syncfusion.com/ej2/26.2.4/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/26.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<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>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}