Client-Side API Overview for ASP.NET Core Dashboard

• Apr 05, 2021
• 2 minutes to read

The Web Dashboard is a client-server control. On the client side, the Web Dashboard utilizes the DashboardControl to supply users with a UI to design and interact with a dashboard. You can use its API to specify settings on the client and send requests to the server. You can also specify some settings in a view.

Control Options

Use the DashboardBuilder options to configure the control in a view. The following code shows how to set the control’s width, height, and working mode:

@(Html.DevExpress().Dashboard("dashboardControl1")
    .Width("100%")
    .Height("100%")
    .WorkingMode("Viewer")
)

Call the DashboardBuilder.Extensions method to access extension options. The code sample below shows how to get the ViewerApi extension and handle the ItemWidgetCreated event:

@(Html.DevExpress().Dashboard("dashboardControl1")
    .Width("100%")
    .Height("100%")
    .Extensions(ext => {
        ext.ViewerApi(options => {
            options.OnItemWidgetCreated("displayItemName");
        });
    })
)

The following function displays an alert window with the name of the dashboard item for which the event occurred:

<script>
    function displayItemName(e) {
        alert("The item name is " + e.itemName);
    }
</script>

DashboardControl API

Handle the BeforeRender event to access the underlying DashboardControl.

@(Html.DevExpress().Dashboard()
    .Name("dashboardControl")
    .Width("100%")
    .Height("100%")
    .OnBeforeRender("onBeforeRender")
) 

The sender is the DashboardControl instance. The following code shows how you can remove the export extension, modify the Toolbox, and get the dashboard item data:

function onBeforeRender(sender) {
    var dashboardControl = sender;               

    dashboardControl.unregisterExtension("dashboardExport");        

    var toolboxExtension = dashboardControl.findExtension("toolbox");
    toolboxExtension.removeMenuItem("create-dashboard");

    var webViewerApi = dashboardControl.findExtension('viewer-api');
    var chartClientData = webViewerApi.getItemData("chartDashboardItem1");
}        

See the following article for information on how you can customize the client: UI Elements and Customization.