logo
small logo
  • Products
  • Buy
  • Support
  • About
  • Customer panel Support
    • en
    • de
    • JP
    • ZH
  • Home
  • /
  • Articles
  • /
  • Toolbar customization and export settings in FastReport.Web for Core
  • Reports and PDF documents in Blazor

    April 5, 2021

    Microsoft has recently launched a web platform called Blazor. This framework allows creating an interactive

    read more
  • FastReport .NET packages and .NET 5.0

    December 17, 2020

    UPD: Applies to the versions of FastReport .NET before 2022.2. License packages are now available

    read more
  • Setup of advanced export functions in FastReport.Web for Core and Blazor Server

    December 6, 2021

    Often, our users need to change the file export parameters, and we will look

    read more
  • How to display multiple reports on single Blazor page

    July 12, 2022

    Often, our users need to display two reports with different data on the same

    read more
  • How to use FastReport Core Web Report in Angular 7

    April 29, 2019

    The concept of one-page apps is finding an increasing number of supporters. One of the

    read more

Toolbar customization and export settings in FastReport.Web for Core

September 6, 2021

Our users often need to change the appearance of the toolbar or customize the export menu, but not everyone knows how to do this. Let’s say that we already have a finished project. As an example, we can use any report from the FastReport .NET demo application.

Let’s add some colors to our toolbar. We need to write a code that will be responsible for customization:

ToolbarSettings toolbar = new ToolbarSettings()
{
 Color = Color.Red,
 DropDownMenuColor = Color.IndianRed,
 IconColor = IconColors.Left,
 Position = Positions.Left,
 IconTransparency = IconTransparencyEnum.Low,
};
webReport.Toolbar = toolbar;

Now let's run our application and see the result:

The result of customization

Let’s take a look at how customization of the toolbar works in FastReport Web for Core in more detail.

All customization parameters are stored as a collection of properties. There are several options of how you can implement changes in the appearance of the toolbar, but they all come down to adding or changing parameters.

Let’s consider the appearance customization from the code, where you can see a list of collections and properties. Here are some of them:

  • Color – change the background color of the toolbar.
  • DropDownMenuColor – set the background color of the dropdown menu.
  • DropDownMenuTextColor – set the text color of the dropdown menu.
  • Position – change the toolbar position in the report.
  • Roundness – add roundness to the toolbar.
  • ContentPosition – change the content position.
  • IconColor – change the icon colors.
  • IconTransparency – adjust the icons transparency.
  • FontSettings – fine-tune text styles.

Let’s assume that we want to change the color of the dropdown menu and display all kinds of export options in it.

To change the appearance of the dropdown menu, you just need to write some changes in the toolbar. But to display all the exporting data options, you need to add the following piece of code:

ToolbarSettings toolbar = new ToolbarSettings()
 {
 Color = Color.Red,
 DropDownMenuColor = Color.Red,
 DropDownMenuTextColor = Color.White,
 IconColor = IconColors.White,
 Position = Positions.Right,
 FontSettings = new Font("Arial", 14, FontStyle.Bold),
 Exports = new ExportMenuSettings()
 {
 ExportTypes = Exports.All
 }
 };
 model.WebReport.Toolbar = toolbar;

If we run our project, we will see that the dropdown menu has changed, and the exporting data options have significantly increased:

Export to all formats

Now we see a customized menu with export formats.

But what if we need only certain formats? For example, we need PDF, XPS, and CSV only. Let’s implement it!

We need to slightly change the export settings in the container:

Exports = new ExportMenuSettings()
{
 ExportTypes = Exports.Pdf | Exports.Xps | Exports.Csv
}

Let’s run our application and see the result:

Export to certain formats

If only these export options are displayed, then you did everything right.

So, we have described how to customize the toolbar and edit the dropdown menu with export options in FastReport Web for Core. In addition to these examples, you can use the parameters discussed in combination with the other ones.

Customization of objects appearance in Blazor

We also need to mention Blazor, which includes everything that a regular version does, but with more advanced functionality.

We will use the project from the following article: Reports and PDF documents in Blazor. 

