Customize the Document Viewer Toolbar in React Application

• Jun 05, 2024
• 4 minutes to read

This topic contains customization scenarios related to the Toolbar in the Web Document Viewer.

Remove the Toolbar

Use the CustomizeElements callback to get the Toolbar element by its PreviewElements‘ id and remove the Toolbar from the collection of UI elements:

page.tsx

'use client';
import ReportViewer, { RequestOptions, Callbacks } from 'devexpress-reporting-react/dx-report-viewer';
import { PreviewElements } from 'devexpress-reporting/dx-webdocumentviewer';
import 'devextreme/dist/css/dx.light.css';
import '@devexpress/analytics-core/dist/css/dx-analytics.common.css';
import '@devexpress/analytics-core/dist/css/dx-analytics.light.css';
import 'devexpress-reporting/dist/css/dx-webdocumentviewer.css';

function App() {
  const onCustomizeElements = ({ args }: { args: any }): void => {
    const toolbarPart = args.GetById(PreviewElements.Toolbar);
    const index = args.Elements.indexOf(toolbarPart);
    args.Elements.splice(index, 1);
  };
  return (
    <ReportViewer reportUrl="TestReport">
      <RequestOptions host="http://localhost:5000/" invokeAction="DXXRDV" />
      <Callbacks CustomizeElements={onCustomizeElements} />
    </ReportViewer>        
  )
}

export default App

Hide Export Formats

Use the CustomizeExportOptionscallback and call the HideFormat(format) method to remove the specified export format from the Export To drop-down list.

The following code snippet hides the XLS format from the drop-down-list:

'use client';
import ReportViewer, { RequestOptions, Callbacks } from 'devexpress-reporting-react/dx-report-viewer';
import { ExportFormatID  } from 'devexpress-reporting/dx-webdocumentviewer';
import 'devextreme/dist/css/dx.light.css';
import '@devexpress/analytics-core/dist/css/dx-analytics.common.css';
import '@devexpress/analytics-core/dist/css/dx-analytics.light.css';
import 'devexpress-reporting/dist/css/dx-webdocumentviewer.css';

function App() {
  const onCustomizeExportOptions = ({ args }: { args: any }): void => {
    args.HideFormat(ExportFormatID.XLS);

  };
  return (
    <ReportViewer reportUrl="TestReport">
      <RequestOptions host="http://localhost:5000/" invokeAction="DXXRDV" />
      <Callbacks CustomizeExportOptions={onCustomizeExportOptions} />
    </ReportViewer>        
  )
}

export default App

Customize Toolbar Commands

Use the CustomizeMenuActions callback to customize toolbar commands. The callback function receives the IPreviewModel and the ASPxClientCustomizeMenuActionsEventArgs objects as arguments.

The Actions property contains available Document Viewer commands. You can modify commands in the collection and add new commands. To access a built-in command, call the GetById method and pass the ActionId value as a parameter.

A command implements the IAction interface. When you get access to a command, use the IAction properties to customize the command.

The example below uses the CustomizeMenuActions event to hide the Highlight Editing Fields toolbar command and add a new Run Slide Show command to navigate through report pages.

View Example: Customize Viewer Toolbar

Hide Toolbar Command

To access a built-in toolbar command, call the GetById method and pass the ActionId value as a parameter. To hide a command and its toolbar button, set the command’s visible property to false.

page.tsx

'use client';
import React from 'react';
import ReportViewer, { Callbacks, RequestOptions } from 'devexpress-reporting-react/dx-report-viewer';
import { TemplateEngine } from 'devexpress-reporting-react/dx-report-viewer/core/template-engine';
import { ActionId } from 'devexpress-reporting/viewer/constants';

import "devextreme/dist/css/dx.light.css";
import "@devexpress/analytics-core/dist/css/dx-analytics.common.css";
import "@devexpress/analytics-core/dist/css/dx-analytics.light.css";
import "devexpress-reporting/dist/css/dx-webdocumentviewer.css";

export default function Home() {
  const onCustomizeMenuActions = ({ sender, args }: { sender: any, args: any }) => {
    var highlightEditingFieldsAction = args.GetById(ActionId.HighlightEditingFields);
    if (highlightEditingFieldsAction)
        highlightEditingFieldsAction.visible = false;
  };

  return (
      <ReportViewer reportUrl="Report" templateEngine={templateEngine}>
        <RequestOptions invokeAction="/DXXRDV" host="http://localhost:5000" />
        <Callbacks CustomizeMenuActions={React.useCallback(onCustomizeMenuActions,[])} />
      </ReportViewer>
  );
}

Add New Toolbar Command

To add a new toolbar command, follow the steps below:

1. Create an image template:

   // ...
   const templateEngine = new TemplateEngine();
   templateEngine.setTemplate('slideshow', () => (
     <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 24 24">
       <polygon className="dxd-icon-fill" points="4,2 4,22 22,12 " />
     </svg>
   ));
   // ...
   

2. Specify command settings. Set the imageTemplateName property to the created template’s id (slideshow):

   const onCustomizeMenuActions = ({ sender, args }: { sender: any, args: any }) => {
     let interval: any;
     const action = new CustomAction({
       text: "Run Slide Show",
       imageTemplateName: "slideshow",
       visible: true,
       disabled: false,
       selected: false,
       clickAction: function () {
         if (this.selected) {
           clearInterval(interval);
           this.selected = false;
           return;
         }
         var model = sender.GetPreviewModel();
         if (model) {
           this.selected = true;
           interval = setInterval(function () {
             var pageIndex = model.GetCurrentPageIndex();
             model.GoToPage(pageIndex + 1);
           }, 2000);
         }
       }
     });
     // ...
   };
   

3. Call the push method to add the created command to Actions collection:

   const onCustomizeMenuActions = ({ sender, args }: { sender: any, args: any }) => {
     // ...
     args.Actions.push(action);
   };