All docs
V20.2
20.2
20.1
The page you are viewing does not exist in version 20.1. This link will take you to the root page.
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Access a DashboardControl Instance

The sample below shows how you can access properties and call methods of a DashboardControl in a Vue application.

Create a ref and use the $refs property to obtain the component. You can then use the instance property to access the underlying DashboardControl and its members.

The following code calls the underlying control's reloadData method when you click the 'Reload Data' button:

<template>
    <div>
        <DxButton
            @click="reloadData"
            text="Reload Data"
        />
        <DxDashboardControl 
            style="height:900px; display: 'block'; width: '100%';"
            endpoint="https://demos.devexpress.com/services/dashboard/api"
            workingMode="Designer"
            :ref="dashboardControlRefKey"
        />
    </div>  
</template>

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

const dashboardControlRefKey = "dashboard-control";

export default {
    components: {
        DxDashboardControl,
        DxButton
    },
    data: function() {
        return {
            dashboardControlRefKey
        };
    },
    methods: {
        reloadData() {
          this.dashboardControlInstance.reloadData();
        }
    },
    computed: {
      dashboardControlInstance() {
          return this.$refs[dashboardControlRefKey].instance;
      }
    }
}
</script>