Search results

Toolbar Customization

You can hide the component toolbar to show customized user interface or customize the toolbar icons and element’s appearances using the templates and Report Viewer properties.

In this tutorial, the Sales Order Detail.rdl report is used, and it can be downloaded from here. You can add the reports from the Syncfusion installation location. For more information, refer to Samples and demos.

Hide parameter block and toolbar items

To hide toolbar items, set the toolbarSettings property. The following code can be used to remove the parameter option from the toolbar and hide the parameter block.

<ej-reportviewer id="reportViewer_Control"
    [reportServiceUrl] = "serviceUrl"
    [processingMode] = "Remote"
    [reportServerUrl] = "serverUrl"
    [reportPath] = "reportPath"
    [toolbarSettings] = "toolbarSettings">
</ej-reportviewer>
import { Component, ViewChild } from '@angular/core';
import { EJComponents } from 'ej-angular2/src/ej/core';

@Component({
    selector: 'ej-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    public serviceUrl: string;
    public reportPath: string;
    public serverUrl: string;
    public toolbarSettings: any;

    constructor() {
        this.serviceUrl = 'https://reports.syncfusion.com/demos/services/api/ReportApi';
        this.reportPath = 'GroupingAgg.rdl';
        this.toolbarSettings = {
            items: ~ej.ReportViewer.ToolbarItems.Parameters,
        }
    }
}

The following code sample hides the print options from the toolbar items.

<ej-reportviewer id="reportViewer_Control"
    [reportServiceUrl] = "serviceUrl"
    [processingMode] = "Remote"
    [reportServerUrl] = "serverUrl"
    [reportPath] = "reportPath"
    [toolbarSettings] = "toolbarSettings">
</ej-reportviewer>
import { Component, ViewChild } from '@angular/core';
import { EJComponents } from 'ej-angular2/src/ej/core';

@Component({
    selector: 'ej-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    public serviceUrl: string;
    public reportPath: string;
    public serverUrl: string;
    public toolbarSettings: any;

    constructor() {
        this.serviceUrl = 'https://reports.syncfusion.com/demos/services/api/ReportApi';
        this.reportPath = 'GroupingAgg.rdl';
        this.toolbarSettings = {
            items: ~ej.ReportViewer.ToolbarItems.Print,
        }
    }
}

Similarly, you can show or hide all other toolbar options with the help of toolbarSettings.items enum.

Hide toolbar

To hide the Report Viewer toolbar, set the showToolbar property to false.

<ej-reportviewer id="reportViewer_Control"
    [reportServiceUrl] = "serviceUrl"
    [processingMode] = "Remote"
    [reportServerUrl] = "serverUrl"
    [reportPath] = "reportPath"
    [toolbarSettings] = "toolbarSettings">
</ej-reportviewer>
import { Component, ViewChild } from '@angular/core';
import { EJComponents } from 'ej-angular2/src/ej/core';

@Component({
    selector: 'ej-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    public serviceUrl: string;
    public reportPath: string;
    public serverUrl: string;
    public toolbarSettings: any;

    constructor() {
        this.serviceUrl = 'https://reports.syncfusion.com/demos/services/api/ReportApi';
        this.reportPath = 'GroupingAgg.rdl';
        this.toolbarSettings = {
            showToolbar: false,
        }
    }
}

Decide or hide the export option

The Report Viewer provides the exportOptions property to show or hide the default export types available in the component. The following code hides the HTML export type from the default export options.

<ej-reportviewer id="reportViewer_Control"
    [reportServiceUrl] = "serviceUrl"
    [processingMode] = "Remote"
    [reportServerUrl] = "serverUrl"
    [reportPath] = "reportPath"
    [exportSettings] = "exportSettings">
</ej-reportviewer>
import { Component, ViewChild } from '@angular/core';
import { EJComponents } from 'ej-angular2/src/ej/core';

@Component({
    selector: 'ej-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    public serviceUrl: string;
    public reportPath: string;
    public serverUrl: string;
    public exportSettings: any;

    constructor() {
        this.serviceUrl = 'https://reports.syncfusion.com/demos/services/api/ReportApi';
        this.reportPath = 'GroupingAgg.rdl';
        this.exportSettings = {
            exportOptions: ej.ReportViewer.ExportOptions.All & ~ej.ReportViewer.ExportOptions.HTML
        }
    }
}

Add custom items to the export drop-down

To add custom items to the export drop-down available in the Report Viewer toolbar, use the customItems property and provide the JSON array of collection input with the index, cssClass name, and value properties. Register the exportItemClick event to handle the custom item actions as given in following code snippet.

<ej-reportviewer id="reportViewer_Control"
    [reportServiceUrl] = "serviceUrl"
    [processingMode] = "Remote"
    [reportServerUrl] = "serverUrl"
    [reportPath] = "reportPath"
    [exportSettings] = "exportSettings"
    (exportItemClick) = "onExportItemClick($event)">
</ej-reportviewer>
import { Component, ViewChild } from '@angular/core';
import { EJComponents } from 'ej-angular2/src/ej/core';

@Component({
    selector: 'ej-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    public serviceUrl: string;
    public reportPath: string;
    public serverUrl: string;
    public exportSettings: any;

    constructor() {
        this.serviceUrl = 'https://reports.syncfusion.com/demos/services/api/ReportApi';
        this.reportPath = 'GroupingAgg.rdl';
        this.exportSettings = {
            customItems: [{
                index: 2,
                cssClass: '',
                value: 'Text File'
            },
            {
                index: 4,
                cssClass: '',
                value: 'DOT'
            }]
        };
    }

    //Export click event handler
    onExportItemClick(event) {
        if (event.value === "Text File") {
            //Implement the code to export report as Text
            alert("Text File export option clicked");
        } else if (event.value === "DOT") {
            //Implement the code to export report as DOT
            alert("DOT export option clicked");
        }
    }
}

Add custom toolbar item

You can add custom items to Report Viewer toolbar using the toolbarSettings property. You should register the toolBarItemClick event to handle the newly added custom items action.

Add custom item to exiting toolbar group

To add a custom item to existing toolbar group use the customItems property in toolbarSettings and provide the JSON array of collection input with the groupIndex, index, itemType, cssClass name, and tooltip properties as given in following code snippet.

<ej-reportviewer id="reportViewer_Control"
    [reportServiceUrl] = "serviceUrl"
    [processingMode] = "Remote"
    [reportServerUrl] = "serverUrl"
    [reportPath] = "reportPath"
    [toolbarSettings] = "toolbarSettings"
    (toolBarItemClick) = "onToolBarItemClick($event)">
</ej-reportviewer>
import { Component, ViewChild } from '@angular/core';
import { EJComponents } from 'ej-angular2/src/ej/core';

@Component({
    selector: 'ej-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    public serviceUrl: string;
    public reportPath: string;
    public serverUrl: string;
    public toolbarSettings: any;

    constructor() {
        this.serviceUrl = 'https://reports.syncfusion.com/demos/services/api/ReportApi';
        this.reportPath = 'GroupingAgg.rdl';
        this.toolbarSettings = {
            showToolbar: true,
            items: ~ej.ReportViewer.ToolbarItems.Print,
            customItems: [{
                groupIndex: 1,
                index: 1,
                type: 'Default',
                cssClass: "e-icon e-mail e-reportviewer-icon",
                id: 'E-Mail',
                tooltip: {
                    header: 'E-Mail',
                    content: 'Send rendered report as mail attachment'
                }
            }]
        }
    }

    //Toolbar click event handler
    onToolBarItemClick(event) {
        if (event.value === "CustomItem") {
            //Implement the code to CustomItem toolbar option
            alert("CustomItem toolbar option Clicked");
        }
    }
}

Add new toolbar group

To add a new toolbar group and custom items to it, use the customGroups property in the toolbarSettings and provide the JSON array of collection input with the groupIndex and items properties. The items should have the itemType, cssClass, and tooltip properties as given in following code snippet.

<ej-reportviewer id="reportViewer_Control"
    [reportServiceUrl] = "serviceUrl"
    [processingMode] = "Remote"
    [reportServerUrl] = "serverUrl"
    [reportPath] = "reportPath"
    [toolbarSettings] = "toolbarSettings"
    (toolBarItemClick) = "onToolBarItemClick($event)">
</ej-reportviewer>
import { Component, ViewChild } from '@angular/core';
import { EJComponents } from 'ej-angular2/src/ej/core';

@Component({
    selector: 'ej-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    public serviceUrl: string;
    public reportPath: string;
    public serverUrl: string;
    public toolbarSettings: any;

    constructor() {
        this.serviceUrl = 'https://reports.syncfusion.com/demos/services/api/ReportApi';
        this.reportPath = 'GroupingAgg.rdl';
        this.toolbarSettings = {
            showToolbar: true,
            items: ~ej.ReportViewer.ToolbarItems.Print,
            customGroups: [{
                items: [{
                    type: 'Default',
                    cssClass: "e-icon e-mail e-reportviewer-icon CustomGroup",
                    id: 'CustomGroup',
                    tooltip: { header: 'CustomGroup', content: 'toolbargroups' }
                },
                {
                    type: 'Default',
                    cssClass: "e-icon e-mail e-reportviewer-icon subCustomGroup",
                    id: 'subCustomGroup',
                    tooltip: { header: 'subCustomGroup', content: 'subtoolbargroups' }
                }],
                groupIndex: 3
            }]
        }
    }

    //Toolbar click event handler
    onToolBarItemClick(event) {
        if (event.value === "CustomGroup") {
            //Implement the code to CustomGroup toolbar option
            alert("CustomGroup toolbar option clicked");
        }
        if (event.value === "subCustomGroup") {
            //Implement the code to subCustomGroup toolbar option
            alert("SubCustomGroup toolbar option clicked");
        }
    }
}