logo
small logo
  • Producto
  • Comprar
  • Ayuda
  • About
  • Consola de usarios Ayuda
    • en
    • de
    • JP
    • ZH
  • Página principal
  • /
  • Blogs
  • /
  • How to create a custom toolbar for web FastReport.NET report
  • Personalización de la barra de herramientas y configuración de exportación en FastReport.Web para Core

    6 de septiembre de 2021

    Nuestros usuarios a menudo necesitan cambiar la apariencia de la barra de herramientas o personalizar

    read more
  • Cómo crear un informe dentro de la aplicación ASP .NET MVC en Visual Basic

    3 de marzo de 2022

    Según muchas personas, el lenguaje de programación Visual Basic .NET es un lenguaje de

    read more
  • Cómo utilizar FastCube .NET en la aplicación SP .NET Core

    6 de mayo de 2021

    1. Sobre FastCube El generador de informes FastReport .NET cubre casi todas las necesidades de

    read more
  • Cómo utilizar diagramas de Gantt en FastReport Business Graphics

    11 de octubre de 2021

    Un tipo interesante de gráficos, el diagrama de Gantt, apareció con el lanzamiento de

    read more
  • How to create business cards from ASP .NET Core application

    31 de mayo de 2020

    ASP.NET Core Framework is a cross-platform solution for creating web applications. This means that you

    read more

How to create a custom toolbar for web FastReport.NET report

31 de mayo de 2020

Many users of report generators are interested in setting up the toolbar when reviewing the report. Such questions appear periodically on forums and questionnaires. Like this user of the DevExpress report generator who wants to customize the web report toolbar ASP.Net MVC.

In some cases, the user will simply be satisfied with hiding unnecessary controls. But what if the standard report review toolbar doesn't satisfy at all?

A standard web report toolbar may not suit the user by design or toolkit. The only solution to these problems may be to implement your own toolbar. Of course, it does not have to be a panel, controls can be placed as you like on the web page. We're just going to "pull the report for the right ropes" to get the behaviour we need. As an example, we'll look at the standard ASP.Net MVC app.

Web method returns a representation of the report and by custom controls. We use a static object of the web report, in order to be able to manipulate them throughout the application. For example, turning the pages.

1
public static WebReport webReport = new WebReport();

 The web method takes several parameters: export type, display toolbar, panel style, type of transition to another page.

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
 public ActionResult Index(string ExportType,string toolbar, string page)
 {
 SetReport();//Method of the loading template into the report object
 if (ExportType != null) Export(ExportType); //Report export method
 SetPage(page); //Go to the particular report page method 
 ShowToolbar(toolbar); //Hide/display toolbar method
 webReport.Width = Unit.Percentage(100);
 webReport.Height = Unit.Percentage(100);
 ViewBag.WebReport = webReport;
 return View();
 }
 
//Upload the report object method
 private void SetReport()
 {
 string report_path = GetReportPath();
 System.Data.DataSet dataSet = new System.Data.DataSet();
 dataSet.ReadXml(report_path + "nwind.xml");
 webReport.Report.RegisterData(dataSet, "NorthWind");
 webReport.Report.Load(report_path + "Master-Detail.frx"); 
 }
 
// Go to the particular report page method 
 public void SetPage(string page)
 {
 switch (page)
 {
 case "Next":
 NextPage();
 break;
 case "Prev":
 PrevPage();
 break;
 case "First":
 FirstPage();
 break;
 case "Last":
 LastPage();
 break;
 case "Print":
 Print();
 break;
 }
 }

 This method essentially selects the action depending on which button we click on the web page. In addition to the actions of navigating the report, there is a button to print the report.

1
2
3
4
5
//Next page 
 public void NextPage()
 {
 webReport.NextPage();
 } 

 These and other report navigation methods use the standard function buttons on the report toolbar.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//Previous page
 public void PrevPage()
 {
 webReport.PrevPage();
 }
//First page
 public void FirstPage()
 {
 webReport.FirstPage();
 }
//Last page
 public void LastPage()
 {
 webReport.LastPage();
 }
//Print report
 public void Print()
 {
 webReport.PrintHtml();
 }

 The report print can also be set as PrintPDF(). At the same time, the report will be pre-exported to the pdf format.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//Report export nethod
 public void Export(string type)
 {
 switch (type)
 {
 case "pdf": 
 webReport.ExportPdf();
 break;
 case "csv":
 webReport.ExportCsv();
 break;
 case "doc":
 webReport.ExportWord2007();
 break;
 }
 }

 In order to determine the export format, we again used a switch statement. Depending on the selected format is performed corresponding to the export method.

1
2
3
4
5
6
7
8
9
10
11
//Set the path of the report folder
 private string GetReportPath()
 {
 return this.Server.MapPath("~/App_Data/");
 }
 
//Hide/display the toolbar default method
 public void ShowToolbar(string toolbar)
 {
 webReport.ShowToolbar = toolbar;
 }

 Now let's take a look at the program. As you know, our task is to create a print, export and navigation report control.

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
@{
 ViewBag.Title = "Home Page";
}
<div style="float:left">
 <div align="left">
 @using (Html.BeginForm("Index", "Home"))
 {
 <table>
 <tr>
 <td>
 <input id="Print" type="submit" value="Print" onclick="document.getElementById('page').value='Print'" />
 </td>
 <td>
 @Html.DropDownList("ExportType", new List<SelectListItem>()
 {
 new SelectListItem(){ Text= "PDF", Value = "pdf"},
 new SelectListItem(){ Text= "CSV", Value = "csv"},
 new SelectListItem(){ Text= "Word", Value = "doc"},
 }, "Select export type", { @onchange = "this.form.submit()" } )
 </td>
 <td>
 @Html.CheckBox("Show toolbar", true, new { @onchange = "this.form.submit()" }) Toolbar
 </td>
 <td>
 <input id="first" type="submit" value="<<" onclick="document.getElementById('page').value='First'" />
 <input id="prev" type="submit" value="<" onclick="document.getElementById('page').value='Prev'" />
 <input id="next" type="submit" value=">" onclick="document.getElementById('page').value='Next'" />
 <input id="Last" type="submit" value=">>" onclick="document.getElementById('page').value='Last'" />
 <input id="page" type="hidden" name="page">
 </td>
 </tr>
 </table>
 }
 </div>
</div>
<div>
@ViewBag.WebReport.GetHtml()
</div>

 We have added a Print button, a drop-out  list with export types, a checkbox hiding a standard toolbar, and a page-by-page transition button (first, previous, next, and last page). Let's see what happened:

 ASP .Net MVC application custom toolbar

As a result, we created our own toolbar to interact with the report. That will allow us to embed these elements into the design of the web page and abandon the standard panel. In this example, we didn't implement all the functionality of a standard toolbar, but only basic features. You can easily implement other features by analogy with the example considered.

about product comprar
avatar
Dmitriy Fedyashov
Technical Writer
Fast Reports Team: Dmitriy Fedyashov - Technical Writer at Fast Reports
.NET FastReport ASP.NET MVC Customization Toolbar

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
  • Comprar
  • Descargar
  • Documentación
  • Opiniones de usuarios
  • Cómo desinstalar nuestros productos
  • FAQ
  • Toturial en vídeo
  • Foro
  • Documentación técnica
  • Nuestras noticias
  • Quiénes somos
  • Socios
  • Extended licensing
  • Contactos

© 1998-2023 by Fast Reports Inc.

  • Privacidad