DevExpress.Blazor.Dashboard 26.1.6

DevExpress BI Dashboard for Blazor

DevExpress BI Dashboard is a royalty-free data visualization and analysis product that allows developers and users to create and modify interactive, data-driven dashboards. Install this package to integrate the dashboard UI into your Blazor Server and Blazor WebAssembly Hosted applications. The DxDashboard component wraps the JavaScript Dashboard control and communicates with an ASP.NET Core backend.

Key Features

• More than 15 data visualization widgets, including charts, grids, pivot tables, cards, gauges, maps, treemaps, range filters, filter elements, and layout containers
• Designer and Viewer modes — Switch between the full editing UI and read-only display
• Dashboard storage — Use the file system or implement a custom provider, such as a database, to save and load dashboards
• JavaScript customization — Customize the embedded dashboard control with JavaScript
• Support for popular data source types — SQL, JSON, OLAP, Excel, Object, and more
• Data shaping — Sort, filter, and group data as your needs dictate
• Built-in data analytics capabilities, including calculated fields, aggregates, window functions, dashboard parameters, and more
• Custom items — Extend the built-in dashboard item set

Examples

Example 1: Integrate the Web Dashboard into a Blazor Server Application

1. Install this package together with the ASP.NET Core backend package:

   dotnet add package DevExpress.Blazor.Dashboard
   dotnet add package DevExpress.AspNetCore.Dashboard
   

2. Implement a Dashboard Controller:

   using DevExpress.DashboardAspNetCore;
   using DevExpress.DashboardWeb;
   using Microsoft.AspNetCore.DataProtection;
   
   public class DefaultDashboardController : DashboardController {
       public DefaultDashboardController(DashboardConfigurator configurator, IDataProtectionProvider? dataProtectionProvider = null)
           : base(configurator, dataProtectionProvider) {
       }
   }
   

3. Create a Data/Dashboards folder in the project to store dashboard files. In Program.cs, register the DashboardConfigurator as a scoped service and map the dashboard route:

   using DevExpress.DashboardAspNetCore;
   using DevExpress.DashboardWeb;
   using Microsoft.Extensions.FileProviders;
   
   IFileProvider fileProvider = builder.Environment.ContentRootFileProvider;
   IConfiguration configuration = builder.Configuration;
   
   builder.Services.AddRazorComponents()
       .AddInteractiveServerComponents();
   builder.Services.AddRazorPages();
   builder.Services.AddServerSideBlazor();
   builder.Services.AddScoped<DashboardConfigurator>(serviceProvider => {
       var configurator = new DashboardConfigurator();
       configurator.SetDashboardStorage(new DashboardFileStorage(fileProvider.GetFileInfo("Data/Dashboards").PhysicalPath));
       configurator.SetConnectionStringsProvider(new DashboardConnectionStringsProvider(configuration));
       return configurator;
   });
   // ...
   app.MapDashboardRoute("api/dashboard", "DefaultDashboard");
   

4. Reference the required namespaces in _Imports.razor:

   @using DevExpress.DashboardBlazor
   @using DevExpress.DashboardWeb
   

5. Add the DxDashboard component to a Razor page. Set the Endpoint property to the route prefix you registered with MapDashboardRoute:

   @page "/dashboard"
   @rendermode InteractiveServer
   
   <DxDashboard Endpoint="api/dashboard"
                WorkingMode="WorkingMode.Designer"
                style="width: 100%; height: 800px;">
   </DxDashboard>
   

The WorkingMode property switches the control between Designer (full editing UI), Viewer, and ViewerOnly (read-only) modes.

For step-by-step instructions, refer to the following help topics:

• Add a Web Dashboard to a Blazor Server Application
• Add a Web Dashboard to a Blazor WebAssembly Application

Example 2: Customize the Control with the Client-Side API

Use the DxJSCustomization component to handle client-side DashboardControl events. The following code registers the Dashboard Panel extension, which displays a list of available dashboards, and disables export functionality:

@using DevExpress.Blazor

@DxResourceManager.RegisterScripts(config => config.Register(new DxResource("/dashboard-events.js", 900)))

<DxDashboard Endpoint="api/dashboard" WorkingMode="WorkingMode.Designer" style="width: 100%; height: 800px;">
    <DxJSCustomization Identifier="dashboardEvents"></DxJSCustomization>
</DxDashboard>

// wwwroot/dashboard-events.js
window.dashboardEvents = {
    onBeforeRender: (args) => {
        const dashboardControl = args.component;
        // Display the Dashboard Panel with a list of available dashboards.
        dashboardControl.registerExtension(
            new DevExpress.Dashboard.DashboardPanelExtension(dashboardControl));
        // Remove the export functionality.
        dashboardControl.unregisterExtension("dashboardExport");
    }
}

For more information on JavaScript customization, refer to the following help topic: JavaScript Customization of Dashboard Component.

Demos

• DevExpress Blazor Dashboard Demo
• DevExpress BI Dashboard GitHub Demos

Evaluation Period, Pricing Options, and Licensing Terms

Whether you own a license or want to start a 30-day evaluation, download and register your DevExpress license key. To obtain your key, sign in to the DevExpress Download Manager with an existing DevExpress.com account or create a free account. For key registration instructions, see License Key for DevExpress Products.

If you purchase a license after evaluating a product, re-register your updated DevExpress license key to remove evaluation warnings and messages.

This package is included in the following commercial subscriptions:

• DevExpress Universal Subscription

See DevExpress Subscriptions & Licensing for subscription comparison tables, purchasing FAQ, and licensing information.

Documentation

• Dashboard Component for Blazor
• Add a Web Dashboard to a Blazor Server Application
• Add a Web Dashboard to a Blazor WebAssembly Application
• Create Dashboards on the Web
• End-User Documentation for DevExpress BI Dashboard

Software Bill of Materials (SBOM)

To access SBOM files for DevExpress packages, please refer to the following article: Software Bill of Materials (SBOM) for DevExpress .NET assemblies/NuGet packages, JavaScript, VCL and other redistributable artifacts.

See Also: Information Security | Security - What You Need to Know

Useful Online Resources

• www.devexpress.com
• DevExpress Support Center
• DevExpress Blogs