Manage Exporting Capabilities

• Aug 03, 2020
• 7 minutes to read

The Web Dashboard 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 ASP.NET MVC Dashboard extension’s server-side API allows you to customize the default export options, customize export documents at runtime, etc. To export an entire dashboard or individual dashboard items, use members of the WebDashboardExporter class.

API	Description
DashboardExtensionSettings.AllowExportDashboard	Gets or sets whether end-users can export a dashboard.
DashboardExtensionSettings.AllowExportDashboardItems	Gets or sets whether end-users can export dashboard items.
DashboardExtensionSettings.PdfExportOptions	Provides access to options related to exporting a dashboard/dashboard item to the PDF format.
DashboardExtensionSettings.ImageExportOptions	Provides access to options related to exporting a dashboard/dashboard item to an image.
DashboardExtensionSettings.ExcelExportOptions	Provides access to options related to exporting a dashboard item to the Excel format.
DashboardConfigurator.BeforeExportDocument	Allows you to hide specific dashboard items when exporting the entire dashboard.
DashboardConfigurator.CustomExport	Allows you to customize the exported document.
DashboardConfigurator.CustomizeExportDocument	Allows you to customize the exported document.
WebDashboardExporter.ExportDashboardItemToExcel	Exports the dashboard item to the specified stream in Excel format.
WebDashboardExporter.ExportDashboardItemToImage	Exports the dashboard item to the specified stream in Image format.
WebDashboardExporter.ExportDashboardItemToPdf	Exports the dashboard item to the specified stream in PDF format.
WebDashboardExporter.ExportToExcel	Exports a dashboard to the specified stream in Excel format.
WebDashboardExporter.ExportToImage	Exports a dashboard to the specified stream in Image format.
WebDashboardExporter.ExportToPdf	Exports a dashboard to the specified stream in PDF format.

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

Client-Side API

You can use the MVC Dashboard extension’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 WebDashboardExporter class allows you to implement server export for the ASP.NET MVC Dashboard extension and ASP.NET Core Dashboard control. You can specify a dashboard state and export options to be applied to the resulting document. Refer to the WebDashboardExporter class description for more information.

This example demonstrates how to export a dashboard displayed using the ASP.NET MVC Dashboard extension on the server side using the WebDashboardExporter class. The following API is used to implement this capability:

• The ASPxClientDashboard.BeforeRender event is handled to obtain the client-side DashboardControl using the ASPxClientDashboard.GetDashboardControl method.
• The AJAX request is used to send the dashboard identifier and state to the server side. On the server side, these values are received as action method parameters and passed to the WebDashboardExporter.ExportToPdf method.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/aspnet-mvc-dashboard-how-to-implement-server-side-export-t590027.

