A newer version of this page is available. Switch to the current version.

ASP.NET Document Viewer Toolbar

  • 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

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.


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

View code - "Index":

@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
        .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;



Controller ("Home"):

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

Partial View code - "ReportPartial":

@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";
See Also