/reporting-react-customize-viewer-toolbar

Use the CustomizeMenuActions event to hide and add a toolbar command.

Primary LanguageC#OtherNOASSERTION

Reporting for React - Customize Viewer Toolbar

This example uses the CustomizeMenuActions event to make the following changes to the Document Viewer toolbar:

  • Hide the Highlight Editing Fields command.
  • Add a new Run Slide Show command.

Web Document Viewer - Customized Toolbar

Quick Start

Server

In the backend folder, run the following command:

dotnet run

The server uses http://localhost:5000. To debug the server, run the application within Visual Studio.

Client

In the react-document-viewer folder, run the following commands:

npm install
npm run dev

Enter the following URL in your browser to view results: http://localhost:3000/.

Implementation Details

Hide a 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.

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

Add a 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. Create a new CustomAction and specify command settings. Set the imageTemplateName property to the generated 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);
};

Files to Review

Documentation

More Examples

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)