How to: Access API of Underlying Widgets in the ASP.NET MVC Dashboard Extension

Aug 01, 2019
4 minutes to read

This example demonstrates how to customize client widgets used to visualize data within dashboard items at runtime using ASPxClientDashboard‘s API.

The following options are changed.

Highlighting of the hovered grid row is enabled in the underlying dxDataGrid in the ASPxClientDashboard.ItemWidgetCreated event handler.
A standard tooltip that is invoked when an end-user hovers over a chart series point is disabled. You can invoke a tooltip by clicking the required label on the argument axis. The argumentAxisClick event is used for this purpose. Subscription and unsubscription to/from the argumentAxisClick event are performed in the ASPxClientDashboard.ItemWidgetUpdated and ASPxClientDashboard.ItemWidgetUpdating event handlers respectively.
A pie legend is shown for the underlying dxPieChart.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-access-api-of-underlying-widgets-in-the-aspnet-mvc-dashboard-extension-t492411.

using DevExpress.DashboardWeb;
using DevExpress.DashboardWeb.Mvc;
using System;
using System.Web.Mvc;
using System.Web.Routing;

namespace MVCxDashboard_UnderlyingWidgets
{
    public class MvcApplication : System.Web.HttpApplication
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
            routes.IgnoreRoute("{resource}.ashx/{*pathInfo}");
            routes.MapDashboardRoute();

            routes.MapRoute(
                "Default",
                "{controller}/{action}/{id}",
                new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );
        }

        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RegisterRoutes(RouteTable.Routes);
            ModelBinders.Binders.DefaultBinder = new DevExpress.Web.Mvc.DevExpressEditorsBinder();
            DevExpress.Web.ASPxWebControl.CallbackError += Application_Error;

            DashboardConfigurator.Default.SetDashboardStorage(new DashboardFileStorage(@"~/App_Data/"));
        }

        protected void Application_Error(object sender, EventArgs e)
        {
            Exception exception = System.Web.HttpContext.Current.Server.GetLastError();
        }
    }
}

<div style="position: absolute; left: 0; right: 0; top:0; bottom:0;">
    @Html.DevExpress().Dashboard(settings =>
{
    settings.Name = "webDashboard";
    settings.WorkingMode = DevExpress.DashboardWeb.WorkingMode.Viewer;
    settings.ClientSideEvents.ItemWidgetCreated = "function(s, e) { customizeWidgets(e); }";
    settings.ClientSideEvents.ItemWidgetUpdated = "function(s, e) { customizeWidgets(e); }";
    settings.ClientSideEvents.ItemWidgetUpdating = "function(s, e) { unsubscribeFromEvents(e); }";
    settings.Width = Unit.Percentage(100); settings.Height = Unit.Percentage(100);
}).GetHtml()
</div>

using System.Web.Mvc;

namespace MVCxDashboard_UnderlyingWidgets.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
    }
}

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8" />
    <title>@ViewBag.Title</title>
    <script src="@Url.Content("~/Scripts/WidgetsCustomization.js")" type="text/javascript"></script>

    @Html.DevExpress().GetStyleSheets( 
        new StyleSheet { ExtensionSuite = ExtensionSuite.Dashboard }
    )
    @Html.DevExpress().GetScripts( 
        new Script { ExtensionSuite = ExtensionSuite.Dashboard }
    )

</head>

<body>
    @RenderBody()
</body>
</html>

function customizeWidgets(args) {
    if (args.ItemName == "gridDashboardItem1") {
        var grid = args.GetWidget();
        grid.option({
            hoverStateEnabled: true
        });
    }
    if (args.ItemName == "chartDashboardItem1") {
        var chart = args.GetWidget();
        chart.option({
            tooltip: {
                enabled: false
            },
            onArgumentAxisClick: function (info) {
                info.component.getAllSeries()[0].getPointsByArg(info.argument)[0].showTooltip()
            }
        });
    }
    if (args.ItemName == "pieDashboardItem1") {
        var pie = args.GetWidget()[0];
        pie.option({
            legend: {
                visible: true,
                border: {
                    visible: true
                }
            }
        });
    }
}

