Client-Side API Overview
- 2 minutes to read
The Web Dashboard 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.
Use the DashboardBuilder.Extensions method to get access to the extensions‘ 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 code snippet displays a name of the dashboard item for which the event is fired in an alert window:
<script> function onItemWidgetCreated(e) { var x = e.itemName; alert(x); } </script>Use the BeforeRender event to get access to the underlying part for the 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 the DashboardControl‘s API to specify various client-side settings, perform actions, etc. See Client-Side Customization for more information.