Manage Exporting Capabilities

• Aug 03, 2020
• 7 minutes to read

The ASP.NET Web Forms Dashboard control allows end-users to export an entire dashboard or individual dashboard items.

• Server-Side API
• Client-Side API
• Implement Server-Side Export

Server-Side API

The ASPxDashboard control’s server-side API allows you to customize the default export options, customize export documents at runtime, etc.

API	Description
ASPxDashboard.AllowExportDashboard	Gets or sets whether the entire dashboard can be exported by end-users.
ASPxDashboard.AllowExportDashboardItems	Gets or sets whether the dashboard items can be exported by end-users.
ASPxDashboard.PdfExportOptions	Provides access to options related to exporting a dashboard/dashboard item to the PDF format.
ASPxDashboard.ImageExportOptions	Provides access to options related to exporting a dashboard/dashboard item to an image.
ASPxDashboard.ExcelExportOptions	Provides access to options related to exporting a dashboard item to the Excel format.
ASPxDashboard.BeforeExportDocument	Allows you to hide specific dashboard items when exporting the entire dashboard.
ASPxDashboard.CustomExport	Allows you to customize the exported document.
ASPxDashboard.CustomizeExportDocument	Allows you to customize the exported document.
ASPxDashboardExporter Constructor	Initializes a new instance of the ASPxDashboardExporter class for the specified DashboardConfigurator instance.

In the Web Forms, use the ASPxDashboardExporter class to perform server-side export of a dashboard/dashboard item.

How to: Add Custom Information to the Exported Dashboard at Runtime using the CustomExport Event

Client-Side API

You can use the ASPxDashboard control’s client-side API for exporting to various formats, customizing export options, etc.

API	Description
ASPxClientDashboard.ExportToPdf	Exports a dashboard to a PDF file and writes it to the Response.
ASPxClientDashboard.ExportToImage	Exports a dashboard to an Image file and writes it to the Response.
ASPxClientDashboard.ExportToExcel	Exports dashboard data to the specified file in Excel format.
ASPxClientDashboard.ExportDashboardItemToPdf	Exports a dashboard item to a PDF file and writes it to the Response.
ASPxClientDashboard.ExportDashboardItemToImage	Exports a dashboard item to an Image file and writes it to the Response.
ASPxClientDashboard.ExportDashboardItemToExcel	Exports a dashboard item to an Excel file and writes it to the Response.
ASPxClientDashboard.GetPdfExportOptions	Allows you to obtain options related to exporting a dashboard/dashboard item to the PDF format.
ASPxClientDashboard.GetImageExportOptions	Allows you to obtain options related to exporting a dashboard/dashboard item to an image.
ASPxClientDashboard.GetExcelExportOptions	Allows you to obtain options related to exporting a dashboard/dashboard item to the Excel format.
ASPxClientDashboard.SetPdfExportOptions	Allows you to specify options related to exporting a dashboard/dashboard item to the PDF format.
ASPxClientDashboard.SetImageExportOptions	Allows you to specify options related to exporting a dashboard/dashboard item to an image.
ASPxClientDashboard.SetExcelExportOptions	Allows you to specify options related to exporting a dashboard/dashboard item to the Excel format.
ASPxClientDashboard.ShowExportDashboardDialog	Invokes the dialog that allows end-users to export the entire dashboard to the specified format.
ASPxClientDashboard.ShowExportDashboardItemDialog	Invokes the dialog that allows end-users to export the dashboard item to the specified format.

How to: Add Custom Information to the Exported Dashboard at Runtime using the CustomExport Event

Implement Server-Side Export

The ASPxDashboardExporter class allows you to implement server export for the ASP.NET Web Forms Dashboard Control. It uses information stored in a dashboard state to determine the currently selected filters, drill-down levels and parameter values. The state overrides default values specified in dashboard items and parameters. Export methods allow you to specify a dashboard state and export options for the resulting document. Refer to the ASPxDashboardExporter class description for more information.

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

InitializeControls.js (VB.NET)

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

Default.aspx (VB.NET)

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

<%@ Register Assembly="DevExpress.Dashboard.v17.1.Web, Version=17.1.1.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>

Default.aspx.vb

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

Namespace ASPxDashboard_ServerExport
    Partial Public Class [Default]
        Inherits System.Web.UI.Page

        Private fileStorage As 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 New List(Of String)()
            For Each dashboardInfo As DashboardInfo In DirectCast(fileStorage, IDashboardStorage).GetAvailableDashboardsInfo()
                dashboardIDs.Add(dashboardInfo.ID)
            Next dashboardInfo
            e.Properties.Add("cpGetDashboardIDs", dashboardIDs)
        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 dateTimeNow As String = Date.Now.ToString("yyyyMMddHHmmss")
                Dim filePath As String = "~/App_Data/Export/" & 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(Server.MapPath(path))
            stream.WriteTo(fileStream)
            fileStream.Close()
        End Sub
    End Class
End Namespace

Default.aspx.cs

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

InitializeControls.js (C#)

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

Default.aspx (C#)

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

<%@ Register Assembly="DevExpress.Dashboard.v17.1.Web, Version=17.1.1.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>