DxJSCustomization Class

Contains options that allow you to customize the Dashboard component with JavaScript.

Namespace: DevExpress.DashboardBlazor

Assembly: DevExpress.Dashboard.v21.1.Blazor.dll

NuGet Package: DevExpress.Blazor.Dashboard

Declaration

C#

public class DxJSCustomization :
    ComponentBase

VB.NET

Public Class DxJSCustomization
    Inherits ComponentBase

Remarks

You can use JavaScript to customize a Dashboard component for Blazor. For this, configure the underlying DashboardControl instance.

If you have JavaScript code that uses DashboardControl classes and properties, this code should be executed after scripts that the DxDashboard component requires. To do this, handle the OnScriptsLoading event and use the e.Scripts property to manage the script collection and load your scripts at the right time. The script order in the Scripts collection defines the loading order. To identify the collection’s items and manage the collection, use the ScriptIdentifiers constants.

Handle the DashboardControl Events

To handle the DashboardControl events, create an object in window and add event handlers. Pass the object name to the DxJSCustomization.Identifier property.

Register a Custom Extension

Follow the steps below to register a custom extension (for example, a custom item):

1. In window, create an object with event handlers. Pass the object’s name to the DxJSCustomization.Identifier property.

2. Register custom script files. Handle the DxJSCustomization.OnScriptsLoading event and add the custom script’s path to the e.Scripts collection.

3. Handle the DashboardControl’s onBeforeRender event and register the custom item extension with the DashboardControl.registerExtension method call.

See the example below for a code sample.

Examples

The example below shows how you can customize the Dashboard component with JavaScript:

• The DxJSCustomization class provides access to the DashboardControl event handlers.
• The onBeforeRender event handler registers the custom Parameter extension and removes the “New…” item from the dashboard menu.
• The onItemCaptionToolbarUpdated event handler adds a custom toolbar item to the Grid’s caption.

In this example, the name of the object with event handlers is dashboardEvents. This name is used in the DxJSCustomization.Identifier property.

dashboard-events-scripts.js

window.dashboardEvents = {
    onBeforeRender: (args) => {
        // Registers the Parameter item.
        var dashboardControl = args.component;
        dashboardControl.registerExtension(new ParameterItemExtension(dashboardControl));

        // Removes the "New..." menu item from the dashboard menu.
        var toolbox = dashboardControl.findExtension('toolbox');
        var createItem = toolbox.menuItems().filter(item => item.id === "create-dashboard")[0];
        toolbox.menuItems.remove(createItem);
    },
    // Adds a new custom toolbar item to the dashboard item caption.
    extensions: {
        viewerApi: {
            onItemCaptionToolbarUpdated: function (e) {
                if (e.itemName === "gridDashboardItem1") {
                    e.options.stateItems.push({
                        type: "menu",
                        icon: "baseCircle",
                        menu: {
                            type: "icons",
                            items: ["greenCircle", "yellowCircle", "redCircle"],
                            selectionMode: "none",
                            title: "Circles",
                            itemClick: function (itemData) {
                                alert(itemData.toString());
                            }
                        }
                    });
                }
            }
        }
    }    
}

Dashboard.razor

@page "/dashboard"

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

@code{
    public void OnDashboardScriptsLoading(ScriptsLoadingEventArgs e) {
        e.Scripts.Add("/parameter-item.js");
    }
}

View Example: Blazor Server View Example: Blazor WebAssembly

Inheritance

Object

ComponentBase

DxJSCustomization