ASPxDashboard.CustomJSProperties Event

Enables you to supply any server data that can then be parsed on the client.

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

NuGet Package : DevExpress.Web.Dashboard

Declaration

C#
VB.NET

csharp

public event CustomJSPropertiesEventHandler CustomJSProperties

Public Event CustomJSProperties As CustomJSPropertiesEventHandler

Event Data

The CustomJSProperties event's data class is CustomJSPropertiesEventArgs. The following properties provide information specific to this event:

Property	Description
Properties	Gets a collection of temporary client properties.

Remarks

Sometimes, it is necessary to obtain server information on the client side. The CustomJSProperties event enables you to declare temporary client properties to store the necessary information. Once declared, a property can be accessed on the client using common syntax.

Add new properties via the event parameter’s Properties property, which represents a collection of property names and their values. You have to add “cp” prefix to custom property names, in order to avoid rewriting the base properties. The code snippet below provides an illustration of this:

C#
VB.NET

csharp

protected void ASPxDashboard1_CustomJSProperties(object sender, 
    DevExpress.Web.CustomJSPropertiesEventArgs e) {
    e.Properties.Add("cpWebDashboardWorkingMode", ASPxDashboard1.WorkingMode.ToString());
}

Protected Sub ASPxDashboard1_CustomJSProperties(ByVal sender As Object, _
    ByVal e As DevExpress.Web.CustomJSPropertiesEventArgs)
    e.Properties.Add("cpWebDashboardWorkingMode", ASPxDashboard1.WorkingMode.ToString())
End Sub

The CustomJSProperties event is raised on callbacks. You may check for this to prevent a variable from unnecessary initialization:

C#
VB.NET

csharp

if (!IsCallback) {
    e.Properties.Add("cpWebDashboardWorkingMode", ASPxDashboard1.WorkingMode.ToString());
}

If (Not IsCallback) Then
    e.Properties.Add("cpWebDashboardWorkingMode", ASPxDashboard1.WorkingMode.ToString())
End If

Then, you can obtain a custom property’s value via the client object’s cpMyProperty :

javascript

function(s, e) {
      alert("ASPxDashboard works in the following mode: "+webDashboard.cpDesignerWorkingMode);
}

On the server, it can be accessed by means of the ASPxDashboard.JSProperties property.

C#
VB.NET

csharp

ASPxDashboard1.JSProperties["cpWebDashboardWorkingMode"] = "AnyStringValue";

ASPxDashboard1.JSProperties("cpWebDashboardWorkingMode") = "AnyStringValue"

Example

This example demonstrates how to export a dashboard displayed in ASPxDashboard on the server side using the ASPxDashboardExporter class. The following API is used to implement this capability.

The ASPxDashboard.CustomJSProperties server-side event is used to pass information about available dashboards to the client side.
The ASPxClientDashboard.LoadDashboard method opens a selected dashboard.
The ASPxClientDashboard.PerformDataCallback client-side method is used to pass the dashboard identifier and state to the server side. On the server side, the ASPxDashboard.CustomDataCallback event is used to obtain and parse these values.
WebDashboardExporter.ExportToPdf is used to export the selected dashboard with the state passed from the client side.

View Example

Default.aspx.cs
Default.aspx.vb

csharp

using DevExpress.DashboardCommon;
using DevExpress.DashboardWeb;
using System;
using System.Collections.Generic;
using System.IO;
using System.Web.Hosting;

namespace ASPxDashboard_ServerExport {
    public partial class Default : System.Web.UI.Page {
        DashboardFileStorage fileStorage = new DashboardFileStorage("App_Data/Dashboards");
        protected void Page_Load(object sender, EventArgs e) {
            ASPxDashboard1.AllowExportDashboard = false;         
            ASPxDashboard1.SetDashboardStorage(fileStorage);
        }

        protected void ASPxDashboard1_CustomJSProperties(object sender, DevExpress.Web.CustomJSPropertiesEventArgs e){
            List<string> dashboardIDs = new List<string>();
            foreach (DashboardInfo dashboardInfo in ((IDashboardStorage)fileStorage).GetAvailableDashboardsInfo()) {
                dashboardIDs.Add(dashboardInfo.ID);
            }
            e.Properties.Add("cpGetDashboardIDs", dashboardIDs);
        }

