Embedded
Schedule Free Demo
Try it Free
Search results
Suggest a FeaturePDF

Toolbar customization

You can hide the component toolbar to show customized user interface or to customize the toolbar icons and element’s appearances using the templates and Report Viewer toolbar customization 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 Bold Reports installation location. For more information, refer to Samples and demos.

Hide toolbar items

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

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

The following code example demonstrates how to hide the parameter block in the Report Viewer at client side.

    <bold-report-viewer id="viewer" report-service-url="/api/ReportViewer" processing-mode="Remote" toolbar-settings="ViewBag.toolbarSettings">
    </bold-report-viewer>

The following code example demonstrates how to hide the parameter block in the Report Viewer at server side.

    public ActionResult Index()
    {
        ViewBag.toolbarSettings = new BoldReports.Models.ReportViewer.ToolbarSettings();
        ViewBag.toolbarSettings.Items = BoldReports.ReportViewerEnums.ToolbarItems.All
                                            & ~BoldReports.ReportViewerEnums.ToolbarItems.Parameters;
        return View();
    }

Enable stop option in toolbar

To enable stop option in toolbar, set the toolbarSettings.Items property to BoldReports.ReportViewerEnums.ToolbarItems.All. The following code can be used to enable stop option in toolbar.

The following code example demonstrates how to enable stop option in the Report Viewer toolbar at client side.

    <bold-report-viewer id="viewer" report-service-url="/api/ReportViewer" processing-mode="Remote" toolbar-settings="ViewBag.toolbarSettings">
    </bold-report-viewer>

The following code example demonstrates how to enable stop option in the Report Viewer toolbar at server side.

    public ActionResult Index()
    {
        ViewBag.toolbarSettings = new BoldReports.Models.ReportViewer.ToolbarSettings();
        ViewBag.toolbarSettings.Items = BoldReports.ReportViewerEnums.ToolbarItems.All;
        return View();
    }

Enable export setup option in toolbar

To enable export setup option in toolbar, set the toolbarSettings.Items property to BoldReports.ReportViewerEnums.ToolbarItems.All. The following code can be used to enable export setup option in toolbar.

The following code example demonstrates how to enable export setup option in the Report Viewer toolbar at client side.

    <bold-report-viewer id="viewer" report-service-url="/api/ReportViewer" processing-mode="Remote" toolbar-settings="ViewBag.toolbarSettings">
    </bold-report-viewer>

The following code example demonstrates how to enable export setup option in the Report Viewer toolbar at server side.

    public ActionResult Index()
    {
        ViewBag.toolbarSettings = new BoldReports.Models.ReportViewer.ToolbarSettings();
        ViewBag.toolbarSettings.Items = BoldReports.ReportViewerEnums.ToolbarItems.All;
        return View();
    }

Enable search text option in toolbar

To enable search text option in toolbar, set the toolbarSettings.Items property to BoldReports.ReportViewerEnums.ToolbarItems.All. The following code can be used to enable search text option in toolbar.

The following code example demonstrates how to enable search text option in the Report Viewer toolbar at client side.

    <bold-report-viewer id="viewer" report-service-url="/api/ReportViewer" processing-mode="Remote" toolbar-settings="ViewBag.toolbarSettings">
    </bold-report-viewer>

The following code example demonstrates how to enable search text option in the Report Viewer toolbar at server side.

    public ActionResult Index()
    {
        ViewBag.toolbarSettings = new BoldReports.Models.ReportViewer.ToolbarSettings();
        ViewBag.toolbarSettings.Items = BoldReports.ReportViewerEnums.ToolbarItems.All;
        return View();
    }

Hide toolbar

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

The following code example demonstrates how to hide the toolbar in the Report Viewer at client side.

    <bold-report-viewer id="viewer" report-service-url="/api/ReportViewer" processing-mode="Remote" toolbar-settings="ViewBag.toolbarSettings">
    </bold-report-viewer>

The following code example demonstrates how to hide the toolbar in the Report Viewer at server side.

    public ActionResult Index()
    {
        ViewBag.toolbarSettings = new BoldReports.Models.ReportViewer.ToolbarSettings();
        ViewBag.toolbarSettings.ShowToolbar = false;
        return View();
    }

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.

