[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Collapse]Reporting
 [Expand]Product Information
 [Expand]Get Started with DevExpress Reporting
 [Expand]Create Popular Reports
 [Expand]Detailed Guide to DevExpress Reporting
 [Expand]Visual Studio Report Designer
 [Collapse]Create End-User Reporting Applications
   Cross-Platform Reporting
  [Expand]WinForms Reporting
  [Expand]WPF Reporting
  [Collapse]Web Reporting
   [Expand]General Information
   [Collapse]ASP.NET WebForms Reporting
    [Expand]Print and Export
    [Collapse]Document Viewer
     [Collapse]HTML5 Document Viewer
      [Expand]Quick Start
       Mobile Mode
      [Collapse]API and Customization
        Customize the Document Viewer Toolbar
        Customize the Color Scheme
        Register Services in the Document Viewer
        Access HttpContext.Session in Services
        Provide Custom Editors for Report Parameters
        Document Viewer's Client-Side API
       Localization
     [Expand]ASP.NET Document Viewer
    [Expand]End-User Report Designer
     Application Deployment
   [Expand]ASP.NET MVC Reporting
   [Expand]ASP.NET Core Reporting
   [Expand]JavaScript Reporting
   [Expand]Application Security
    End-User Documentation
  [Expand]WCF Report Service
  [Expand]Discontinued Platforms
   Localization
   Redistribution and Deployment
 [Expand]API Reference
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Customize the Document Viewer Toolbar

This document describes how to customize menu commands available in the Web Document Viewer's toolbar. In particular, it shows how to add a new toolbar command at design time and at runtime.

Expanded Create a Web Application

To get started with this tutorial, open an existing ASP.NET Web application or create a new one from scratch. To learn how to create a simple Web application containing a report, see the Add a New Report to an ASP.NET WebForms Application topic. For information on how to add a print preview to a Web application, refer to the Add a Document Viewer to an ASP.NET WebForms Application document.

Expanded Prepare a Custom Command Icon

To provide a custom command icon that will be displayed in the Web Document Viewer's toolbar, perform the following steps.

  1. Create the required image file (24x24 pixels) and add it to the project (e.g., the CustomButton.png in this example).
  2. Declare a CSS class specifying the custom command icon as shown below.

Expanded Add a Custom Command at Design Time

To add a new menu command to the Document Viewer's toolbar at design time, do the following.

  1. Switch to the Design view and click the Document Viewer's smart tag. In the invoked actions list, select Designer...

  2. In the invoked AspxWebDocumentViewer Designer, activate the Menu Items tab.
  3. Click the Add button to add a new menu command. This automatically creates a new WebDocumentViewerMenuItem object and adds it to the ASPxWebDocumentViewer.MenuItems collection. Specify the settings for the added command in the Item Properties list.

    The following properties are available.

    • Disabled - specifies whether or not the command is disabled by default.
    • HasSeparator - specifies whether or not the command has a visual separator.
    • HotKey - specifies the keyboard shortcut used to invoke the command.
    • ImageClassName - specifies the CSS class of the command's glyph.
    • JSClickAction - specifies the client-side action to be performed when the command is invoked.
    • Text - specifies the text for the command.
    • Visible - specifies whether or not the command is visible in the designer user interface.
  4. Click OK to apply changes and close the dialog.

Expanded Modify Commands at Runtime

To customize menu commands at runtime, handle the ASPxClientWebDocumentViewer.CustomizeMenuActions event on the client side.

The event argument provides access to the Actions collection containing all commands available in the Document Viewer. You can add new commands to the collection as well as modify the existing commands. Refer to Document Viewer's Client-Side API for a complete list of available commands

The code sample below demonstrates the client-side CustomizeMenuActions event handler that hides an existing command and registers a custom one in the toolbar.

To assign the handler to the client-side CustomizeMenuActions event, assign the handler name to the WebDocumentViewerClientSideEvents.CustomizeMenuActions property as shown below.

Expanded See Also

Is this topic helpful?​​​​​​​