Search results

Event in JavaScript SpeedDial control

01 Feb 2023 / 4 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.

Copied to clipboard
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');

created

The Speed Dial control triggers the created event when SpeedDial control rendering is completed.

Copied to clipboard
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');

beforeOpen

The SpeedDial control triggers the beforeOpen event with SpeedDialBeforeOpenCloseEventArgs argument before the SpeedDial popup is opened.

Copied to clipboard
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');

onOpen

The SpeedDial control triggers the onOpen event with SpeedDialOpenCloseEventArgs argument when SpeedDial popup is opened.

Copied to clipboard
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');

beforeClose

The SpeedDial control triggers the beforeClose event with SpeedDialBeforeOpenCloseEventArgs argument before the SpeedDial popup is closed.

Copied to clipboard
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');

onClose

The SpeedDial control triggers the onClose event with SpeedDialOpenCloseEventArgs argument when SpeedDial popup is closed.

Copied to clipboard
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');

beforeItemRender

The SpeedDial control triggers the beforeItemRender event with SpeedDialItemEventArgs argument for each SpeedDialItem once it is rendered.

Copied to clipboard
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.

Source
Preview
app.ts
index.html
styles.css
Copied to clipboard
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');
Copied to clipboard
<!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/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="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>
Copied to clipboard
#container {
    visibility: hidden;
}

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