        protected void ASPxDashboard1_CustomDataCallback(object sender, DevExpress.Web.CustomDataCallbackEventArgs e) {
            using (MemoryStream stream = new MemoryStream()) {
                string selectedDashboardID = e.Parameter.Split('|')[0];
                string dashboardStateJson = e.Parameter.Split('|')[1];
                DashboardState dashboardState = new DashboardState();
                dashboardState.LoadFromJson(dashboardStateJson);

                DashboardPdfExportOptions pdfOptions = new DashboardPdfExportOptions();
                pdfOptions.ExportFilters = true;
                pdfOptions.DashboardStatePosition = DashboardStateExportPosition.Below;

                string serverPath = Environment.GetFolderPath(Environment.SpecialFolder.Desktop);
                if (!Directory.Exists(serverPath)) {
                    Directory.CreateDirectory(serverPath);
                }                

                string dateTimeNow = DateTime.Now.ToString("yyyyMMddHHmmss");
                string filePath = serverPath + "\\" + selectedDashboardID + "_" + dateTimeNow + ".pdf";
                ASPxDashboardExporter exporter = new ASPxDashboardExporter(ASPxDashboard1);
                exporter.ExportToPdf(selectedDashboardID, stream, new System.Drawing.Size(1920, 1080), dashboardState, pdfOptions);
                SaveFile(stream, filePath);
                e.Result = filePath;
            }
        }

        private void SaveFile(MemoryStream stream, string path) {
            var fileStream = File.Create(path);
            stream.WriteTo(fileStream);  
            fileStream.Close();
        }
    }
}

Imports DevExpress.DashboardCommon
Imports DevExpress.DashboardWeb
Imports System
Imports System.Collections.Generic
Imports System.IO

Namespace ASPxDashboard_ServerExport

    Public Partial Class [Default]
        Inherits Web.UI.Page

        Private fileStorage As DashboardFileStorage = New DashboardFileStorage("App_Data/Dashboards")

        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
            ASPxDashboard1.AllowExportDashboard = False
            ASPxDashboard1.SetDashboardStorage(fileStorage)
        End Sub

        Protected Sub ASPxDashboard1_CustomJSProperties(ByVal sender As Object, ByVal e As DevExpress.Web.CustomJSPropertiesEventArgs)
            Dim dashboardIDs As List(Of String) = New List(Of String)()
            For Each dashboardInfo As DashboardInfo In CType(fileStorage, IDashboardStorage).GetAvailableDashboardsInfo()
                dashboardIDs.Add(dashboardInfo.ID)
            Next

            e.Properties.Add("cpGetDashboardIDs", dashboardIDs)
        End Sub

        'Protected Sub ASPxDashboard1_CustomDataCallback(ByVal sender As Object, ByVal e As DevExpress.Web.CustomDataCallbackEventArgs)
        ' Using stream As MemoryStream = New MemoryStream()
        ' Dim selectedDashboardID As String = e.Parameter.Split("|"c)(0)
        ' Dim dashboardStateJson As String = e.Parameter.Split("|"c)(1)
        ' Dim dashboardState As DashboardState = New DashboardState()
        ' dashboardState.LoadFromJson(dashboardStateJson)
        ' Dim pdfOptions As DashboardPdfExportOptions = New DashboardPdfExportOptions()
        ' pdfOptions.ExportFilters = True
        ' pdfOptions.DashboardStatePosition = DashboardStateExportPosition.Below
        ' Dim dateTimeNow As String = Date.Now.ToString("yyyyMMddHHmmss")
        ' Dim filePath As String = "~/App_Data/Export/" & selectedDashboardID & "_" & dateTimeNow & ".pdf"
        ' Dim exporter As ASPxDashboardExporter = New ASPxDashboardExporter(ASPxDashboard1)
        ' exporter.ExportToPdf(selectedDashboardID, stream, New System.Drawing.Size(1920, 1080), dashboardState, pdfOptions)
        ' SaveFile(stream, filePath)
        ' e.Result = filePath
        ' End Using
        'End Sub
        Protected Sub ASPxDashboard1_CustomDataCallback(ByVal sender As Object, ByVal e As DevExpress.Web.CustomDataCallbackEventArgs)
            Using stream As New MemoryStream()
                Dim selectedDashboardID As String = e.Parameter.Split("|"c)(0)
                Dim dashboardStateJson As String = e.Parameter.Split("|"c)(1)
                Dim dashboardState As New DashboardState()
                dashboardState.LoadFromJson(dashboardStateJson)

                Dim pdfOptions As New DashboardPdfExportOptions()
                pdfOptions.ExportFilters = True
                pdfOptions.DashboardStatePosition = DashboardStateExportPosition.Below

                Dim serverPath As String = Environment.GetFolderPath(Environment.SpecialFolder.Desktop)
                If Not Directory.Exists(serverPath) Then
                    Directory.CreateDirectory(serverPath)
                End If

                Dim dateTimeNow As String = Date.Now.ToString("yyyyMMddHHmmss")
                Dim filePath As String = serverPath & "\" & selectedDashboardID & "_" & dateTimeNow & ".pdf"
                Dim exporter As New ASPxDashboardExporter(ASPxDashboard1)
                exporter.ExportToPdf(selectedDashboardID, stream, New System.Drawing.Size(1920, 1080), dashboardState, pdfOptions)
                SaveFile(stream, filePath)
                e.Result = filePath
            End Using
        End Sub

        Private Sub SaveFile(ByVal stream As MemoryStream, ByVal path As String)
            Dim fileStream = File.Create(path)
            stream.WriteTo(fileStream)
            fileStream.Close()
        End Sub
    End Class
