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 Properties

  • 3 minutes to read

The Dashboard component for React uses properties 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 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;

Use the DashboardControlOptions.ajaxRemoteService property to access the Ajax-based remote service used to communicate with the server side. The following code sets the server's URL and passes a custom Authorization header from the client:

import React from 'react';
import DashboardControl, { AjaxRemoteService } from 'devexpress-dashboard-react';

const headerAuth = { "Authorization": "AuthToken123" };

function App() {
  return (
    <div style={{ position : 'absolute', top : '0px', left: '0px', right : '0px', bottom: '0px' }}>
      <DashboardControl style={{ height: '90%' }} 
        endpoint="http://localhost:5000/api/dashboard">        
          <AjaxRemoteService
            headers = { headerAuth }>  
      </DashboardControl>
  </div>
  );
};

export default App;

See the Modify Extensions topic for information on how to configure the extensions property.

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