Event in Vue Speed dial component

8 Aug 20238 minutes to read

This section explains the Speed Dial events that will be triggered when appropriate actions are performed.

clicked

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.

<template>
    <ejs-speeddial id='speeddial' content='Edit'  target='#targetElement' :items='items' :clicked="clicked"></ejs-speeddial>
</template>

<script>
import Vue from 'vue';
import { SpeedDialPlugin  } from "@syncfusion/ej2-vue-buttons";

Vue.use(SpeedDialPlugin);
export default {
    data () {
        return {
            items: [
                { text: 'Cut' },
                { text: 'Copy' },
                { text: 'Paste' }
            ]
        };
    },
    methods: {
      clicked: function(args) {
          //Your required action here
      }
    }
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
</style>

created

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

<template>
    <ejs-speeddial id='speeddial' content='Edit'  target='#targetElement' :items='items' :created="created"></ejs-speeddial>
</template>

<script>
import Vue from 'vue';
import { SpeedDialPlugin  } from "@syncfusion/ej2-vue-buttons";

Vue.use(SpeedDialPlugin);
export default {
    data () {
        return {
            items: [
                { text: 'Cut' },
                { text: 'Copy' },
                { text: 'Paste' }
            ]
        };
    },
    methods: {
      created: function(args) {
          //Your required action here
      }
    }
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
</style>

beforeOpen

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

<template>
    <ejs-speeddial id='speeddial' content='Edit'  target='#targetElement' :items='items' :beforeOpen="beforeOpen"></ejs-speeddial>
</template>

<script>
import Vue from 'vue';
import { SpeedDialPlugin  } from "@syncfusion/ej2-vue-buttons";

Vue.use(SpeedDialPlugin);
export default {
    data () {
        return {
            items: [
                { text: 'Cut' },
                { text: 'Copy' },
                { text: 'Paste' }
            ]
        };
    },
    methods: {
      beforeOpen: function(args) {
          //Your required action here
      }
    }
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
</style>

onOpen

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

<template>
    <ejs-speeddial id='speeddial' content='Edit'  target='#targetElement' :items='items' :onOpen="onOpen"></ejs-speeddial>
</template>

<script>
import Vue from 'vue';
import { SpeedDialPlugin  } from "@syncfusion/ej2-vue-buttons";

Vue.use(SpeedDialPlugin);
export default {
    data () {
        return {
            items: [
                { text: 'Cut' },
                { text: 'Copy' },
                { text: 'Paste' }
            ]
        };
    },
    methods: {
      onOpen: function(args) {
          //Your required action here
      }
    }
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
</style>

beforeClose

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

<template>
    <ejs-speeddial id='speeddial' content='Edit'  target='#targetElement' :items='items' :beforeClose="beforeClose"></ejs-speeddial>
</template>

<script>
import Vue from 'vue';
import { SpeedDialPlugin  } from "@syncfusion/ej2-vue-buttons";

Vue.use(SpeedDialPlugin);
export default {
    data () {
        return {
            items: [
                { text: 'Cut' },
                { text: 'Copy' },
                { text: 'Paste' }
            ]
        };
    },
    methods: {
      beforeClose: function(args) {
          //Your required action here
      }
    }
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
</style>

onClose

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

<template>
    <ejs-speeddial id='speeddial' content='Edit'  target='#targetElement' :items='items' :onClose="onClose"></ejs-speeddial>
</template>

<script>
import Vue from 'vue';
import { SpeedDialPlugin  } from "@syncfusion/ej2-vue-buttons";

Vue.use(SpeedDialPlugin);
export default {
    data () {
        return {
            items: [
                { text: 'Cut' },
                { text: 'Copy' },
                { text: 'Paste' }
            ]
        };
    },
    methods: {
      onClose: function(args) {
          //Your required action here
      }
    }
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
</style>

beforeItemRender

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

<template>
    <ejs-speeddial id='speeddial' content='Edit'  target='#targetElement' :items='items' :beforeItemRender="beforeItemRender"></ejs-speeddial>
</template>

<script>
import Vue from 'vue';
import { SpeedDialPlugin  } from "@syncfusion/ej2-vue-buttons";

Vue.use(SpeedDialPlugin);
export default {
    data () {
        return {
            items: [
                { text: 'Cut' },
                { text: 'Copy' },
                { text: 'Paste' }
            ]
        };
    },
    methods: {
      beforeItemRender: function(args) {
          //Your required action here
      }
    }
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
</style>

Below example demonstrates the clicked event of the Speed Dial component.

app.vue

<template>
    <div>
        <div id="targetElement" style="position:relative;min-height:350px;border:1px solid;"></div>
        <ejs-speeddial id='speeddial' content='Edit'  target='#targetElement' :items='items' :clicked="clicked"></ejs-speeddial>
    </div>
</template>

<script>
import Vue from 'vue';
import { SpeedDialPlugin  } from "@syncfusion/ej2-vue-buttons";
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
Vue.use(SpeedDialPlugin);
export default {
    data () {
        return {
            items: [
                { text: 'Cut' },
                { text: 'Copy' },
                { text: 'Paste' }
            ]
        };
    },
    methods: {
      clicked: function(args) {
          alert(args.item.text+" is clicked");
      }
    }
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
</style>