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 React application.

Create a ref and use the ref attribute to attach it to the target component. You can then use the instance property to access the underlying DashboardControl and its members.

import { DashboardControl } from 'devexpress-dashboard-react';
import Button from 'devextreme-react/button';

const dashboardControlRef = React.createRef();

function reloadData() {
  dashboardControlRef.current.instance.reloadData();
};

function App() {
  return (    
    <div style={{ position : 'absolute', top : '0px', left: '0px', right : '0px', bottom: '0px' }}>      
      <Button text="Reload data" onClick={reloadData} />
      <DashboardControl style={{ height: '90%' }} 
        ref={ dashboardControlRef }
        endpoint="https://demos.devexpress.com/services/dashboard/api"
        workingMode="Designer">
      </DashboardControl>
  </div>
  );
};

export default App;