Skip to main content
All docs
V25.1
  • DxJSCustomization Class

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

    Namespace: DevExpress.DashboardBlazor

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

    NuGet Package: DevExpress.Blazor.Dashboard

    Declaration

    public class DxJSCustomization :
        ComponentBase

    Remarks

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

    Use the DxResourceManager.RegisterScripts() method to manage client resources and custom scripts. Note that custom scripts that use DashboardControl classes and properties, should be executed after scripts that the DxDashboard component requires. For a list of DevExpress resources and their positions, refer to the following help topic: DevExpress Resources.

    Handle the DashboardControl Events

    To handle 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. Use the DxResourceManager.RegisterScripts() method to register custom script files.

    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 following example shows how you can customize the Dashboard component with JavaScript:

    • The DxJSCustomization class provides access to 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.

    window.dashboardEvents = {
        onBeforeRender: (args) => {
            // Registers the Parameter item and the Dashboard Panel.
            var dashboardControl = args.component;
            dashboardControl.registerExtension(new ParameterCustomItem(dashboardControl));
            dashboardControl.registerExtension(new DevExpress.Dashboard.DashboardPanelExtension(dashboardControl));
            // Register icons for a custom toolbar item.
            DevExpress.Dashboard.ResourceManager.registerIcon('<svg id="baseCircle" class="dx-dashboard-icon" style="fill: currentColor" viewBox="0 0 24 24" width="24" height="24"><circle cx="12" cy="12" r="11" /></svg>');
            DevExpress.Dashboard.ResourceManager.registerIcon('<svg id="greenCircle" class="dx-dashboard-green-icon" viewBox="0 0 24 24" width="48" height="48"><circle cx="12" cy="12" r="11" /></svg>');
            DevExpress.Dashboard.ResourceManager.registerIcon('<svg id="yellowCircle" class="dx-dashboard-yellow-icon" viewBox="0 0 24 24" width="48" height="48"><circle cx="12" cy="12" r="11" /></svg>');
            DevExpress.Dashboard.ResourceManager.registerIcon('<svg id="redCircle" class="dx-dashboard-red-icon" viewBox="0 0 24 24" width="48" height="48"><circle cx="12" cy="12" r="11" /></svg>');
    
            // 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());
                                }
                            }
                        });
                    }
                }
            }
        }    
    }
    

    View Example: Blazor Server View Example: Blazor WebAssembly

    Inheritance

    Object
    ComponentBase
    DxJSCustomization
    See Also