Click here to Skip to main content
11,646,594 members (56,041 online)
Click here to Skip to main content

The HTML Report Engine

, 23 Jun 2006 CPOL 350.2K 15.1K 261
Rate this:
Please Sign up or sign in to vote.
The HTML report engine is a .NET class library which helps in generating well formatted HTML reports.

Sample HTML Report

Generated HTML Report

HTML Report Generator - Sample Application Screenshot

Demo Application Screenshot

Introduction

The HTML Report Engine is a .NET class library which helps in generating well formatted HTML reports. It can take any DataSet as its report source. Reports can have sectional data contents and bar charts.

Background

Crystal Reports is a reporting tool that comes along with VS.NET, but designing and deploying a Crystal Reports report in your application is a bit complex. Though this HTML report engine utility has only limited number of features, it can produce awesome reports with no complex designing and coding work involved.

Using the code

It’s a generic reporting utility which takes as a report source, a DataSet containing at least one DataTable. The class library contains three main classes:

  • Field
  • Section
  • Report

The Field class contains report field information like report column name, column header, background color, and so on.

The Section class holds information about a section like ‘group by’ column name, title prefix, background color, charting information, and so on.

The Report class contains all the methods and properties required to render an HTML report. In this class, a few CSS (Cascaded Style Sheet) classes are used to format the report content. The following code sample explains how to use this utility in your application:

//Include the namespace
using HTMLReportEngine;

//Create report object and set properties.
Report report = new Report();
report.ReportTitle = "Issue Report";
//Create a DataSet ds and fill it before using this code.
report.ReportSource = ds;

//Create Section
Section release = new Section("Release","Release: ");

//Create SubSection
Section project = new Section("Project","ProjectID: ");

//Add the sections to the report
release.SubSection = project;
report.Sections.Add(release);

//Add report fields to the report object.
report.ReportFields.Add(new Field("TicketNo", "Ticket", 50, ALIGN.RIGHT));
report.ReportFields.Add(new Field("CreatedBy", "CreatedBy", 150));
report.ReportFields.Add(new Field("AssignedTo", "AssignedTo"));
report.ReportFields.Add(new Field("Release", "Release", 200));
report.ReportFields.Add(new Field("Project", "Project", 150, ALIGN.RIGHT));

//Generate and save the report
report.SaveReport(@"C:\Data\Report.htm");

Class properties and methods

Field
Property Type Description
FieldName String A column name in the DataSet.
HeaderName String String to be displayed as column header.
Width Int Width of the column in pixels.
Alignment ALIGN Text alignment of the field. Default is ALIGN.LEFT.
BackColor Color Column background color.
HeaderBackColor Color Column header background color.
isTotalField bool If true, the field is included for total. Default is false.
Field() Constructor There are eight overloaded constructors available.
Section
Property Type Description
GroupBy String Column name on which group by is to be applied.
TitlePrefix String Prefix text for section header.
BackColor Color Section header background color.
GradientBackground bool true – to display gradient color; false – to display plain background color. Default is false.
IncludeTotal bool Display/hide Total row.
SubSection Section Subsection of type Section.
IncludeChart bool Display/hide chart.
ChartTitle String Chart title text.
ChartShowAtBottom bool true - show chart at bottom (after data rows); false – show chart at top. Default is false.
ChartChangeOnField String Chart Y-axis field, usually text field.
ChartValueField String Chart X-axis field, must be a numeric field. Default is record count.
ChartShowBorder bool Enable/disable chart border.
ChartLabelHeader String Chart label column header text. Default is ‘Label’.
ChartPercentageHeader String Chart percentage column header text. Default is ‘Percentage’.
ChartValueHeader String Chart value column header text. Default is ‘Value’.
Section() Constructor There are three overloaded constructors available.
Report
Property Type Description
ReportTitle String Report title text.
ReportSource DataSet Report source is a DataSet. The DataSet must contain at least one DataTable with data.
Sections ArrayList Collection of report sections. Each element is of type Section.
ReportFields ArrayList Collection of report fields. Each element is of type Field.
ReportFont String Report font as string.
TotalFields ArrayList Collection of column names to be listed in Total row. Each element is of type string.
IncludeTotal bool Display/hide Total row.
IncludeChart bool Display/hide chart.
ChartTitle String Chart title text.
ChartShowAtBottom bool true - show chart at bottom (after data rows); false – show chart at top. Default is false.
ChartChangeOnField String Chart Y-axis field, usually text field.
ChartValueField String Chart X-axis field, must be a numeric field. Default is record count.
ChartShowBorder bool Enable/disable chart border.
ChartLabelHeader String Chart label column header text. Default is ‘Label’.
ChartPercentageHeader String Chart percentage column header text. Default is ‘Percentage’.
ChartValueHeader String Chart value column header text. Default is ‘Value’.
GenerateReport() Method Generates the HTML report and returns it as a StringBuilder object.
SaveReport(string fileName) Method Generates the HTML report and saves it to disk with the given file name.

