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.

index.js

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");
}

index.html

<!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/28.1.33/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/28.1.33/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>

styles.css

#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}