Skip to main content

WebDocumentViewerClientSideEventsBuilder.CustomizeMenuActions(String) Method

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

Namespace: DevExpress.AspNetCore.Reporting.WebDocumentViewer

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

NuGet Package: DevExpress.AspNetCore.Reporting


public WebDocumentViewerClientSideEventsBuilder CustomizeMenuActions(
    string callback


Name Type Description
callback String

The name of a JavaScript function or entire JavaScript function code that runs when the CustomizeMenuActions event occurs.


Type Description

A WebDocumentViewerClientSideEventsBuilder that can be used for method chaining.


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:


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


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


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:

<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") {                
    var viewerRender = Html.DevExpress().WebDocumentViewer("DocumentViewer")
        .ClientSideEvents(configure => configure.CustomizeMenuActions("onCustomizeMenuActions"))

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.

<script type="text/html" id="slideshow">
    <svg version="1.1" id="Layer_1" xmlns="" xmlns: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 " />

<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;
            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) {
                var model = s.GetPreviewModel();
                if (model) {
                    interval = setInterval(function () {
                        var pageIndex = model.GetCurrentPageIndex();
                        model.GoToPage(pageIndex + 1);
                    }, 2000);
    var documentViewer = Html.DevExpress().WebDocumentViewer("webDocumentViewer1")
        .ClientSideEvents(configure => {

Review the following help topics for more information:

See Also