Customize the Report Designer Toolbar

This document describes approaches used to modify commands available on the toolbar and in the main menu of the Web Report Designer.

Prepare a Custom Command Icon

To provide an icon for a custom command, perform the following steps:

  1. Create a required image file (24x24 pixels) and add it to the project (e.g., CustomButton.png in this example).
  2. Declare a CSS class specifying a custom command icon as shown below.

    .customButton {
      background-image: url(../CustomButton.png);
      background-repeat: no-repeat;
    }
    

Add a Custom Command at Design Time

To add a new Designer command at design time, do the following:

  1. Switch to the Design view, click the Web Report Designer's smart tag, and select Designer in the invoked actions list.

    web-report-designer-run-designer

  2. In the invoked ASPxReportDesigner Designer, activate the Menu Items tab and click the web-document-viewer-designer-add-button button to add a new menu command. This automatically creates a new ClientControlsMenuItem object and adds it to the ASPxReportDesigner.MenuItems collection. Specify settings for the added command in the Item Properties list.

    web-report-designer-designer

    The following properties are available for the created command.

    • Container - specifies if the command is displayed in the Designer menu or on the main toolbar.
    • Disabled - specifies whether or not the command is disabled by default.
    • HasSeparator - specifies whether or not the command has a visual separator.
    • HotKey - specifies the keyboard shortcut used to invoke the command.
    • ImageClassName - specifies the CSS class of the command's glyph.
    • JSClickAction - specifies the client-side action to be performed when the command is invoked.
    • Text - specifies the text for the command.
    • Visible - specifies whether or not the command is visible in the Designer user interface.
  3. Click OK to apply all the changes and exit the dialog.

Modify Commands at Runtime

To customize menu commands at runtime, handle the ASPxClientReportDesigner.CustomizeMenuActions event on the client side.

The event argument provides access to the Actions collection containing all commands available in the Report Designer. You can add new commands to the collection as well as modify the existing commands. Refer to Report Designer's Client-Side API for a complete list of available commands.

The code below demonstrates the CustomizeMenuActions event handler that hides an existing command and registers a custom one on the Report Designer Toolbar.

function CustomizeMenuActions(s, e) {
    var actions = e.Actions;

    //Get the "Save" action and hide it
    var saveAction = e.GetById(DevExpress.Designer.Report.ActionId.Save);
    if (saveAction)
       saveAction.visible = false;

    //Add a new action
    actions.push({
        text: "Custom Command",
        imageClassName: "customButton",
        disabled: ko.observable(false),
        visible: true,
        hasSeparator: true,
        // The clickAction handler receives the client-side report model 
        // allowing you interact with the currently opened report on the client. 
        clickAction: function (report) {
            alert('Clicked');
        },
        hotKey: { ctrlKey: true, keyCode: "Z".charCodeAt(0) },
        container: "toolbar"
    });
}

Finally, assign the created handler to the ReportDesignerClientSideEvents.CustomizeMenuActions property of an ASPxReportDesigner object as shown below.

<dx:ASPxReportDesigner 
    ID="ASPxReportDesigner1" runat="server"         
    ClientSideEvents-CustomizeMenuActions="CustomizeMenuActions" />