The requested page is not available for the requested platform. You are viewing the content for Default platform.

Designer and Viewer Modes

The Web Dashboard control can act as a Designer or Viewer. The following modes are available:

Mode Description
Designer The Web Dashboard acts as a Dashboard Designer and allows end-users to create, edit and save dashboards. Note that in this case, you can switch to the Viewer mode on the client side.
Viewer The Web Dashboard acts as a Dashboard Viewer and allows you to display dashboards to end-users. Note that in this case, you can switch to the Designer mode on the client side.
ViewerOnly The Web Dashboard acts as a Dashboard Viewer without the capability to switch to the Designer mode on the client side. In this mode, the Web Dashboard does not load the extensions required for designing dashboards.

Specify Working Mode on Server

You can use the DashboardBuilder.WorkingMode property to specify the mode on the server side when configuring the Web Dashboard.

<div style="position: absolute; left:0;top:0;right:0;bottom:0;">
    @(Html.DevExpress().Dashboard("clientDashboardDesigner1")
        .Width("100%")
        .Height("100%")
        .WorkingMode(WorkingMode.ViewerOnly)
    )
</div>

Switch Between Working Modes on Client

You can switch between modes using the client-side DashboardControl.switchToViewer and DashboardControl.switchToDesigner methods.

This example shows how to switch between the Web Dashboard's working modes on the client-side using the onclick event of the added button.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - AspNetCoreWebDashboard</title>

    @Html.DevExpress().StyleSheets()

    <script>
        function switchMode() {
            var button = document.getElementById("button1");
            var workingMode = clientDashboardDesigner1.isDesignMode();
            if (workingMode == true) {
                clientDashboardDesigner1.switchToViewer();
                button.value ="Switch to Designer";
            }
            else {
                clientDashboardDesigner1.switchToDesigner();
                button.value ="Switch to Viewer";
            }
        } 
    </script>

</head>
<body>
    <div style="left:0;top:0;">
        <input type="button" id="button1" value="Switch to Viewer" onclick="switchMode()" />
    </div>
    <div style="position: absolute; left:0;top:30px;right:0;bottom:0;">
        @(Html.DevExpress().Dashboard("clientDashboardDesigner1")
        .Width("100%")
        .Height("100%")
        .WorkingMode(WorkingMode.Designer)
        )
    </div>
    @Html.DevExpress().Scripts()
</body>
</html>

Enable End Users to Switch Between Working Modes

You can allow end users to switch between the Designer and Viewer by enabling the Dashboard Panel.

DashboardPanel_Main