Formatting the report

Including totals

This report engine supports multiple SUM fields for a report. And the SUM can be displayed on demand in any of the sections added to the report. The SUM field must be of type numeric. The following code explains how to add SUM fields:

//Add Total fields
report.TotalFields.Add("Project");
report.TotalFields.Add("ProgressedHours");

//Set IncludeTotal property of the sections to true
project.IncludeTotal = true;
release.IncludeTotal = true;

Total Fields Sample

Adding charts

This engine can produce bar charts. The developer has to provide only the ChangeOnField and ValueField as input. If the developer has not given any ValueField, the record count will be taken as the Value. Changing the ChartShowAtBottom property would let your charts come either at the top or the bottom of the section.

//Set Chart properties
release.ChartChangeOnField = "Severity";
release.ChartValueField = "ProgressedHours";

release.ChartTitle = "Severity-Wise report";
release.ChartLabelHeader = "Severity Type";
release.ChartValueHeader = "Hours";
release.ChartPercentageHeader = "Progress";

Aligning fields

Field texts can be aligned to Left, Right, or Center. By default, the text alignment is set to Left.

//Set field Alignment
Field field1 = new Field();
field1.Alignment = ALIGN.RIGHT;

Specifying colors

The developers are allowed to change the background colors of section headers, column headers, and column data. Section headers can have gradient backgrounds by setting the GradientBackground property to true.

//Specifying Colors
//Main Section header color
release.BackColor = Color.WhiteSmoke;
release.GradientBackground = true;

//Sub Section header color
project.BackColor = Color.GhostWhite;
project.GradientBackground = true;

//Field Colors
field1.HeaderBackColor = Color.LightSlateGray;
field1.BackColor = Color.Gainsboro;
field2.HeaderBackColor = Color.LightSlateGray;
field2.BackColor = Color.White;
field3.HeaderBackColor = Color.LightSlateGray;
field3.BackColor = Color.Gainsboro;

Points of interest

It is recommended that you specify the column width for all report fields except one. That one may be a variable text field. The field without column width will automatically fit into the remaining space available in the table.

There is a simple way to export data to MS Excel. You can open the generated HTML file in Internet Explorer, right click on the report, and select 'Export to Excel'. Done!

History

  • Version 2.0 - Added features for formatting and to allow multiple Total columns in the report.
  • Version 1.0 - Initial version.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Ambalavanar Thirugnanam
Architect BNY Mellon
India India
Ambalavanar, working as a .NET Solutions Architect at BNY Mellon (iNautix), Chennai. Enjoys designing and developing UI & highly scalable apps.

You may also be interested in...

Comments and Discussions

 
QuestionGood Work Pin
Richard at BDG29-May-15 0:59
memberRichard at BDG29-May-15 0:59 
QuestionBrilliant ! Pin
starface22-Sep-14 23:56
memberstarface22-Sep-14 23:56 
Questionvb code doestnt work Pin
Madura Saddhathilaka17-Aug-14 23:59
memberMadura Saddhathilaka17-Aug-14 23:59 
GeneralThanks Pin
mparvez11-Mar-14 0:33
membermparvez11-Mar-14 0:33 
QuestionHtml Version=2.0.0.0 error Pin
manoj s sherje4-Mar-14 6:38
membermanoj s sherje4-Mar-14 6:38 
Questionhow to add new line break? Pin
Member 104686546-Feb-14 16:46
memberMember 104686546-Feb-14 16:46 
QuestionGreat work Pin
zoom662822-Jan-14 1:31
memberzoom662822-Jan-14 1:31 
QuestionN-Tier Pin
Ahmad Abd-Elghany30-Nov-13 11:26
memberAhmad Abd-Elghany30-Nov-13 11:26 
GeneralGreat Pin
sahanmaduranga7-Aug-13 20:24
membersahanmaduranga7-Aug-13 20:24 
GeneralMy vote of 5 Pin
viji@sampathraj25-Jun-13 22:52
memberviji@sampathraj25-Jun-13 22:52 
QuestionBrilliant utility Pin
zoom66282-Jun-13 16:50
memberzoom66282-Jun-13 16:50 
GeneralMy vote of 5 Pin
zoom66282-Jun-13 16:49
memberzoom66282-Jun-13 16:49 
GeneralMy vote of 5 Pin
Prasad Khandekar17-Mar-13 21:57
memberPrasad Khandekar17-Mar-13 21:57 
Questionhow to import htmlreportengine.dll Pin
aarif moh shaikh31-Aug-12 20:40
memberaarif moh shaikh31-Aug-12 20:40 
GeneralMy vote of 5 Pin
manoj kumar choubey21-Aug-12 18:57
membermanoj kumar choubey21-Aug-12 18:57 
GeneralMy vote of 5 Pin
hadi55267-Jul-12 20:49
memberhadi55267-Jul-12 20:49 
Generalcustom header? Pin
ifEndIF4-Jul-12 14:14
memberifEndIF4-Jul-12 14:14 
GeneralMy vote of 4 Pin
Prosan27-Jun-12 1:59
memberProsan27-Jun-12 1:59 
QuestionGood but can be better Pin
Member 902839525-May-12 1:22
memberMember 902839525-May-12 1:22 
Questionconvert generated html to pdf Pin
rcmurthy200422-May-12 23:50
memberrcmurthy200422-May-12 23:50 
Questionnot support arabic !!! Pin
Member 80491549-Mar-12 7:03
memberMember 80491549-Mar-12 7:03 
AnswerRe: not support arabic !!! Pin
hadi55261-Jul-12 23:37
memberhadi55261-Jul-12 23:37 
method SaveReport() not support arbic. for solve this problem

