Download DevExpress v20.2 full version
DevExpress Universal has all the platform controls needed for .NET development, including more than 600 UI controls, reporting platforms, DevExpress Dashboard eXpressApp framework, CodeRush for Visual Studio and a series of auxiliary tools.
The method described in this article is applicable to the client-server model. You need a server (an ASP.NET Core or ASP.NET MVC backend) and a client (front-end) application, which includes all the necessary styles, scripts and HTML template. Note that the script version on the client should match the library version on the server, down to the minor version.
This tutorial will show you how to add the DashboardControl component to the React application and display the Web Dashboard.
prerequisites
- Make sure to install Node.js 6+ and npm 5.2+ on your computer .
- To use this tutorial, you need to be familiar with the basic concepts and patterns of React, and learn the basics: reactjs.org .
Create a React application
At the command prompt, create a React application:
cmd
npx create-react-app dashboard-react-app
After creating the project, navigate to the created folder:
cmd
cd dashboard-react-app
Install Dashboard Package
The devexpress-dashboard npm package refers to devextreme and @devexpress/analytics-core as peerDependencies. The peerDependencies package should be installed manually. This allows developers to control the version of the peerDependencies package and ensure that the package is installed once. The devexpress-dashboard-react package contains DashboardComponent components.
Install the dashboard package with the necessary peerDependencies:
cmd
npm install [email protected] [email protected] @devexpress/[email protected] [email protected] [email protected] --save
Modify app content
Modify the App.js file as follows to display dashboard components on the page:
javascript
import React from 'react';
import './App.css';
import { DashboardControl } from 'devexpress-dashboard-react';
function App() {
return (
<div style={
{ position : 'absolute', top : '0px', left: '0px', right : '0px', bottom: '0px' }}>
<DashboardControl style={
{ height: '100%' }}
endpoint="https://demos.devexpress.com/services/dashboard/api">
</DashboardControl>
</div>
);
}
export default App;
The DashboardControlOptions.endpoint property specifies the URL used to send data requests to the server. This value should consist of the base URL of the server hosting the Web Dashboard and the routing prefix ( the value set in the MVC / .NET Core MapDashboardRoute property).
Add global style
Replace the contents of the index.css file with the following global styles:
css
@import url("../node_modules/jquery-ui/themes/base/all.css");
@import url("../node_modules/devextreme/dist/css/dx.common.css");
@import url("../node_modules/devextreme/dist/css/dx.light.css");
@import url("../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css");
@import url("../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css");
@import url("../node_modules/@devexpress/analytics-core/dist/css/dx-querybuilder.css");
@import url("../node_modules/devexpress-dashboard/dist/css/dx-dashboard.light.css");
Run the application
Run the application.
cmd
above sea level start
Open http://localhost:3000/ in the browser to view the results. The Web Dashboard displays the dashboard stored on the pre-configured server (https://demos.devexpress.com/services/dashboard/api). Follow the instructions below to configure the server:
Go to DevExpress Chinese website to get first-hand latest product information!
DevExpress Technical Exchange Group 3: 700924826 Welcome to join the group discussion