WebDocumentViewerClientSideEventsBuilder.CustomizeMenuActions(String) Method

Specifies the JavaScript function that handles the client-side CustomizeMenuActions event.

Namespace: DevExpress.AspNetCore.Reporting.WebDocumentViewer

Assembly: DevExpress.AspNetCore.Reporting.v24.1.dll

NuGet Package: DevExpress.AspNetCore.Reporting

Declaration

C#

public WebDocumentViewerClientSideEventsBuilder CustomizeMenuActions(
    string callback
)

VB.NET

Public Function CustomizeMenuActions(
    callback As String
) As WebDocumentViewerClientSideEventsBuilder

Parameters

Name	Type	Description
callback	String	The name of a JavaScript function or entire JavaScript function code that runs when the CustomizeMenuActions event occurs.

Returns

Type	Description
WebDocumentViewerClientSideEventsBuilder	A WebDocumentViewerClientSideEventsBuilder that can be used for method chaining.

Remarks

The CustomizeMenuActions event enables you to customize the menu and toolbar commands in the Web Document Viewer UI.

The handler function receives two parameters: the first parameter is the client-side DocumentViewer that exposes the IPreviewModel interface (or the JSReportViewer object), the second is an object with the following properties:

• Actions
  A collection of Actions in the Web Document Viewer’s toolbar and menu.

• GetById
  A method that obtains an Action by its ID (the ActionId value).

Example: Disable an Action HotKey

The following event handler function disables the hotkey (F) for the Search command. When the user presses the F key, the Search panel does not appear:

JavaScript

JS

function customizeMenuActions(s, e) {
    var searchAction = e.GetById(DevExpress.Reporting.Viewer.ActionId.Search); 
    if (searchAction)
    searchAction.hotKey = null;
}

Angular

Angular - HTML

<dx-report-viewer [reportUrl]="reportUrl">
    <dxrv-callbacks (CustomizeMenuActions)="CustomizeMenuActions($event)"></dxrv-callbacks>
</dx-report-viewer>

Angular - TypeScript

import { ActionId } from "devexpress-reporting/viewer/constants"
...
CustomizeMenuActions(e) {
    var searchAction = e.args.GetById(ActionId.Search);
    if (searchAction)
        searchAction.hotKey = null;
}

Note

To use ActionId constants in typescript code, add the following directive:

import { ActionId } from "devexpress-reporting/viewer/constants";

Example: Customize Export Commands

The following code performs custom actions when a user executes an export command for a specific format:

ASP.NET Core

<script type="text/javascript">
function OnCustomizeMenuActions(s, e) {
       var actionExportTo = e.GetById(DevExpress.Reporting.Viewer.ActionId.ExportTo);       
       actionExportTo.clickAction = function (arg) {
           if (arg.itemData.format === "csv" || arg.itemData.format === "txt") {                
               // my custom export
               //...
           }
           else if (arg.itemData.format === "pdf") {                
               s.ExportTo(arg.itemData.format);
           }
       }
   }
</script>
@{
    var viewerRender = Html.DevExpress().WebDocumentViewer("DocumentViewer")
        .Height("1000px")
        .ClientSideEvents(configure => configure.CustomizeMenuActions("onCustomizeMenuActions"))
        .Bind("TestReport");
    @viewerRender.RenderHtml()
}

Example: Hide an Action and Add a New Action

The following code hides the existing Highlight Editing Fields toolbar command and adds a new Run Slide Show command that navigates through document pages.

CSHTML

<script type="text/html" id="slideshow">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
        viewBox="0 0 24 24" style="enable-background: new 0 0 24 24;" xml:space="preserve">
        <polygon class="dxd-icon-fill" points="4,2 4,22 22,12 " />
    </svg>
</script>

<script type="text/javascript">
    function customizeMenuActions(s, e) {

        // Get the "Highlight Editing Fields" action and hide it.
        var highlightEditingFieldsAction = e.GetById(DevExpress.Reporting.Viewer.ActionId.HighlightEditingFields);
        if (highlightEditingFieldsAction)
            highlightEditingFieldsAction.visible = false;

        // Add a new action.
        var interval;
        var selected = false;
        e.Actions.push({
            text: "Run Slide Show",
            imageTemplateName: "slideshow",
            visible: true,
            disabled: false,
            selected: selected,
            hasSeparator: false,
            hotKey: { ctrlKey: true, keyCode: "Z".charCodeAt(0) },
            clickAction: function () {
                if (selected) {
                    clearInterval(interval);
                    selected=false;
                    return;
                }
                var model = s.GetPreviewModel();
                if (model) {
                    selected=true;
                    interval = setInterval(function () {
                        var pageIndex = model.GetCurrentPageIndex();
                        model.GoToPage(pageIndex + 1);
                    }, 2000);
                }
            }
        });
    }
</script>
@{
    var documentViewer = Html.DevExpress().WebDocumentViewer("webDocumentViewer1")
        .Height("1000px")
        .ClientSideEvents(configure => {
            configure.CustomizeMenuActions("customizeMenuActions");
        })
        .Bind("TestReport");
}
@documentViewer 

Review the following help topics for more information:

• Customize the Document Viewer Toolbar in ASP.NET Core Application
• Customize the Document Viewer Toolbar in an Angular Application
• Customize the Document Viewer Toolbar in React Application
• Customize the Document Viewer Toolbar in Vue Application