ReportDesignerClientSideEventsBuilder.CustomizeMenuActions(String) Method

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

Namespace: DevExpress.AspNetCore.Reporting.ReportDesigner

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

NuGet Package: DevExpress.AspNetCore.Reporting

Declaration

C#

public ReportDesignerClientSideEventsBuilder CustomizeMenuActions(
    string callback
)

VB.NET

Public Function CustomizeMenuActions(
    callback As String
) As ReportDesignerClientSideEventsBuilder

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
ReportDesignerClientSideEventsBuilder	A ReportDesignerClientSideEventsBuilder that can be used to further configure the Report Designer Client Side Events.

Remarks

The CustomizeMenuActions event enables you to customize the Web Report Designer’s menu actions. 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 Toolbar.

• GetById
  This method allows you to obtain the required Action by its ID. Pass the DevExpress.Analytics.Tools.ActionId or DevExpress.Reporting.Designer.Actions.ActionId value as the method parameter.

Remove the New Command

The following code removes the New command from the Main Menu:

CSHTML

<script type="text/javascript">
    function customizeActions(s, e) {
        var action = e.GetById(DevExpress.Reporting.Designer.Actions.ActionId.NewReport);
        if (action)
            action.visible = false;
    }
</script>

@{
    var designerRender = Html.DevExpress().ReportDesigner("reportDesigner")
        .Height("700px")
        .ClientSideEvents(configure => { configure.CustomizeMenuActions("customizeActions"); })
        .Bind("TestReport");
    @designerRender.RenderHtml()
}

Add the Refresh Command

The following code adds a new Refresh command that reloads a report in the current report tab.

CSHTML

<script type="text/html" id="refresh">
    <svg version="1.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">
        <path class="dxd-icon-fill" d="M22,2v8h-0.2h-3.09H14l2.94-2.94C15.68,5.79,13.93,5,12,5c-3.87,0-7,3.13-7,7H2C2,6.48,6.48,2,12,2
            c2.76,0,5.26,1.12,7.07,2.93L22,2z M12,19c-1.93,0-3.68-0.79-4.94-2.06L10,14H5.29H2.2H2v8l2.93-2.93C6.74,20.88,9.24,22,12,22
            c5.52,0,10-4.48,10-10h-3C19,15.87,15.87,19,12,19z" />
    </svg>
</script>
<script type="text/javascript">
    function customizeActions(s, e) {
        // Add a new action.
        e.Actions.push({
            text: "Refresh",
            imageTemplateName: "refresh",
            visible: true,
            disabled: false,
            hasSeparator: false,
            hotKey: { ctrlKey: true, keyCode: "Z".charCodeAt(0) },
            clickAction: function () {
                s.GetCurrentTab().refresh();
            }
        });
    }
</script>

@{
    var reportDesigner = Html.DevExpress().ReportDesigner("reportDesigner1")
        .Height("1000px")
        .Bind("Report")
        .ClientSideEvents(configure => { configure.CustomizeMenuActions("customizeActions"); });
}
@reportDesigner

Review the following help topic for more information: Customize the Report Designer Toolbar and Menu.