get html code by GenerateReport() and show in div.
GeneralMy vote of 5 Pin
tamayim15-Feb-12 2:34
membertamayim15-Feb-12 2:34 
QuestionCan this report engine be automated some how? Pin
msterling13-Feb-12 11:52
membermsterling13-Feb-12 11:52 
AnswerRe: Can this report engine be automated some how? Pin
tamayim14-Feb-12 22:41
membertamayim14-Feb-12 22:41 
GeneralRe: Can this report engine be automated some how? Pin
msterling15-Feb-12 7:24
membermsterling15-Feb-12 7:24 
GeneralMy vote of 5 Pin
Laxmikant_Yadav20-Dec-11 20:17
memberLaxmikant_Yadav20-Dec-11 20:17 
GeneralMy vote of 5 Pin
gopalrajput24-Aug-11 2:38
groupgopalrajput24-Aug-11 2:38 
GeneralGroup wise Details Pin
ashu21885-May-11 9:52
memberashu21885-May-11 9:52 
QuestionPrinting Pin
s_e_jean27-Dec-10 2:45
members_e_jean27-Dec-10 2:45 
AnswerRe: Printing Pin
ashu21885-May-11 7:19
memberashu21885-May-11 7:19 
Generalheader on each page Pin
ArielR19-Feb-10 11:06
memberArielR19-Feb-10 11:06 
GeneralFantastic article! Question about having multiple subsections within a section Pin
Patel Hardik14-Mar-09 14:47
memberPatel Hardik14-Mar-09 14:47 
GeneralRe: Fantastic article! Question about having multiple subsections within a section Pin
Ambalavanar Thirugnanam14-Mar-09 19:57
memberAmbalavanar Thirugnanam14-Mar-09 19:57 
GeneralAwsome Article Pin
rmarkram24-Oct-08 1:13
memberrmarkram24-Oct-08 1:13 
GeneralChart on report section Pin
Watever4422-Aug-08 11:46
memberWatever4422-Aug-08 11:46 
GeneralRe: Chart on report section Pin
Watever4422-Aug-08 11:56
memberWatever4422-Aug-08 11:56 
GeneralRe: Chart on report section Pin
Ambalavanar Thirugnanam22-Aug-08 21:12
memberAmbalavanar Thirugnanam22-Aug-08 21:12 
QuestionMulti-page reports? Pin
mlyons1-Jul-08 19:30
membermlyons1-Jul-08 19:30 
AnswerHtml report Pin
Member 285513523-May-08 18:10
memberMember 285513523-May-08 18:10 
GeneralVery Innovative! Pin
Illogic1-Oct-07 18:16
memberIllogic1-Oct-07 18:16 
GeneralATGrid Report Control Pin
etcell30-Jul-07 18:42
memberetcell30-Jul-07 18:42 
GeneralOrder of sections Pin
JACK0245926-Jun-07 5:18
memberJACK0245926-Jun-07 5:18 
QuestionNice work...but I have 1 question Pin
bcpdrp25-Jun-07 13:22
memberbcpdrp25-Jun-07 13:22 
AnswerRe: Nice work...but I have 1 question [modified] Pin
Member 222654227-Sep-08 4:31
memberMember 222654227-Sep-08 4:31 
AnswerRe: Nice work...but I have 1 question Pin
gg423713-Nov-09 0:16
membergg423713-Nov-09 0:16 
GeneralHTML & Unicode Pin
cesarsouza19-Jan-07 15:25
membercesarsouza19-Jan-07 15:25 
GeneralNice innovation Pin
GanesanSenthilvel29-Nov-06 22:44
memberGanesanSenthilvel29-Nov-06 22:44 
GeneralReport Definition Pin
graham.lock6-Sep-06 22:44
membergraham.lock6-Sep-06 22:44 
GeneralHtml Report Pin
Terryjsz14-Jul-06 4:37
memberTerryjsz14-Jul-06 4:37 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.150731.1 | Last Updated 23 Jun 2006
Article Copyright 2006 by Ambalavanar Thirugnanam
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid