Access a DashboardControl Instance in React

• Apr 20, 2023

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.

App.js

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;