Dashboards Module Troubleshooting Guide

• Dec 03, 2024
• 2 minutes to read

This topic describes common issues that you may encounter when using the Dashboards Module, and steps you can follow to diagnose and resolve these issues.

---

The “The DevExtreme library is included before the Knockout library. Check the order in which the scripts appear on the page” error message in v24.2+

Problem Description:

This error may appear if you previously integrated a DevExtreme widget into your XAF Blazor application with the Dashboards Module using the solution described below.

In v24.2, two breaking changes were introduced that negated the previous workaround:

• The mechanism of adding DevExtreme into Blazor applications has changed
• Dashboard for Blazor - The OnScriptsLoading event became obsolete

Solution:

1. Remove <script> elements that explicitly load DevExtreme and its libraries:

   File: MySolution.Blazor.Server\Pages\_Host.cshtml

   <!-- <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.6.2.min.js"></script> -->
   <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script> -->
   <!-- <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/24.2.3/js/dx.all.js"></script> -->
   

2. Remove the controller (MyController) subscribed to the dashboardViewItem.JSCustomizationModel.OnScriptsLoading event from the MySolution.Blazor.Server project.

3. Add the following line at the top of the MySolution.Blazor.Server\App.razor file:

   File: MySolution.Blazor.Server\App.razor

   @DxResourceManager.RegisterScripts(config => config.Register(CommonResources.DevExtremeJS))
   

The “Your XAF application contains the Dashboards Module and DevExtreme widget” error message in v24.1 and earlier

Problem Description:

An ASP.NET Core Blazor-based XAF application displays the following error message if you add both the Dashboards Module and DevExtreme widget to it:

Your XAF application contains the Dashboards Module and DevExtreme widget. This scenario requires additional setup as described in the following topic: <link>.

Solution:

Follow the steps below to configure such applications:

1. Add the following code that implements a custom controller to the MySolution.Blazor.Server project.

   using DevExpress.DashboardBlazor;
   using DevExpress.ExpressApp;
   using DevExpress.ExpressApp.Dashboards.Blazor.Components;
   using Microsoft.AspNetCore.Components;
   
   public class MyController : ViewController<DetailView> {
       protected override void OnActivated() {
           base.OnActivated();
           View.CustomizeViewItemControl<BlazorDashboardViewerViewItem>(this, CustomizeDashboardViewerViewItem);
       }
       void CustomizeDashboardViewerViewItem(BlazorDashboardViewerViewItem dashboardViewItem) {
           dashboardViewItem.JSCustomizationModel.OnScriptsLoading =
               EventCallback.Factory.Create<ScriptsLoadingEventArgs>(this, OnScriptsLoading);
       }
       private void OnScriptsLoading(ScriptsLoadingEventArgs args) {
           args.Scripts.Remove(ScriptIdentifiers.JQuery);
           args.Scripts.Remove(ScriptIdentifiers.Knockout);
           args.Scripts.Remove(ScriptIdentifiers.DevExtreme);
       }
   }
   

2. Import the JQuery and Knockout libraries into the MySolution.Blazor.Server\Pages\_Host.cshtml file before the DevExtreme library.

   <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.6.2.min.js"></script>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script>
   <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/24.2.3/js/dx.all.js"></script>
   

3. Rebuild and run the application.

---

If this document does not contain sufficient information on how to resolve your issue, feel free to contact Developer Express support engineers at the Support Center.