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
).
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.
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