Client-Side API Overview

  • 2 minutes to read

You can access extensions to customize the Web Dashboard control. The extension is an independent JavaScript module/class that adds specific functionality to the control. For example, the DashboardExportExtension enables users to export the dashboard's data, the DashboardParameterDialogExtension adds dashboard parameters, and the ToolboxExtension allows you to customize the Toolbox.

You can configure the control before it is rendered:

window.onload = function () {
    var dashboardControl = = new DevExpress.Dashboard.DashboardControl(document.getElementById("web-dashboard"), {
        // Configure the control's options here:
    });    
    // Customize the control here:

    dashboardControl.render();
}

The DashboardControlOptions class contains the configuration options you can configure in the control's constructor before the control is initialized:

window.onload = function () {
    var dashboardControl = new DevExpress.Dashboard.DashboardControl(document.getElementById("web-dashboard"), {
        endpoint: "/api/dashboard",
        workingMode: "ViewerOnly",
        initialDashboardId: "dashboard1"
    });

    dashboardControl.render();
}

You can use the DashboardControlOptions.extensions property to access registered extension settings in the DashboardControl's constructor. The code sample below shows how to configure DashboardExportExtensionOptions to disable export:

window.onload = function () {
    var dashboardControl = new DevExpress.Dashboard.DashboardControl(document.getElementById("web-dashboard"), {
        endpoint: "/api/dashboard",
        extensions: {
            'dashboardExport': {
                allowExportDashboard: false,
                allowExportDashboardItems: false
            }
        });
    }

    dashboardControl.render();
}

Use the DashboardControlOptions.ajaxRemoteService property to access the Ajax-based remote service used to communicate with the server side. The following code sets the server's URL and passes a custom Authorization header from the client:

<script>
  window.onload = function () {
    var dashboardControl = new DevExpress.Dashboard.DashboardControl(document.getElementById("web-dashboard"), {
        endpoint: "{baseURL}/api/dashboard",
        ajaxRemoteService: {
            headers: {
                'Authorization': 'AuthToken123'
            }
        }
    });
  }
</script>

The code sample below shows how to handle the ItemCaptionToolbarUpdated event and add a custom button to the Chart's dashboard item caption:

window.onload = function () {
    var dashboardControl = new DevExpress.Dashboard.DashboardControl(document.getElementById("web-dashboard"), {
        endpoint: "/api/dashboard",   
        onItemBeginUpdate: function(e) {
            // ...
        },
        extensions: {
            'viewerApi': {
                onItemCaptionToolbarUpdated: function (e) {
                    if (e.itemName === "chartDashboardItem1") {
                        e.options.actionItems.push({
                            type: "button",
                            text: "Custom Button",
                            click: function () {
                                // ...
                            }
                        });
                    }
                }
            }
        },
    });


    dashboardControl.render();
}

To register a new extension, call the registerExtension method before the control is rendered and pass the extension instance as a parameter. The code below registers the DashboardPanelExtension:

window.onload = function () {
    var dashboardControl = new DevExpress.Dashboard.DashboardControl(document.getElementById("web-dashboard"), {
        // ...
    }

    dashboardControl.registerExtension(new DevExpress.Dashboard.DashboardPanelExtension(dashboardControl));
    dashboardControl.render();
}
See Also