The following code example demonstrates how to decide or hide the export option in the Report Viewer at client side.

    <bold-report-viewer id="viewer" report-service-url="/api/ReportViewer" processing-mode="Remote" export-settings="ViewBag.exportSettings">
    </bold-report-viewer>

The following code example demonstrates how to decide or hide the export option in the Report Viewer at server side.

    public ActionResult Index()
    {
        ViewBag.exportSettings = new BoldReports.Models.ReportViewer.ExportSettings();
        ViewBag.exportSettings.ExportOptions = BoldReports.ReportViewerEnums.ExportOptions.All
                                            & ~BoldReports.ReportViewerEnums.ExportOptions.Html;
        return View();
    }

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 property CustomItems and provide the JSON array of collection input with the Index, CssClass name, and Value properties.

You can use the following codes to add custom items to the export drop-down list from controller and passing the data to view using ViewBag.

    public ActionResult Index()
    {
        ExportSettings exportSettings = new ExportSettings();
        exportSettings.CustomItems = new List<CustomExportItem>();
        var exportItem1 = new CustomExportItem() { Index = 2, CssClass = "", Value = "Text File" };
        var exportItem2 = new CustomExportItem() { Index = 4, CssClass = "", Value = "DOT" };
        exportSettings.CustomItems.Add(exportItem1);
        exportSettings.CustomItems.Add(exportItem2);
        ViewBag.exportSettings = exportSettings;
        return View();
    }

You can use the following codes to set an export-settings property at client side.

    <bold-report-viewer id="viewer" report-service-url="/api/ReportViewer" processing-mode="Remote" export-settings="ViewBag.exportSettings">
    </bold-report-viewer>

You can use the following codes to create an export-item-click event at client side.

    <bold-report-viewer id="viewer" report-service-url="/api/ReportViewer" processing-mode="Remote" export-item-click="onExportItemClick">
    </bold-report-viewer>

    <script type="text/javascript">
        //Export click event handler
        function onExportItemClick(args) {
            alert('Action Triggered');
        }
    </script>

You can use the following codes to get export-settings properties on a dynamic object using ViewBag.exportSettings and invoke custom actions.

    <bold-report-viewer id="viewer" report-service-url="/api/ReportViewer" processing-mode="Remote" export-settings="ViewBag.exportSettings" export-item-click="onExportItemClick">
    </bold-report-viewer>

    <script type="text/javascript">
        //Export click event handler
        function onExportItemClick(args) {
            if (args.value === "Text File") {
                //Implement the code to export report as Text
                alert("Text File export option clicked");
            } else if (args.value === "DOT") {
                //Implement the code to export report as DOT
                alert("DOT export option clicked");
            }
        }
    </script>

Add custom toolbar item

You can add custom items to Report Viewer toolbar using the toolbar-settings property. You must register the tool-bar-item-click event to handle the newly added custom items action.

You can use the following codes to add custom toolbar item from controller and passing the data to view using ViewBag.

    public ActionResult Index()
    {
        ToolbarSettings toolbarSettings = new ToolbarSettings();
        toolbarSettings.CustomItems = new List<CustomItem>();

        var customItem = new CustomItem()
        {
            GroupIndex = 1,
            Index = 1,
            CssClass = "e-icon e-mail e-reportviewer-icon",
            Type = BoldReports.ReportViewerEnums.ToolBarItemType.Default,
            Id = "E-Mail",
            Tooltip = new ToolTip() { Header = "E-Mail", Content = "Send rendered report as mail attachment" }
        };

        toolbarSettings.CustomItems.Add(customItem);
        ViewBag.toolbarSettings = toolbarSettings;
        return View();
    }

You can use the following codes to set an toolbar-settings property at client side.

    <bold-report-viewer id="viewer" report-service-url="/api/ReportViewer" processing-mode="Remote" toolbar-settings="ViewBag.toolbarSettings">
    </bold-report-viewer>

You can use the following codes to create an tool-bar-item-click event at client side.

    <bold-report-viewer id="viewer" report-service-url="/api/ReportViewer" processing-mode="Remote" toolbar-settings="ViewBag.toolbarSettings" tool-bar-item-click="onToolBarItemClick">
    </bold-report-viewer>

    <script type="text/javascript">
        function onToolBarItemClick(args) {
            alert('Action Triggered');
        }
    </script>

