WebDocumentViewerClientSideEventsBuilder.CustomizeMenuActions(String) Method

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

Namespace : DevExpress.AspNetCore.Reporting.WebDocumentViewer

Assembly : DevExpress.AspNetCore.Reporting.v25.2.dll

NuGet Package : DevExpress.AspNetCore.Reporting

csharp

public WebDocumentViewerClientSideEventsBuilder CustomizeMenuActions(
    string callback
)

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

javascript

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

Angular

Angular - HTML
Angular - TypeScript

html

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

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

cshtml

<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

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: