Designer and Viewer Modes

• Aug 03, 2020
• 2 minutes to read

The ASPxDashboard 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
• Switch Between Working Modes on Client
• Enable End Users to Switch Between Working Modes
• Example

Specify Working Mode on Server

You can use the ASPxDashboard.WorkingMode property to specify the initial working mode on a server.

Switch Between Working Modes on Client

Use the following two approaches to switch the working mode on the client side:

• Change the working mode of the client-side DashboardControl object. Refer to HTML JavaScript Dashboard Control | Designer and Viewer Modes for more details.
• Switch the working mode using the ASPxClientDashboard object’s API. To learn how to do this, see the Example.

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.

Example

This example shows how to switch between the Web Dashboard‘s working modes on the client-side.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-create-a-web-dashboard-designer-application-t362490.

ASPX

<div style="position: absolute; left: 80px; right: 0; top:0; bottom:30px;">
    <dx:ASPxButton ID="ASPxButton1" runat="server" Text="Switch to Viewer" 
        ClientInstanceName="button"
        AutoPostBack="False">
        <ClientSideEvents Click="function(s, e) {
            var workingMode = webDashboard.GetWorkingMode();
            if (workingMode == 'designer') {
                webDashboard.SwitchToViewer();
                button.SetText('Switch to Designer');
            }
            else {
                webDashboard.SwitchToDesigner();
                button.SetText('Switch to Viewer');
            }
        }" />
    </dx:ASPxButton>
</div>
<div style="position: absolute; left: 0; right: 0; top:30px; bottom:0;">
    <dx:ASPxDashboard ID="ASPxDashboard1" runat="server" Width="100%" Height="100%" 
    ClientInstanceName="webDashboard" 
        onconfiguredataconnection="ASPxDashboard1_ConfigureDataConnection">
    </dx:ASPxDashboard>
</div>