Search results

Event in Vue SpeedDial component

08 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 component 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
<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.

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

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

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

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

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

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

Source
Preview
app.vue
Copied to clipboard
<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>