Handle Events

• Feb 27, 2023

Use the : syntax to handle an event. The following code handles the onDashboardInitialized event and shows the dashboard identifier in a toast message:

App.vue

<template>
    <div>
        <DxDashboardControl 
            style="height:345px; display: 'block'; width: '100%';"
            endpoint="https://demos.devexpress.com/services/dashboard/api"
            workingMode="Designer"      
            :onDashboardInitialized="onDashboardInitialized"
        />
    </div>  
</template>

<script>
import DxButton from 'devextreme-vue/button';
import { DxDashboardControl } from 'devexpress-dashboard-vue';
import notify from "devextreme/ui/notify";

export default {
    components: {
        DxDashboardControl,
        DxButton
    },
    methods: {
        onDashboardInitialized: function(args) {
          notify(args.dashboardId);
        }
    }
}
</script>

For Vue 3 you can also use the @ syntax:

App.vue

<template>
    <div>
        <DxDashboardControl 
            style="height:345px; display: 'block'; width: '100%';"
            endpoint="https://demos.devexpress.com/services/dashboard/api"
            workingMode="Designer"      
            @dashboardInitialized="onDashboardInitialized"
        />
    </div>  
</template>

Tip

DevExtreme Documentation: Event Handling

Vue Documentation: Event Handling