Toolbar customization

To customize the Bold Reports^® ASP.NET Web Forms Report Viewer toolbar, use the templates and the Report Viewer toolbar customization properties. You can hide the toolbar to show a customized user interface, or customize the toolbar icons and element appearance.

In this tutorial, the sales-order-detail.rdl report is used. You can download it from the sales-order-detail report download. You can add the reports from the Syncfusion^® installation location. For more information, refer to Samples and demos.

How do I hide toolbar items?

To hide toolbar items in the Report Viewer, set the ToolbarSettings 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.

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

   <div style="height: 650px;width: 950px;min-height:404px;">
       <Bold:ReportViewer runat="server" ID="viewer"
           ReportServiceUrl="/api/ReportViewer"
           ReportPath="~/Resources/sales-order-detail.rdl">
       </Bold:ReportViewer>
   </div>

2. The following code example demonstrates how to hide the parameter block in your application’s Page_Load() function.

   protected void Page_Load(object sender, EventArgs e)
   {
       this.viewer.ToolbarSettings = new BoldReports.Models.ReportViewer.ToolbarSettings();
       this.viewer.ToolbarSettings.Items = BoldReports.ReportViewerEnums.ToolbarItems.All & ~BoldReports.ReportViewerEnums.ToolbarItems.Parameters;
   }

How do I enable the stop option in the toolbar?

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

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

   <div style="height: 650px;width: 950px;min-height:404px;">
       <Bold:ReportViewer runat="server" ID="viewer"
           ReportServiceUrl="/api/ReportViewer"
           ReportPath="~/Resources/sales-order-detail.rdl">
       </Bold:ReportViewer>
   </div>

2. The following code example demonstrates how to enable stop option in your application’s Page_Load() function.

   protected void Page_Load(object sender, EventArgs e)
   {
       this.viewer.ToolbarSettings = new BoldReports.Models.ReportViewer.ToolbarSettings();
       this.viewer.ToolbarSettings.Items = BoldReports.ReportViewerEnums.ToolbarItems.All;
   }

How do I enable the export setup option in the toolbar?

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

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

   <div style="height: 650px;width: 950px;min-height:404px;">
       <Bold:ReportViewer runat="server" ID="viewer"
           ReportServiceUrl="/api/ReportViewer"
           ReportPath="~/Resources/sales-order-detail.rdl">
       </Bold:ReportViewer>
   </div>

2. The following code example demonstrates how to enable export setup option in your application’s Page_Load() function.

   protected void Page_Load(object sender, EventArgs e)
   {
       this.viewer.ToolbarSettings = new BoldReports.Models.ReportViewer.ToolbarSettings();
       this.viewer.ToolbarSettings.Items = BoldReports.ReportViewerEnums.ToolbarItems.All;
   }

How do I enable the search text option in the toolbar?

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

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

   <div style="height: 650px;width: 950px;min-height:404px;">
       <Bold:ReportViewer runat="server" ID="viewer"
           ReportServiceUrl="/api/ReportViewer"
           ReportPath="~/Resources/sales-order-detail.rdl">
       </Bold:ReportViewer>
   </div>

2. The following code example demonstrates how to enable search text option in your application’s Page_Load() function.

   protected void Page_Load(object sender, EventArgs e)
   {
       this.viewer.ToolbarSettings = new BoldReports.Models.ReportViewer.ToolbarSettings();
       this.viewer.ToolbarSettings.Items = BoldReports.ReportViewerEnums.ToolbarItems.All;
   }

How do I hide the toolbar?

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

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

   <div style="height: 650px;width: 950px;min-height:404px;">
       <Bold:ReportViewer runat="server" ID="viewer"
           ReportServiceUrl="/api/ReportViewer"
           ReportPath="~/Resources/sales-order-detail.rdl">
       </Bold:ReportViewer>
   </div>

