Interactive web report with drill down lists
In this article we look at how to create interactive reports with drop-down groups. We will group the records and display the groups in a collapsed form. If necessary, the user opens and views the contents of a group. This functionality can significantly improve the user experience with the lists. Because groups occupy minimal space in the report, without overloading it with data. You are currently viewing the data for opened group only.
Let's create a report with groups.
I used a database nwind.xml from FastReport.Net delivery. For work, we need only one table - Products.
The report template consists of five bands:
• Report title;
• Group header;
• Group footer;
• Page footer.
In the data band, place the fields: Products.ProductName, Products.UnitPrice.
In the group header, we will display the first letter of the product name:
Double-click on the band GroupHeader.
In the band’s editor, enter the expression to group products by the first letter.
Now double-click on the data. In the band’s editor, select the tab Sort:
Sort by product name.
Add a new Total in the data window:
As a function, use Count:
Drill-down lists usually have a "plus sign", which means that the group is collapsed. In the expanded list, the icon changes to a minus. To realize this we use the CheckBox component. Place it near the group header:
Change CheckedSymbol in the properties of the added object. Select Plus. And for UncheckedSymbol select Minus.
Now we define hypperlink property for the CheckBox object and a text field on the right:
On the custom tab, set expression:
It's time to program a little bit. Choose band GroupHeader. In the Property inspector, select the Events tab. We find the event BeforePrint and then double-click on it. Add the following code for the handler:
Now create a list of visible groups. It is useful to us later:
private List<string> expandedGroups = new List<string>();
Let's go back to the page of the report. Choose object CheckBox. In the Property inspector, we switch to the Events and create a handler for the Click by double-clicking.
The report is ready. Proceed to the creation of web applications.
I'm using ASP.Net MVC project.
Adding FastReport.dll library, FastReport.Web.dll supplied FastReport.Net into Reference.
In HomeController, add the following code:
Add the libraries:
Let us line by line:
1. Create an instance of the report object;
2. Set the height of web report to 100%;
3. Set the width of the web report to 100%;
4. Set the reports directory;
5. Create a data source;
6. Load the database into the data source;
7. Register the data source in the report;
8. Load the report;
9. Pass the report to View.
Now edit the view Index.cshtml:
In _Layout.cshtml file add scripts and styles:
In the Web.config file from the View folder, add namespaces:
In the Web.config file from the root of the project, add a handler:
Now run the Web application:
As you can see, when you click on the cross or group header it expands. In this case the plus sign changes to a minus. If you again click on the group header or minus, the group collapses.
This is how we can create interactive drill-down lists in web reports.