Skip to main content

ASPxDashboard.CustomJSProperties Event

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

Namespace: DevExpress.DashboardWeb

Assembly: DevExpress.Dashboard.v22.1.Web.WebForms.dll

Declaration

public event CustomJSPropertiesEventHandler CustomJSProperties

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:

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

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

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

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

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.

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.

View Example

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

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 dateTimeNow = DateTime.Now.ToString("yyyyMMddHHmmss");
                string filePath = "~/App_Data/Export/" + 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(Server.MapPath(path));
            stream.WriteTo(fileStream);  
            fileStream.Close();
        }
    }
}
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ASPxDashboard_ServerExport.Default" %>

<%@ Register Assembly="DevExpress.Dashboard.v17.1.Web, Version=17.1.17.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"
            ClientSideEvents-Init="function(s, e) { initializeControls(); }"
            ClientSideEvents-CustomDataCallback="function(s, e) { dashboardExportedSuccess(e); }"
            OnCustomDataCallback="ASPxDashboard1_CustomDataCallback" 
            OnCustomJSProperties="ASPxDashboard1_CustomJSProperties">
            </dx:ASPxDashboard>
    </div>
    </form>
</body>
</html>
<script type="text/javascript" src="<%= Page.ResolveClientUrl("~/Scripts/InitializeControls.js") %>"></script>
function initializeControls() {
    $("#buttonContainer").dxButton({
        text: "Export to PDF",
        onClick: function (param) {
            var selectedDashboardID = webDashboard.GetDashboardId();
            var dashboardState = webDashboard.GetDashboardState();
            var parameters = selectedDashboardID + "|" + dashboardState;
            webDashboard.PerformDataCallback(parameters, null);
        }
    });

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

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

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