ReportDesignerPreviewClientSideEventsBuilder.CustomizeMenuActions(String) Method

Sets the name of the JavaScript function or the entire code that will handle the CustomizeMenuActions client-side event of the Web Report Designer‘s Preview.

Namespace: DevExpress.AspNetCore.Reporting.ReportDesigner

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

NuGet Package: DevExpress.AspNetCore.Reporting

Declaration

C#

public ReportDesignerPreviewClientSideEventsBuilder CustomizeMenuActions(
    string callback
)

VB.NET

Public Function CustomizeMenuActions(
    callback As String
) As ReportDesignerPreviewClientSideEventsBuilder

Parameters

Name	Type	Description
callback	String	The name of a JavaScript function or the entire JavaScript function code used to handle the CustomizeMenuActions event.

Returns

Type	Description
ReportDesignerPreviewClientSideEventsBuilder	A ReportDesignerPreviewClientSideEventsBuilder that can be used to further configure the Report Designer Preview Client Side Events.

Remarks

The CustomizeMenuActions event enables you to customize the menu actions of the Document Viewer that is built into the Web Report Designer. When implementing a handling function, use the objects passed as parameters. The first parameter passes the event sender that is the ClientReportDesigner object. The second one is an object with the following structure.

• Actions
  A collection of Actions available in the Web Report Designer’ Document Viewer toolbar and menu.

• GetById
  This method allows you to obtain the required Action by its ID (ActionId value).

The following example demonstrates how to hide the existing Highlight Editing Fields toolbar command and add a new Run Slide Show command that navigates through document pages.

CSHTML

@{
    var designer = Html.DevExpress().ReportDesigner("reportDesigner1").Height("1000px")
        .Bind(Model.Report)
        .ClientSideEvents(configure => { configure.Preview(configure => { configure.CustomizeElements("customizeMenuActions"); }); } );
}
@designer

JavaScript

<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>

See the following topics for more information:

• Customize the Document Viewer Toolbar in ASP.NET Core Application
• Customize the Report Designer Toolbar and Menu