_rootLayout.cshtml (C#)

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8" />
    <title>Dashboard Web Application</title>
    <script src="@Url.Content("~/Scripts/DashboardExport.js")" type="text/javascript"></script>


    @Html.DevExpress().GetStyleSheets(
            new StyleSheet { ExtensionSuite = ExtensionSuite.Dashboard }
        )
    @Html.DevExpress().GetScripts(
            new Script { ExtensionSuite = ExtensionSuite.Dashboard }
        )
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
</head>
<body>
    @RenderBody()
</body>
</html>

HomeController.cs

using DevExpress.DashboardCommon;
using DevExpress.DashboardWeb;
using System;
using System.IO;
using System.Web.Mvc;

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

        [HttpPost]
        public ActionResult ExportDashboardToPdf(string DashboardID, string DashboardState) {
            using (MemoryStream stream = new MemoryStream()) {
                string dashboardID = DashboardID;
                DashboardState dashboardState = new DashboardState();
                dashboardState.LoadFromJson(DashboardState);

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

                string dateTimeNow = DateTime.Now.ToString("yyyyMMddHHmmss");
                string filePath = "~/App_Data/Export/" + dashboardID + "_" + dateTimeNow + ".pdf";
                ASPxDashboardExporter exporter = new ASPxDashboardExporter(DashboardConfigurator.Default);
                exporter.ExportToPdf(dashboardID, stream, new System.Drawing.Size(1024, 768), dashboardState, pdfOptions);
                SaveFile(stream, filePath);

                ContentResult result = new ContentResult();
                result.Content = filePath;
                return result;
            }
        }

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

DashboardExport.js (C#)

function onBeforeRender(sender) {
    var control = sender.getDashboardControl();
    control.registerExtension(new DevExpress.Dashboard.DashboardPanelExtension(control));
    $("#buttonContainer").dxButton({
        text: "Export to PDF",
        onClick: function (param) {
            var dashboardID = control.dashboardContainer().id;
            var dashboardStateJson = control.dashboard().state();

            $.ajax({
                url: 'Home/ExportDashboardToPdf',
                data: {
                    DashboardID: dashboardID,
                    DashboardState: JSON.stringify(dashboardStateJson)
                },
                type: 'POST',
            }).success(function (result) {
                DevExpress.ui.notify('A dashboard was exported to ' + result, 'success', 5000);
            });
        }
    });
}

DashboardConfig.cs

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

namespace MvcDashboard_ServerExport {
    public static class DashboardConfig {
        public static void RegisterService(RouteCollection routes) {
            routes.MapDashboardRoute("dashboardControl");

            DashboardFileStorage dashboardFileStorage = new DashboardFileStorage("~/App_Data/Dashboards");
            DashboardConfigurator.Default.SetDashboardStorage(dashboardFileStorage);          

        }
    }
}

Index.cshtml (C#)

<div id="buttonContainer" style="float: left; margin-left: 125px;"></div>
<div style="position: absolute; left: 0; right: 0; top:50px; bottom:0;">
    @Html.DevExpress().Dashboard(settings => {
    settings.Name = "webDashboard";
    settings.WorkingMode = DevExpress.DashboardWeb.WorkingMode.Viewer;
    settings.AllowExportDashboard = false;
    settings.Width = Unit.Percentage(100);
    settings.Height = Unit.Percentage(100);
    settings.ClientSideEvents.BeforeRender = "onBeforeRender";
}).GetHtml()
</div>

Global.asax.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;
using System.Web.Mvc;
using System.Web.Routing;

namespace MvcDashboard_ServerExport {
    // Note: For instructions on enabling IIS6 or IIS7 classic mode, 
    // visit http://go.microsoft.com/?LinkId=9394801

    public class MvcApplication : System.Web.HttpApplication {
        protected void Application_Start() {
            DashboardConfig.RegisterService(RouteTable.Routes);
            AreaRegistration.RegisterAllAreas();

            GlobalConfiguration.Configure(WebApiConfig.Register);
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);

            ModelBinders.Binders.DefaultBinder = new DevExpress.Web.Mvc.DevExpressEditorsBinder();

            DevExpress.Web.ASPxWebControl.CallbackError += Application_Error;
        }

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

HomeController.vb

Imports System.IO
Imports System.Web.Mvc
Imports DevExpress.DashboardCommon
Imports DevExpress.DashboardWeb

Namespace MvcDashboard_ServerExport.Controllers
    Public Class HomeController
        Inherits Controller

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

        <HttpPost> _
        Public Function ExportDashboardToPdf(ByVal DashboardID As String, ByVal DashboardState As String) As ActionResult
            Using stream As New MemoryStream()

                Dim dashboardID_Renamed As String = DashboardID

                Dim dashboardState_Renamed As New DashboardState()
                dashboardState_Renamed.LoadFromJson(DashboardState)

                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/" & dashboardID_Renamed & "_" & dateTimeNow & ".pdf"
                Dim exporter As New ASPxDashboardExporter(DashboardConfigurator.Default)
                exporter.ExportToPdf(dashboardID_Renamed, stream, New System.Drawing.Size(1024, 768), dashboardState_Renamed, pdfOptions)
                SaveFile(stream, filePath)

                Dim result As New ContentResult()
                result.Content = filePath
                Return result
            End Using
        End Function

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

DashboardConfig.vb

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

Namespace MvcDashboard_ServerExport
    Public NotInheritable Class DashboardConfig

        Private Sub New()
        End Sub

        Public Shared Sub RegisterService(ByVal routes As RouteCollection)
            routes.MapDashboardRoute("dashboardControl")

            Dim dashboardFileStorage As New DashboardFileStorage("~/App_Data/Dashboards")
            DashboardConfigurator.Default.SetDashboardStorage(dashboardFileStorage)

        End Sub
    End Class
End Namespace

Global.asax.vb

Imports System.Web.Http
Imports System.Web.Mvc
Imports System.Web.Routing

Namespace MvcDashboard_ServerExport
    ' Note: For instructions on enabling IIS6 or IIS7 classic mode, 
    ' visit http://go.microsoft.com/?LinkId=9394801

    Public Class MvcApplication
        Inherits System.Web.HttpApplication

        Protected Sub Application_Start()
            DashboardConfig.RegisterService(RouteTable.Routes)
            AreaRegistration.RegisterAllAreas()

            GlobalConfiguration.Configure(AddressOf WebApiConfig.Register)
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters)
            RouteConfig.RegisterRoutes(RouteTable.Routes)

            ModelBinders.Binders.DefaultBinder = New DevExpress.Web.Mvc.DevExpressEditorsBinder()

            AddHandler DevExpress.Web.ASPxWebControl.CallbackError, AddressOf Application_Error
        End Sub

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

Index.cshtml (VB.NET)

<div id="buttonContainer" style="float: left; margin-left: 125px;"></div>
<div style="position: absolute; left: 0; right: 0; top:50px; bottom:0;">
    @Html.DevExpress().Dashboard(settings => {
    settings.Name = "webDashboard";
    settings.WorkingMode = DevExpress.DashboardWeb.WorkingMode.Viewer;
    settings.AllowExportDashboard = false;
    settings.Width = Unit.Percentage(100);
    settings.Height = Unit.Percentage(100);
    settings.ClientSideEvents.BeforeRender = "onBeforeRender";
}).GetHtml()
</div>

_rootLayout.cshtml (VB.NET)

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8" />
    <title>Dashboard Web Application</title>
    <script src="@Url.Content("~/Scripts/DashboardExport.js")" type="text/javascript"></script>


    @Html.DevExpress().GetStyleSheets(
            new StyleSheet { ExtensionSuite = ExtensionSuite.Dashboard }
        )
    @Html.DevExpress().GetScripts(
            new Script { ExtensionSuite = ExtensionSuite.Dashboard }
        )
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
</head>
<body>
    @RenderBody()
</body>
</html>

DashboardExport.js (VB.NET)

function onBeforeRender(sender) {
    var control = sender.getDashboardControl();
    control.registerExtension(new DevExpress.Dashboard.DashboardPanelExtension(control));
    $("#buttonContainer").dxButton({
        text: "Export to PDF",
        onClick: function (param) {
            var dashboardID = control.dashboardContainer().id;
            var dashboardStateJson = control.dashboard().state();

            $.ajax({
                url: 'Home/ExportDashboardToPdf',
                data: {
                    DashboardID: dashboardID,
                    DashboardState: JSON.stringify(dashboardStateJson)
                },
                type: 'POST',
            }).success(function (result) {
                DevExpress.ui.notify('A dashboard was exported to ' + result, 'success', 5000);
            });
        }
    });
}