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

javascript

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;