Dashboard for React - How to access API of underlying widgets

The following example shows how to customize options of underlying widgets in the Dashboard Component for React.

Use the ViewerApiExtension.on and ViewerApiExtension.off methods to subscribe and unsubscribe from the events.

The Web Dashboard renders an underlying widget as follows:

1. The Web Dashboard loads the widget’s default configuration.

   The onItemWidgetOptionsPrepared event is raised. Handle this event to customize the DevExtreme widget’s options before the widget is rendered.

2. The Web Dashboard renders the UI component with the configured options.

   The onItemWidgetCreated event is raised. It occurs once for each UI component when the dashboard is loaded to the client. You can use this event to customize the UI component instance.

3. The UI component is updated (for example, when you apply filters or change parameter values).

   The onItemWidgetUpdated event is raised. It occurs every time the UI component should be re-rendered.

The customized options are listed below:

• The hovered grid row is highlighted in the underlying dxDataGrid.
• A standard tooltip that appears when a user hovers over a chart's series point is disabled.
• A custom tooltip appears when a user clicks a label on the chart's argument axis. The onArgumentAxisClick property executes a function that invokes the custom tooltip.
• The animation is enabled for the dxChart and dxPieChart UI components.
• The dxPieChart UI component displays a legend.
• The font weight and an interval between major ticks are modified in the dxCircularGauge UI component.

The example uses a modular client-server approach. The server (backend) project communicates with the client (frontend) application that includes all the necessary styles, scripts and HTML templates. Note that the script version on the client must match the version of libraries on the server.

• The asp-net-core-server folder contains an ASP.NET Core Dashboard application.
• The dashboard-react-app folder contains a client application.

Quick Start

Server

In the asp-net-core-server folder run the following command:

dotnet run

The server starts at http://localhost:5000 and the client gets data from http://localhost:5000/api/dashboard. To debug the server, run the asp-net-core-server application in Visual Studio and change the client's endpoint property according to the listening port: https://localhost:44397/api/dashboard.

See the following section for information on how to install NuGet packages from the DevExpress NuGet feed: Install DevExpress Controls Using NuGet Packages.

This server allows CORS requests from all origins with any scheme (http or https). It is insecure, because any website can make cross-origin requests to the app. We recommend you specify the client application's URL directly to prohibit clients from getting access to your personal information on your server. Learn more: Cross-Origin Resource Sharing (CORS)

Client

In the dashboard-react-app folder, run the following commands:

npm install
npm run dev

Open your browser and navigate to the URL specified in the command output to see the result.

Files to Review

• App.jsx

Documentation

• Access to Underlying Widgets
• Install DevExpress Controls Using NuGet Packages

More Examples

• Dashboard Component for React - Configuration
• ASP.NET Core Dashboard - How to access API of underlying widgets
• ASP.NET MVC Dashboard - How to access API of underlying widgets
• ASP.NET Web Forms Dashboard - How to access API of underlying widgets

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)