2. The following code example demonstrates how to hide the toolbar in your application’s Page_Load() function.

   protected void Page_Load(object sender, EventArgs e)
   {
       this.viewer.ToolbarSettings = new BoldReports.Models.ReportViewer.ToolbarSettings();
       this.viewer.ToolbarSettings.ShowToolbar = false;
   }

How do I show or hide the export options?

To show or hide the default export types in the Report Viewer, use the ExportOptions property. The following code hides the HTML export type from the default export options.

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

   <div style="height: 650px;width: 950px;min-height:404px;">
       <Bold:ReportViewer runat="server" ID="viewer"
           ReportServiceUrl="/api/ReportViewer"
           ReportPath="~/Resources/sales-order-detail.rdl">
       </Bold:ReportViewer>
   </div>

2. The following code example demonstrates how to decide or hide the export option in your application’s Page_Load() function.

   protected void Page_Load(object sender, EventArgs e)
   {
       this.viewer.ExportSettings = new BoldReports.Models.ReportViewer.ExportSettings();
       this.viewer.ExportSettings.ExportOptions = BoldReports.ReportViewerEnums.ExportOptions.All & ~BoldReports.ReportViewerEnums.ExportOptions.Html;
   }

How do I 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. Register the OnClientExportItemClick event to handle the custom item actions as given in following code snippet.

You can use the following codes to add custom items to the export drop-down in your application’s Page_Load() function using ExportSettings property.

   protected void Page_Load(object sender, EventArgs e)
   {
       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);
       this.viewer.ExportSettings = exportSettings;
   }

You can use the following codes to create an OnClientExportItemClick event at client side.

    <div style="height: 650px;width: 950px;min-height:404px;">
        <Bold:ReportViewer runat="server" ID="viewer"
            ReportServiceUrl="/api/ReportViewer"
            ReportPath="~/Resources/sales-order-detail.rdl" OnClientExportItemClick="onExportItemClick">
        </Bold:ReportViewer>
    </div>

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

How do I add a custom toolbar item?

To add custom items to the Report Viewer toolbar, use the ToolbarSettings property. You must register the OnClientToolBarItemClick event to handle the newly added custom items action.

You can use the following codes to add new toolbar group in your application’s Page_Load() function using ToolbarSettings property.

    protected void Page_Load(object sender, EventArgs e)
    {
        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);
        this.viewer.ToolbarSettings = toolbarSettings;
    }

You can use the following codes to create an OnClientToolBarItemClick event at client side.

<div style="height: 650px;width: 950px;min-height:404px;">
    <Bold:ReportViewer runat="server" ID="viewer"
        ReportServiceUrl="/api/ReportViewer"
        ReportPath="~/Resources/sales-order-detail.rdl" OnClientToolBarItemClick="onToolBarItemClick">
    </Bold:ReportViewer>
</div>

<script type="text/javascript">
    function onToolBarItemClick(args) {
        if (args.value == "E-Mail") {
            alert('Action Triggered');
        }
    }
</script>

How do I add a custom item to an existing toolbar group?

To add a custom item to an existing toolbar group in the Report Viewer, use the property CustomGroup 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 in your application’s Page_Load() function using ToolbarSettings property.

   protected void Page_Load(object sender, EventArgs e)
   {
       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 });
       this.viewer.ToolbarSettings = toolbarSettings;
   }

You can use the following codes to create an OnClientToolBarItemClick event at client side.

    <div style="height: 650px;width: 950px;min-height:404px;">
        <Bold:ReportViewer runat="server" ID="viewer"
            ReportServiceUrl="/api/ReportViewer"
            ReportPath="~/Resources/sales-order-detail.rdl" OnClientToolBarItemClick="onToolBarItemClick">
        </Bold:ReportViewer>
    </div>

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

How do I add a new toolbar group?

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

You can use the following codes to add new toolbar group in your application’s Page_Load() function using ToolbarSettings property.

    protected void Page_Load(object sender, EventArgs e)
    {
        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);
        this.viewer.ToolbarSettings = toolbarSettings;
    }