Let’s customize the toolbar appearance.

Go to the Pages/Index.razor.cs file. Here we will customize the toolbar, and add a part of the code that is responsible for customization in Blazor:

 var toolbar = new ToolbarSettings
{
 FontSettings = new Font("Verdana,Arial sans-serif", 15),
 Color = Color.Red,
 DropDownMenuColor = Color.Red,
 DropDownMenuTextColor = Color.White,
 IconColor = IconColors.White,
 Position = Positions.Bottom,
 ContentPosition = ContentPositions.Center,
}; 

Let’s run our application and see the result:

The result of customization

Imagine, that in addition to simple customization we need to add export to PS, HPGL, JSON, and PDF.

Let’s add the following code to implement this:

Exports = new ExportMenuSettings()
{
 ExportTypes = Exports.PS | Exports.Hpgl | Exports.Json | Exports.Pdf 
}

As a result, we will get the export settings we need.

Export to PS, HPG, JSON, and PDF only

At the moment, the Index.razor and Index.razor.cs files look like this:

Pages/Index.razor
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@page "/"
@page "/{ReportName}"
@inject NavigationManager NavManager
 
<WebReportContainer WebReport="@UserWebReport" >
 
@code {
 [Parameter]
 public string ReportName { get; set; }
 
 protected override void OnParametersSet()
 {
 base.OnParametersSet();
 
 Load();
 }
}

 

Pages/Index.razor/Index.razor.cs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
using System;
using System.Drawing;
using System.IO;
using FastReport;
using FastReport.Web;
using System.Data;
 
namespace Blazor.UserDebugApp.Pages
{
 public partial class Index
 {
 private readonly string directory;
 
 private const string DEFAULT_REPORT = "Simple List.frx";
 
 public WebReport UserWebReport { get; set; }
 
 Report Report { get; set; }
 DataSet DataSet { get; }
 ToolbarSettings Toolbar { get; }
 
 public Index()
 {
 directory = Path.Combine(
 Directory.GetCurrentDirectory(),
 Path.Combine("..", "Demos", "Reports"));
 
 DataSet = new DataSet();
 DataSet.ReadXml(Path.Combine(directory, "nwind.xml"));
 
 Toolbar = new ToolbarSettings
 {
 FontSettings = new Font("Verdana,Arial sans-serif", 15),
 Color = Color.Red,
 DropDownMenuColor = Color.Red,
 DropDownMenuTextColor = Color.White,
 IconColor = IconColors.White,
 Position = Positions.Bottom,
 ContentPosition = ContentPositions.Center,
 Exports = new ExportMenuSettings()
 {
 ExportTypes=Exports.PS|Exports.Hpgl|Exports.Json|Exports.Pdf
 }
 };
 }
 
 private void Load()
 {
 Report = Report.FromFile(
 Path.Combine(
 directory,
 string.IsNullOrEmpty(ReportName) ? DEFAULT_REPORT : ReportName));
 
 Report.RegisterData(DataSet, "NorthWind");
 
 UserWebReport = new WebReport();
 UserWebReport.Report = Report; 
 UserWebReport.Toolbar = Toolbar;
 }
 }
}

We have covered how to customize the objects appearance and set up the list of export options in Blazor. Now you can use the discussed options in your own applications. 

about product buy
avatar
Kirill Kornienko
.NET Development
Fast Reports Team: Kirill Kornienko - NET Development at Fast Reports
.NET Visual Studio FastReport Core WebReport C# Customization Toolbar Blazor

Add comment
logo
  • 800-985-8986 (English, US)
  • +4930568373928 (German)
  • +55 19 98147-8148 (Portuguese)
  • info@fast-report.com
  • 901 N Pitt Str #325 Alexandria VA 22314
  • Buy
  • Download
  • Documentation
  • Testimonials
  • How to uninstall
  • FAQ
  • Tutorial Video
  • Forum
  • Support SLA
  • Articles
  • Our News
  • Press about us
  • Resellers
  • Extended licensing
  • Contact us

© 1998-2023 by Fast Reports Inc.

  • Privacy Policy

Trustpilot