Introduction
I would like to share a way by which we can export datatable to HTML format.
This code can be used as reporting purpose where sometimes client needs output
data in HTML format.
Steps: first we will bind Datatable to datagridview
a. Binding DatagridView using Datatable
Steps:
1. Create datatable and Define Columns
DataTable table = new DataTable();
table.Columns.Add("ID", typeof(int));
table.Columns.Add("NAME", typeof(string));
table.Columns.Add("CITY", typeof(string));
DataTable table = new DataTable();
table.Columns.Add("ID", typeof(int));
table.Columns.Add("NAME", typeof(string));
table.Columns.Add("CITY", typeof(string));
2. Add Rows
table.Rows.Add(111, "Devesh", "Ghaziabad");
table.Rows.Add(222, "ROLI", "KANPUR");
table.Rows.Add(102, "ROLI", "MAINPURI");
table.Rows.Add(212, "DEVESH", "KANPUR");
3. Binding Datagridview
dataGridView1.DataSource=table;
4. Running the code following would be screen.
Exporting Datatable to HTML.
I have written generic code which could create html text for every datatable.
You can use this code directly in your project for reporting purpose.
Code below:
protected string ExportDatatableToHtml(DataTable dt)
{
StringBuilder strHTMLBuilder = new StringBuilder();
strHTMLBuilder.Append("<html >");
strHTMLBuilder.Append("<head>");
strHTMLBuilder.Append("</head>");
strHTMLBuilder.Append("<body>");
strHTMLBuilder.Append("<table border='1px' cellpadding='1' cellspacing='1' bgcolor='lightyellow' style='font-family:Garamond; font-size:smaller'>");
strHTMLBuilder.Append("<tr >");
foreach (DataColumn myColumn in dt.Columns)
{
strHTMLBuilder.Append("<td >");
strHTMLBuilder.Append(myColumn.ColumnName);
strHTMLBuilder.Append("</td>");
}
strHTMLBuilder.Append("</tr>");
foreach (DataRow myRow in dt.Rows)
{
strHTMLBuilder.Append("<tr >");
foreach (DataColumn myColumn in dt.Columns)
{
strHTMLBuilder.Append("<td >");
strHTMLBuilder.Append(myRow[myColumn.ColumnName].ToString());
strHTMLBuilder.Append("</td>");
}
strHTMLBuilder.Append("</tr>");
}
//Close tags.
strHTMLBuilder.Append("</table>");
strHTMLBuilder.Append("</body>");
strHTMLBuilder.Append("</html>");
string Htmltext = strHTMLBuilder.ToString();
return Htmltext;
}
- Understanding the code.
i) We created generic function which take datatable as parameter
ii) We are using stringbuilder to create dynamic html text.
iii) Here Output would contains equal number of rows and column as we have
in datagridview.
iv) Creating columns in HTML
foreach (DataColumn myColumn in dt.Columns)
{
strHTMLBuilder.Append("<td >");
strHTMLBuilder.Append(myColumn.ColumnName);
strHTMLBuilder.Append("</td>");
}
v) Copy Data. Following code would create equal number of rows as we have in
datatable and copy it data to html rows.
foreach (DataRow myRow in dt.Rows)
{
strHTMLBuilder.Append("<tr >");
foreach (DataColumn myColumn in dt.Columns)
{
strHTMLBuilder.Append("<td >");
strHTMLBuilder.Append(myRow[myColumn.ColumnName].ToString());
strHTMLBuilder.Append("</td>");
}
strHTMLBuilder.Append("</tr>");
}
d. After executing above code we would get following html
<html ><head></head><body><table border='1px' cellpadding='1' cellspacing='1' bgcolor='lightyellow' style='font-family:Garamond; font-size:smaller'><tr ><td >ID</td><td >NAME</td><td >CITY</td></tr><tr ><td >111</td><td >Devesh</td><td>Ghaziabad</td></tr><tr ><td >222</td><td >ROLI</td><td >KANPUR</td></tr><tr ><td >102</td><td >ROLI</td><td >MAINPURI</td></tr><tr ><td >212</td><td >DEVESH</td><td >KANPUR</td></tr></table></body></html>
e. Creating HTML file
string HtmlBody = ExportDatatableToHtml(table)
System.IO.File.WriteAllText(@"c:\abc.HTML", HtmlBody);
f. OutPut:
g. Conclusion
We have learned how to create html of datatable.