Add custom item to exiting toolbar group

To add a custom item to existing toolbar group use the property CustomGroups in ToolbarSettings and provide the JSON array of collection input with the GroupIndex, Items, Type, CssClass name, and Tooltip properties as given in following code snippet.

You can use the following codes to add custom item to exiting toolbar group from controller and passing the data to view using ViewBag.

    public ActionResult Index()
    {
        ToolbarSettings toolbarSettings = new ToolbarSettings();
        var groupItem = new List<CustomItem>();

        groupItem.Add(new CustomItem()
        {
            CssClass = "e-icon e-mail e-reportviewer-icon CustomGroup",
            Type = BoldReports.ReportViewerEnums.ToolBarItemType.Default,
            Id = "CustomGroup",
            Tooltip = new ToolTip() { Header = "CustomGroup", Content = "toolbargroups" }
        });

        groupItem.Add(new CustomItem()
        {
            CssClass = "e-icon e-mail e-reportviewer-icon subCustomGroup",
            Type = BoldReports.ReportViewerEnums.ToolBarItemType.Default,
            Id = "subCustomGroup",
            Tooltip = new ToolTip() { Header = "subCustomGroup", Content = "subtoolbargroups" }
        });

        toolbarSettings.CustomGroups.Add(new CustomGroup() { Items = groupItem, GroupIndex = 4 });
        ViewBag.toolbarSettings = toolbarSettings;
        return View();
    }

You can use the following codes to set an toolbar-settings property at client side.

    <bold-report-viewer id="viewer" report-service-url="/api/ReportViewer" processing-mode="Remote" toolbar-settings="ViewBag.toolbarSettings">
    </bold-report-viewer>

You can use the following codes to create an tool-bar-item-click event at client side.

    <bold-report-viewer id="viewer" report-service-url="/api/ReportViewer" processing-mode="Remote" tool-bar-item-click="onToolBarItemClick">
    </bold-report-viewer>

    <script type="text/javascript">
        function onToolBarItemClick(args) {
            alert('Action Triggered');
        }
    </script>

You can use the following codes to get toolbar-settings properties on a dynamic object using ViewBag.toolbarSettings and invoke custom actions.

    <bold-report-viewer id="viewer" report-service-url="/api/ReportViewer" processing-mode="Remote" toolbar-settings="ViewBag.toolbarSettings" tool-bar-item-click="onToolBarItemClick">
    </bold-report-viewer>

    <script type="text/javascript">
        function onToolBarItemClick(args) {
            if (args.value === "CustomGroup") {
                //Implement the code to CustomGroup toolbar option
                alert("CustomGroup toolbar option clicked");
            }
            if (args.value === "subCustomGroup") {
                //Implement the code to subCustomGroup toolbar option
                alert("SubCustomGroup toolbar option clicked");
            }
        }
    </script>

Add new toolbar group

To add new toolbar group and custom items to it, use the property CustomItems in ToolbarSettings and provide the JSON array of collection input with the GroupIndex, Index properties. The CustomItem must have the properties Type, CssClass and Tooltip as given in following code snippet.

You can use the following codes to add email button from controller and passing the data to view using ViewBag.

    public ActionResult Index()
    {
        ToolbarSettings toolbarSettings = new ToolbarSettings();
        toolbarSettings.CustomItems = new List<CustomItem>();

        var customItem = new CustomItem()
        {
            GroupIndex = 1,
            Index = 1,
            CssClass = "e-icon e-mail e-reportviewer-icon",
            Type = BoldReports.ReportViewerEnums.ToolBarItemType.Default,
            Id = "E-Mail",
            Tooltip = new ToolTip() { Header = "E-Mail", Content = "Send rendered report as mail attachment" }
        };

        toolbarSettings.CustomItems.Add(customItem);
        ViewBag.toolbarSettings = toolbarSettings;
        return View();
    }

You can use the following codes to set an toolbar-settings property on a dynamic object using ViewBag.toolbarSettings at client side.

    <bold-report-viewer id="viewer" report-service-url="/api/ReportViewer" processing-mode="Remote" toolbar-settings="ViewBag.toolbarSettings">
    </bold-report-viewer>