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

Designer and Viewer Modes

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

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:

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

Example

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

<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>