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.

Change Control Options

  • 2 minutes to read

The Dashboard component for React uses options listed in the DashboardControlOptions class.

You can pass the control's properties as arbitrary inputs (called "props") to change the control's properties.

The following example changes the dashboardId property according to the selected SelectBox's value.

You can use the React's useState hook to return a stateful value (dashboardId), and a function to update it (setDashboardId).

View Example

import React, { useState } from 'react';
import DashboardControl from 'devexpress-dashboard-react';
import SelectBox from 'devextreme-react/select-box';

const store = [
  "RevenueAnalysis",
  "SalesDetails",
  "SalesOverview"
]

function App() {
  const [dashboardId, setDashboardId] = useState(store[2]);
  return (
    <div style={{ position : 'absolute', top : '0px', left: '0px', right : '0px', bottom: '0px' }}>      
      <SelectBox
        dataSource={store}
        value={ dashboardId }
        onValueChanged={ (e) => setDashboardId(e.value) }
      ></SelectBox>
      <DashboardControl style={{ height: '90%' }} 
        endpoint="https://demos.devexpress.com/services/dashboard/api"
        workingMode="Designer"
        dashboardId = {dashboardId}
      ></DashboardControl>
  </div>
  );
};

export default App;

The example below displays a dashboard in a popup window. The useState hook updates the state that contains the dashboard's ID, name, and information about popup visibility. When you click a button, the popup becomes visible and renders a dashboard with the specified ID.

View Example: How to display the Web Dashboard in a popup (React)

import React, { useState } from 'react';
import {DashboardControl} from 'devexpress-dashboard-react';
import Button from 'devextreme-react/button';
import Popup from 'devextreme-react/popup';

function App() {
  const store = [
    {"id": "support", "name": "Support Traffic"},
    {"id": "products", "name": "Product Details"},
  ];
  const dashboardEndpoint = `http://localhost:5000/api/dashboard`

  const [state, setState] = useState({ dashboardInfo: store[0], popupVisible: false  })

  const renderDashboard = () => {
    return <DashboardControl
    style={{ height:'100%', display: 'block', width: '100%' }}
    dashboardId = {state.dashboardInfo.id}
    workingMode = 'ViewerOnly'
    endpoint= { dashboardEndpoint }>
  </DashboardControl>
  }

  return (    
    <div>
      <p>Click one of the buttons below to display a dashboard in the popup window:</p>
      <Button text="Show Support Dashboard" onClick={ () => { setState(prevState => ({...prevState, dashboardInfo: store[0], popupVisible: true })) }}></Button>
      <Button text="Show Products Dashboard" onClick={ () => { setState(prevState => ({...prevState, dashboardInfo: store[1], popupVisible: true })) }}></Button>
      <Popup
          visible={state.popupVisible}
          title={state.dashboardInfo.name}
          contentRender =  {renderDashboard}
          onHiding = { () => { setState(prevState => ({...prevState, popupVisible: false })) }}>
        </Popup>
  </div>
  );
};

export default App;
TIP

DevExtreme Documentation: Component Configuration Syntax

React Documentation: Components and Props