Skip to main content

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

public ReportDesignerClientSideEventsBuilder CustomizeMenuActions(
    string callback
)

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.

Remove the New Command

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

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

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

See Also