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 that provides a user interface for designing a dashboard and interacting with it. You can use its API to specify various client settings, perform actions, etc., or you can use the ASPxClientDashboard object which is a wrapper over the DashboardControl with a 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. For instance, see Extensions to learn how to customize the Web Dashboard using extensions.
ASPxClientDashboard
ASPxDashboard, as well as other DevExpress ASP.NET controls, provide a client-side API using the ASPxClientDashboard object. 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.