ASP.NET Document Viewer Toolbar

• Aug 01, 2019
• 3 minutes to read

The Document Viewer provides a toolbar to navigate, export and print a report in the client web browser.

Depending on the requirements of your application, a Document Viewer can be assigned one of the following toolbar kinds.

• Use a Native Toolbar
• Use an External Ribbon

Use a Native Toolbar

This toolbar can carry one of the following user interface types.

• Ribbon toolbar:

  

• Standard toolbar:

  

To select the toolbar kind of a Document Viewer, use the DocumentViewerSettings.ToolbarMode property.

To customize the appearance of a Document Viewer Toolbar, use the DocumentViewerSettings.StylesToolbar property.

To customize the items displayed in a standard Toolbar, use the DocumentViewerSettings.ToolbarItems property.

Use an External Ribbon

Implementation Details

The Ribbon functionality in ASP.NET MVC is provided by the RibbonExtension class.

An instance of this class can be accessed via the ExtensionsFactory.Ribbon helper method, which is used to add a Ribbon extension to a view. This method’s parameter provides access to the Ribbon settings provided by the RibbonSettings class, allowing you to completely customize the extension.

Declaration

The following code demonstrates how to assign an external Ribbon toolbar to a Document Viewer.

View code - “Index”:

C#

@Html.DevExpress().Ribbon(settings => {
    settings.Name = "Ribbon";
    settings.AllowMinimize = false;
    settings.ShowFileTab = false;
    settings.ShowGroupLabels = false;

    var tabs = DocumentViewerExtension.DefaultRibbonTabs;
    var items = tabs
        .SelectMany(x => x.Groups)
        .SelectMany(x => x.Items);

    var dropDownSubItems = items
        .OfType<DevExpress.XtraReports.Web.DocumentViewer.Ribbon.DocumentViewerRibbonDropDownButtonBase>()
        .SelectMany(x => x.Items);

    var excludedSubItems = dropDownSubItems
        .Where(x => x is RibbonXlsFormatCommand
          || x is RibbonMhtFormatCommand
          || x is RibbonHtmlFormatCommand
          || x is RibbonPngFormatCommand);

    foreach (var item in excludedSubItems) {
        item.Visible = false;
    }

    settings.Tabs.AddRange(tabs);
}).GetHtml()

@Html.Action("ReportPartial")

VB.NET

@Html.DevExpress().Ribbon(Function(settings) 
    settings.Name = "Ribbon"
    settings.AllowMinimize = False
    settings.ShowFileTab = False
    settings.ShowGroupLabels = False

    Dim tabs = DocumentViewerExtension.DefaultRibbonTabs
    Dim items = tabs.SelectMany(Function(x) x.Groups).SelectMany(Function(x) x.Items)

    Dim dropDownSubItems = items        
        .OfType(Of DevExpress.XtraReports.Web.DocumentViewer.Ribbon.DocumentViewerRibbonDropDownButtonBase)()
        .SelectMany(Function(x) x.Items)

    Dim excludedSubItems = dropDownSubItems
        .Where(Function(x) TypeOf x Is RibbonXlsFormatCommand 
          OrElse TypeOf x Is RibbonMhtFormatCommand 
          OrElse TypeOf x Is RibbonHtmlFormatCommand 
          OrElse TypeOf x Is RibbonPngFormatCommand)

    For Each item As var In excludedSubItems
    item.Visible = False
    Next
    settings.Tabs.AddRange(tabs)

End Function).GetHtml()

@Html.Action("ReportPartial")

Controller (“Home”):

C#

using System.Web.Mvc;
using DevExpress.Web.Mvc;
// ...

public class HomeController : Controller {
    readonly DXDocumentViewerExternalRibbon.Reports.XtraReport1 report = 
        new DXDocumentViewerExternalRibbon.Reports.XtraReport1();

    public ActionResult Index() {
        return View();
    }

    public ActionResult ReportPartial() {
        return PartialView("_ReportPartial", report);
    }

    public ActionResult ReportPartialExport() {
        return DocumentViewerExtension.ExportTo(report, Request);
    }
}

VB.NET

Imports System.Web.Mvc
Imports DevExpress.Web.Mvc
' ...

Public Class HomeController
    Inherits Controller
    ReadOnly report As New DXDocumentViewerExternalRibbon.Reports.XtraReport1()

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

    Public Function ReportPartial() As ActionResult
        Return PartialView("_ReportPartial", report)
    End Function

    Public Function ReportPartialExport() As ActionResult
        Return DocumentViewerExtension.ExportTo(report, Request)
    End Function
End Class

Partial View code - “ReportPartial”:

C#

@Html.DevExpress().DocumentViewer(settings => {
    settings.Name = "Report";
    settings.CallbackRouteValues = new { Controller = "Home", Action = "ReportPartial" };
    settings.ExportRouteValues = new { Controller = "Home", Action = "ReportPartialExport" };
    settings.Report = (XtraReport)Model;
    settings.ToolbarMode = DocumentViewerToolbarMode.ExternalRibbon;
    settings.AssociatedRibbonName = "Ribbon";
}).GetHtml()

VB.NET

@Html.DevExpress().DocumentViewer(Function(settings) 
settings.Name = "Report"
settings.CallbackRouteValues = New With { _
    Key .Controller = "Home", _
    Key .Action = "ReportPartial" _
}
settings.ExportRouteValues = New With { _
    Key .Controller = "Home", _
    Key .Action = "ReportPartialExport" _
}
settings.Report = DirectCast(Model, XtraReport)
settings.ToolbarMode = DocumentViewerToolbarMode.ExternalRibbon
settings.AssociatedRibbonName = "Ribbon"

End Function).GetHtml()