This example shows how to switch between the Web Dashboard's working modes on the client-side.
- The ASPxDashboard.ClientInstanceName property identifies the control's client name. The ASPxClientDashboard.GetDashboardControl method is used to access the DashboardControl API.
- The DashboardControl.isDesignMode method checks whether the Web Dashboard works in designer mode.
- The DashboardControl.switchToDesigner and DashboardControl.switchToViewer methods are used to switch between modes.
Files to Look At
Documentation
More Examples
Does this example address your development requirements/objectives?
(you will be redirected to DevExpress.com to submit your response)
Example Code
Dashboard_WebDashboard_2010/WebForm1.aspx
ASPx<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Dashboard_WebDashboard_2010.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
html, body, form {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
<script src="Scripts/custom-script.js"></script>
</head>
<body>
<form id="form1" runat="server">
<dx:ASPxButton ID="ASPxButton1" runat="server" Text="Switch to Viewer"
ClientInstanceName="button" AutoPostBack="False">
<ClientSideEvents Click="switchMode" />
</dx:ASPxButton>
<dx:ASPxDashboard ID="ASPxDashboard1" runat="server" Height="95%" ClientInstanceName="webDashboard"
OnConfigureDataConnection="ASPxDashboard1_ConfigureDataConnection">
</dx:ASPxDashboard>
</form>
</body>
</html>
Dashboard_WebDashboard_2010/Scripts/custom-script.js
JavaScriptfunction switchMode(sender) {
var control = webDashboard.GetDashboardControl();
if (control.isDesignMode()) {
control.switchToViewer();
button.SetText('Switch to Designer');
}
else {
control.switchToDesigner();
button.SetText('Switch to Viewer');
}
}