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 back-end functionality such as accessing data, storing dashboards, etc.
On the client side, the Web Dashboard utilizes the DashboardControl. You can use its API to specify settings on the client, perform actions, etc.
Use the DashboardBuilder.Extensions method to access extension options.
The code sample below shows how to get the ViewerApi extension and launch the onItemWidgetCreated function when handling the ItemWidgetCreated event:
@(Html.DevExpress().Dashboard("dashboardControl1") .Width("100%") .Height("100%") .OnBeforeRender("onBeforeRender") .Extensions(ext => { ext.ViewerApi(options => { options.OnItemWidgetCreated("onItemWidgetCreated"); }); }) )The following function displays an alert window with the name of the dashboard item for which the event was fired:
<script> function onItemWidgetCreated(e) { var x = e.itemName; alert(x); } </script>Use the BeforeRender event to access the underlying ASP.NET Core wrapper:
@(Html.DevExpress().Dashboard() .Name("dashboardControl") .Width("100%") .Height("100%") .OnBeforeRender("onBeforeRender") )The sender is the Web Dashboard’s underlying client part:
<head> <script> function onBeforeRender(sender) { var dashboardControl = sender; // Here you can customize a control. } </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.