DashboardClientSideEvents.ItemWidgetCreated Property

Gets or sets the name of the JavaScript function or the entire code which will handle the client ASPxClientDashboardViewer.ItemWidgetCreated event.

Namespace: DevExpress.DashboardWeb

Assembly: DevExpress.Dashboard.v18.2.Web.WebForms.dll

Declaration

C#

[DefaultValue("")]
[XtraSerializableProperty]
public string ItemWidgetCreated { get; set; }

VB.NET

<DefaultValue("")>
<XtraSerializableProperty>
Public Property ItemWidgetCreated As String

Property Value

Type	Default	Description
String	String.Empty	A string that is either the name of a JavaScript function or the entire JavaScript function code used to handle an event.

Example

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

The following options are changed:

• Highlighting of the hovered grid row is enabled in the underlying dxDataGrid in the ASPxClientDashboardViewer.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 ASPxClientDashboardViewer.ItemWidgetUpdated and ASPxClientDashboardViewer.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-mvc-viewer-t197593.

_DashboardViewerPartial.cshtml (C#)

@model DevExpress.DashboardWeb.Mvc.DashboardSourceModel
@Html.DevExpress().DashboardViewer(settings => {
    settings.Name = "DashboardViewer";
    settings.CallbackRouteValues = new { Controller = "Home", Action = "DashboardViewerPartial" };
    settings.ExportRouteValues = new { Controller = "Home", Action = "DashboardViewerPartialExport" };
    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 = 1200;
}).BindToSource(Model).GetHtml()

WidgetsCustomization.js (C#)

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
        });
    }
}

HomeController.cs

using System.Web.Mvc;
using DevExpress.DashboardWeb.Mvc;
using DevExpress.DataAccess.ConnectionParameters;

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

        [ValidateInput(false)]
        public ActionResult DashboardViewerPartial() {
            return PartialView("_DashboardViewerPartial", DashboardViewerSettings.Model);
        }
        public FileStreamResult DashboardViewerPartialExport() {
            return DashboardViewerExtension.Export("DashboardViewer", DashboardViewerSettings.Model);
        }
    }
    class DashboardViewerSettings {
        public static DashboardSourceModel Model {
            get {
                DashboardSourceModel model = new DashboardSourceModel();
                model.DashboardSource = System.Web.Hosting.
                            HostingEnvironment.MapPath(@"~\App_Data\Dashboard.xml");

                model.ConfigureDataConnection = (sender, e) => {
                    if (e.ConnectionName == "nwindConnection") {
                        // Gets connection parameters used to establish a connection to the database.
                        Access97ConnectionParameters parameters =
                            (Access97ConnectionParameters)e.ConnectionParameters;
                        string databasePath =
                            System.Web.Hosting.HostingEnvironment.MapPath(@"~\App_Data\nwind.mdb");
                        // Specifies the path to a database file.  
                        parameters.FileName = databasePath;
                    }
                };
                return model;
            }
        }
    }

}

_DashboardViewerPartial.cshtml (VB.NET)

@model DevExpress.DashboardWeb.Mvc.DashboardSourceModel
@Html.DevExpress().DashboardViewer(settings => {
    settings.Name = "DashboardViewer";
    settings.CallbackRouteValues = new { Controller = "Home", Action = "DashboardViewerPartial" };
    settings.ExportRouteValues = new { Controller = "Home", Action = "DashboardViewerPartialExport" };
    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 = 1200;
}).BindToSource(Model).GetHtml()

HomeController.vb

Imports System.Web.Mvc
Imports DevExpress.DashboardWeb.Mvc
Imports DevExpress.DataAccess.ConnectionParameters

Namespace Dashboard_WidgetAccess_MVC.Controllers
    Public Class HomeController
        Inherits Controller

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

        <ValidateInput(False)> _
        Public Function DashboardViewerPartial() As ActionResult
            Return PartialView("_DashboardViewerPartial", DashboardViewerSettings.Model)
        End Function
        Public Function DashboardViewerPartialExport() As FileStreamResult
            Return DashboardViewerExtension.Export("DashboardViewer", DashboardViewerSettings.Model)
        End Function
    End Class
    Friend Class DashboardViewerSettings
        Public Shared ReadOnly Property Model() As DashboardSourceModel
            Get

                Dim model_Renamed As New DashboardSourceModel()
                model_Renamed.DashboardSource = System.Web.Hosting.HostingEnvironment.MapPath("~\App_Data\Dashboard.xml")

                model_Renamed.ConfigureDataConnection = Sub(sender, e)
                    If e.ConnectionName = "nwindConnection" Then
                        ' Gets connection parameters used to establish a connection to the database.
                        Dim parameters As Access97ConnectionParameters = CType(e.ConnectionParameters, Access97ConnectionParameters)
                        Dim databasePath As String = System.Web.Hosting.HostingEnvironment.MapPath("~\App_Data\nwind.mdb")
                        ' Specifies the path to a database file.  
                        parameters.FileName = databasePath
                    End If
                End Sub
                Return model_Renamed
            End Get
        End Property
    End Class

End Namespace

WidgetsCustomization.js (VB.NET)

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
        });
    }
}