function unsubscribeFromEvents(args) {
    if (args.ItemName == "chartDashboardItem1") {
        var chart = args.GetWidget();
        chart.option({
            onArgumentAxisClick: undefined
        });
    }
}

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8" />
    <title>@ViewBag.Title</title>
    <script src="@Url.Content("~/Scripts/WidgetsCustomization.js")" type="text/javascript"></script>

    @Html.DevExpress().GetStyleSheets( 
        new StyleSheet { ExtensionSuite = ExtensionSuite.Dashboard }
    )
    @Html.DevExpress().GetScripts( 
        new Script { ExtensionSuite = ExtensionSuite.Dashboard }
    )

</head>

<body>
    @RenderBody()
</body>
</html>

Imports System.Web.Mvc

Namespace MVCxDashboard_UnderlyingWidgets.Controllers
    Public Class HomeController
        Inherits Controller

        Public Function Index() As ActionResult
            Return View()
        End Function
    End Class
End Namespace

Imports DevExpress.DashboardWeb
Imports DevExpress.DashboardWeb.Mvc
Imports System
Imports System.Web.Mvc
Imports System.Web.Routing

Namespace MVCxDashboard_UnderlyingWidgets
    Public Class MvcApplication
        Inherits System.Web.HttpApplication

        Public Shared Sub RegisterRoutes(ByVal routes As RouteCollection)
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}")
            routes.IgnoreRoute("{resource}.ashx/{*pathInfo}")
            routes.MapDashboardRoute()

            routes.MapRoute("Default", "{controller}/{action}/{id}", New With {Key .controller = "Home", Key .action = "Index", Key .id = UrlParameter.Optional})
        End Sub

        Protected Sub Application_Start()
            AreaRegistration.RegisterAllAreas()
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters)
            RegisterRoutes(RouteTable.Routes)
            ModelBinders.Binders.DefaultBinder = New DevExpress.Web.Mvc.DevExpressEditorsBinder()
            AddHandler DevExpress.Web.ASPxWebControl.CallbackError, AddressOf Application_Error

            DashboardConfigurator.Default.SetDashboardStorage(New DashboardFileStorage("~/App_Data/"))
        End Sub

        Protected Sub Application_Error(ByVal sender As Object, ByVal e As EventArgs)
            Dim exception As Exception = System.Web.HttpContext.Current.Server.GetLastError()
        End Sub
    End Class
End Namespace

function customizeWidgets(args) {
    if (args.ItemName == "gridDashboardItem1") {
        var grid = args.GetWidget();
        grid.option({
            hoverStateEnabled: true
        });
    }
    if (args.ItemName == "chartDashboardItem1") {
        var chart = args.GetWidget();
        chart.option({
            tooltip: {
                enabled: false
            },
            onArgumentAxisClick: function (info) {
                info.component.getAllSeries()[0].getPointsByArg(info.argument)[0].showTooltip()
            }
        });
    }
    if (args.ItemName == "pieDashboardItem1") {
        var pie = args.GetWidget()[0];
        pie.option({
            legend: {
                visible: true,
                border: {
                    visible: true
                }
            }
        });
    }
}

function unsubscribeFromEvents(args) {
    if (args.ItemName == "chartDashboardItem1") {
        var chart = args.GetWidget();
        chart.option({
            onArgumentAxisClick: undefined
        });
    }
}

<div style="position: absolute; left: 0; right: 0; top:0; bottom:0;">
    @Html.DevExpress().Dashboard(settings =>
{
    settings.Name = "webDashboard";
    settings.WorkingMode = DevExpress.DashboardWeb.WorkingMode.Viewer;
    settings.ClientSideEvents.ItemWidgetCreated = "function(s, e) { customizeWidgets(e); }";
    settings.ClientSideEvents.ItemWidgetUpdated = "function(s, e) { customizeWidgets(e); }";
    settings.ClientSideEvents.ItemWidgetUpdating = "function(s, e) { unsubscribeFromEvents(e); }";
    settings.Width = Unit.Percentage(100); settings.Height = Unit.Percentage(100);
}).GetHtml()
</div>

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode