Client-Side API Overview
- 2 minutes to read
The ASPxDashboard control comprises client and server parts:
- The client part supplies end-users with a user interface for designing a dashboard and interacting with it.
- The server part handles client data requests and provides various backend capabilities such as accessing data, storing dashboards, etc.
On the client side, the Web Dashboard utilizes the DashboardControl to provide a user interface. You can use its API to specify client settings, perform actions, etc., or you can use the ASPxClientDashboard object which is a wrapper for the DashboardControl with similar API.
DashboardControl
To access the client-side DashboardControl, handle the ASPxClientDashboard.BeforeRender event:
<dx:ASPxDashboard ID="ASPxDashboard1" runat="server">
<ClientSideEvents BeforeRender="onBeforeRender" />
</dx:ASPxDashboard>
Then, call the ASPxClientDashboard.GetDashboardControl method to get the DashboardControl instance:
<head>
<script>
function onBeforeRender(sender) {
var dashboardControl = sender.GetDashboardControl();
// ...
}
</script>
</head>
You can now use its API to specify various client-side settings, perform actions, etc. See Client-Side Customization for information on how you can customize the client part of the Web Dashboard control.
ASPxClientDashboard
The ASP.NET MVC Dashboard, like other MVC extensions, uses the ASPxClientDashboard object for client-side API. See the Client-Side Functionality section that describes concepts common to all ASP.NET controls. You should specify the ASPxDashboard.ClientInstanceName property to access the ASPxClientDashboard via JavaScript.
The code sample below shows how to specify ASPxDashboard.ClientInstanceName and handle the ASPxClientDashboard.DashboardChanged event:
<dx:ASPxDashboard ID="ASPxDashboard1" runat="server" ClientInstanceName="clientDashboard1">
<ClientSideEvents DashboardChanged="onDashboardChanged" />
</dx:ASPxDashboard>
In the event handler, you can access the ASPxClientDashboard API using the specified client identifier:
<head>
<script>
function onDashboardChanged(sender) {
alert("DashboardId=" + clientDashboard1.GetDashboardId());
// ...
}
</script>
</head>
Refer to the Client-Side Events topic for details on how to handle client-side events.