End Namespace

Default.aspx (C#)
Default.aspx (VB.NET)

aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ASPxDashboard_ServerExport.Default" %>

<%@ Register Assembly="DevExpress.Dashboard.v24.2.Web.WebForms, Version=24.2.13.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" 
    Namespace="DevExpress.DashboardWeb" TagPrefix="dx" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">

    <div id="selectBox" style="float: left;"></div>
    <div id="buttonContainer" style="float: left; margin-left: 150px;"></div>
    <div style="position: absolute; left: 0; right: 0; top:50px; bottom:0;">
        <dx:ASPxDashboard ID="ASPxDashboard1" runat="server" Width="100%" Height="100%" WorkingMode="Viewer"
            ClientInstanceName="webDashboard"
            OnCustomDataCallback="ASPxDashboard1_CustomDataCallback" 
            OnCustomJSProperties="ASPxDashboard1_CustomJSProperties">
             <ClientSideEvents 
                 BeforeRender="function(s, e) { onBeforeRender(s,e); }"
                 CustomDataCallback="function(s, e) { dashboardExportedSuccess(e); }"/>  
            </dx:ASPxDashboard>
    </div>
    </form>
</body>
</html>
<script type="text/javascript" src="<%= Page.ResolveClientUrl("~/Scripts/InitializeControls.js") %>"></script>

aspx

<%@ Page Language="VB" AutoEventWireup="true" CodeBehind="Default.aspx.vb" Inherits="ASPxDashboard_ServerExport.Default" %>

<%@ Register Assembly="DevExpress.Dashboard.v24.2.Web.WebForms, Version=24.2.13.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" 
    Namespace="DevExpress.DashboardWeb" TagPrefix="dx" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">

    <div id="selectBox" style="float: left;"></div>
    <div id="buttonContainer" style="float: left; margin-left: 150px;"></div>
    <div style="position: absolute; left: 0; right: 0; top:50px; bottom:0;">
        <dx:ASPxDashboard ID="ASPxDashboard1" runat="server" Width="100%" Height="100%" WorkingMode="Viewer"
            ClientInstanceName="webDashboard"
            OnCustomDataCallback="ASPxDashboard1_CustomDataCallback" 
            OnCustomJSProperties="ASPxDashboard1_CustomJSProperties">
             <ClientSideEvents 
                 BeforeRender="function(s, e) { onBeforeRender(s,e); }"
                 CustomDataCallback="function(s, e) { dashboardExportedSuccess(e); }"/>  
            </dx:ASPxDashboard>
    </div>
    </form>
</body>
</html>
<script type="text/javascript" src="<%= Page.ResolveClientUrl("~/Scripts/InitializeControls.js") %>"></script>

InitializeControls.js

function onBeforeRender(s,e) {
    var dashboardControl = s.GetDashboardControl();
    $("#buttonContainer").dxButton({
        text: "Export to PDF",
        onClick: function (param) {
            var selectedDashboardID = dashboardControl.getDashboardId();
            var dashboardState = dashboardControl.getDashboardState();
            var parameters = selectedDashboardID + "|" + dashboardState;
            webDashboard.PerformDataCallback(parameters, null);
        }
    });

    $("#selectBox").dxSelectBox({
        dataSource: getDashboardIDs(),
        value: getDashboardIDs()[0],
        onValueChanged: function (param) {
            dashboardControl.loadDashboard(param.value);
        }
    });
}

function getDashboardIDs() {
    return webDashboard.cpGetDashboardIDs;
};

function dashboardExportedSuccess(args) {
    DevExpress.ui.notify('A dashboard was exported to ' + args.result, 'success', 5000);
};