Customizing the Document Viewer Toolbar in ASP.NET MVC

• Aug 01, 2019
• 2 minutes to read

This example demonstrates how you can customize the toolbar of the Web Document Viewer control in an ASP.NET MVC application. In particular, it demonstrates how you can add a button performing a custom action to the toolbar.

For general information on DevExpress ASP.NET MVC extensions, see How It Works and Extension Sheet.

To customize the Web Document Viewer toolbar, do the following.

1. In Visual Studio, switch to the Solution Explorer (by pressing CTRL+ALT+L) and expand the Views | Home directory. Then, switch to the Index.cshtml file to view its code.

2. In this file, locate the code that specifies the WebDocumentViewerSettings settings and add a new WebDocumentViewerMenuItem with the required settings to the WebDocumentViewerSettings.MenuItems collection.

   Razor

   @model DevExpress.XtraReports.UI.XtraReport
   @Html.DevExpress().WebDocumentViewer(settings => {
       settings.Name = "documentViewer";
       // Add a new button to the Web Document Viewer Toolbar.    
       settings.MenuItems.Add(new DevExpress.XtraReports.Web.WebDocumentViewer.WebDocumentViewerMenuItem {
           Text = "Custom Button",
           ImageClassName = ".cssClassName",
           JSClickAction = "function() { alert('Custom Button Clicked'); }"
       });
   }).Bind(Model).GetHtml()
   

The WebDocumentViewerMenuItem class provides the following settings.

• 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.