WebDocumentViewerClientSideEventsBuilder.CustomizeMenuActions(String) Method

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

Namespace: DevExpress.AspNetCore.Reporting.WebDocumentViewer

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

Declaration

public WebDocumentViewerClientSideEventsBuilder CustomizeMenuActions(
    string callback
)

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:

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

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") {                
               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.

<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 = ko.observable(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 topic for more information: Customize the Document Viewer Toolbar in ASP.NET Core Application.

See Also