Client-Side API Overview
- 2 minutes to read
The Web Dashboard consists of client and server parts:
- The client part provides 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:
@Html.DevExpress().Dashboard(settings => {
settings.Name = "Dashboard";
// ...
settings.ClientSideEvents.BeforeRender = "onBeforeRender";
}).GetHtml()
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 API section that describes concepts that apply to all ASP.NET MVC extensions. To access the ASPxClientDashboard via JavaScript, specify the DashboardExtensionSettings.Name property.
The code sample below shows how to specify DashboardExtensionSettings.Name and handle the ASPxClientDashboard.DashboardChanged event:
@Html.DevExpress().Dashboard(settings => {
settings.Name = "clientDashboard1";
settings.ClientSideEvents.BeforeRender = "onDashboardChanged";
}).GetHtml()
In the event handler, you can use the specified client identifier to access the ASPxClientDashboard API:
<head>
<script>
function onDashboardChanged(sender) {
alert("DashboardId=" + clientDashboard1.GetDashboardId());
// ...
}
</script>
</head>
Refer to the Client-Side API topic for information on how to handle client-side events.