Change Control Properties

• Feb 02, 2021
• 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;