Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Export Gridview Data with Images to Word, Excel in Asp.net using C#, VB.NET

Aug 25, 2015
Introduction

Here I will explain how to export
gridview data with images to excel or word file formats in asp.net using c#, vb.net with example or export gridview with image to word or excel file in asp.net using c#, vb.net with example.

Description:
  
In previous articles I explained create single stored procedure to insert, update, delete and select in sql server, bind gridview with datatable dynamically in asp.net, show images from folder with image path in database in asp.net,
gridview examples in asp.net, Delete multiple rows in gridview using checkbox in asp.net and many articles relating to gridview, asp.net, c#,vb.net and jQuery. Now I will explain how to export gridview data with images to excel or word file formats in asp.net using c#, vb.net with example.

To export gridview data with images to excel or word file in asp.net open your aspx page and write the following code


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<title>Export Gridview with Images in Asp.net</title>
<style type="text/css">
.GridviewDiv {font-size: 100%; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helevetica, sans-serif; color: #303933;}
.headerstyle
{
color:#FFFFFF;border-right-color:#abb079;border-bottom-color:#abb079;background-color: #df5015;padding:0.5em 0.5em 0.5em 0.5em;text-align:center;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="GridviewDiv">
<asp:GridView ID="gvDetails" CssClass="Gridview" runat="server" AutoGenerateColumns="False">
<HeaderStyle CssClass="headerstyle" />
<Columns>
<asp:BoundField HeaderText="User Id" DataField="UserId" />
<asp:BoundField HeaderText="User Name" DataField="UserName" />
<asp:BoundField HeaderText="Education" DataField="Education" />
<asp:ImageField DataImageUrlField="Imagepath" HeaderText="Image" ItemStyle-Height="25px" ItemStyle-Width="25px" />
</Columns>
</asp:GridView>
<br />
<asp:Button ID="btnExport" runat="server" Text="Export Data"
onclick="btnExport_Click" />
</div>
</form>
</body>
</html>

After completion of aspx page add following namespaces in codebehind

C# Code


using System;
using System.Data;
using System.Web.UI;
using System.IO

After completion of adding namespaces you need to write the code like as shown below


protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
gvDetails.DataSource = BindGridviewData();
gvDetails.DataBind();
}
}
public override void VerifyRenderingInServerForm(Control control)
{

}
/// <summary>
/// Dynamically create & bind data to gridview
/// </summary>
protected DataTable BindGridviewData()
{
DataTable dt = new DataTable();
dt.Columns.Add("UserId", typeof(Int32));
dt.Columns.Add("UserName", typeof(string));
dt.Columns.Add("Education", typeof(string));
dt.Columns.Add("Imagepath", typeof(string));
dt.Rows.Add(1, "Suresh Dasari", "B.Tech", "http://localhost:50157/Blog Samples/uploads/Sign1.jpg");
dt.Rows.Add(2, "Rohini Dasari", "Msc", "http://localhost:50157/Blog Samples/uploads/Signature.jpg");
dt.Rows.Add(3, "Madhav Sai", "MS","");
dt.Rows.Add(4, "Praveen", "B.Tech","");
dt.Rows.Add(6, "Sateesh", "MD","");
dt.Rows.Add(7, "Mahesh Dasari", "B.Tech","http://localhost:50157/Blog Samples/uploads/Mahesh_sign.jpg");
dt.Rows.Add(8, "Mahendra", "CA","");
return dt;
}
protected void btnExport_Click(object sender, EventArgs e)
{
Response.ClearContent();
Response.Buffer = true;
Response.AddHeader("content-disposition", string.Format("attachment; filename={0}", "Employees.xls"));
Response.ContentType = "application/ms-excel";
StringWriter sw = new StringWriter();
HtmlTextWriter htw = new HtmlTextWriter(sw);
gvDetails.AllowPaging = false;
gvDetails.DataSource = BindGridviewData();
gvDetails.DataBind();
//Change the Header Row back to white color
gvDetails.HeaderRow.Style.Add("background-color", "#FFFFFF");
//Applying stlye to gridview header cells
for (int i = 0; i < gvDetails.HeaderRow.Cells.Count; i++)
{
gvDetails.HeaderRow.Cells[i].Style.Add("background-color", "#df5015");
}
gvDetails.RenderControl(htw);
Response.Write(sw.ToString());
Response.End();
}

VB.NET Code


Imports System.Data
Imports System.Web.UI
Imports System.IO

Partial Class VBCode
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not IsPostBack Then
gvDetails.DataSource = BindGridviewData()
gvDetails.DataBind()
End If
End Sub
Public Overrides Sub VerifyRenderingInServerForm(ByVal control As Control)

End Sub
''' <summary>
''' Dynamically create & bind data to gridview
''' </summary>
Protected Function BindGridviewData() As DataTable
Dim dt As New DataTable()
dt.Columns.Add("UserId", GetType(Int32))
dt.Columns.Add("UserName", GetType(String))
dt.Columns.Add("Education", GetType(String))
dt.Columns.Add("Imagepath", GetType(String))
dt.Rows.Add(1, "Suresh Dasari", "B.Tech", "http://localhost:50157/Blog Samples/uploads/Sign1.jpg")
dt.Rows.Add(2, "Rohini Dasari", "Msc", "http://localhost:50157/Blog Samples/uploads/Signature.jpg")
dt.Rows.Add(3, "Madhav Sai", "MS", "")
dt.Rows.Add(4, "Praveen", "B.Tech", "")
dt.Rows.Add(6, "Sateesh", "MD", "")
dt.Rows.Add(7, "Mahesh Dasari", "B.Tech", "http://localhost:50157/Blog Samples/uploads/Mahesh_sign.jpg")
dt.Rows.Add(8, "Mahendra", "CA", "")
Return dt
End Function
Protected Sub btnExport_Click(ByVal sender As Object, ByVal e As EventArgs)
Response.ClearContent()
Response.Buffer = True
Response.AddHeader("content-disposition", String.Format("attachment; filename={0}", "Employees.xls"))
Response.ContentType = "application/ms-excel"
Dim sw As New StringWriter()
Dim htw As New HtmlTextWriter(sw)
gvDetails.AllowPaging = False
gvDetails.DataSource = BindGridviewData()
gvDetails.DataBind()
'Change the Header Row back to white color
gvDetails.HeaderRow.Style.Add("background-color", "#FFFFFF")
'Applying stlye to gridview header cells
For i As Integer = 0 To gvDetails.HeaderRow.Cells.Count - 1
gvDetails.HeaderRow.Cells(i).Style.Add("background-color", "#df5015")
Next
gvDetails.RenderControl(htw)
Response.Write(sw.ToString())
Response.[End]()
End Sub
End Class

Demo



Once we export data to excel that would be like as shown below

Export Gridview Data with Images to Word, Excel in Asp.net using C#, VB.NET
If you want to export data to word file please change Response.AddHeader and Response.ContentType like as shown below

Export to Word


Response.AddHeader("content-disposition", string.Format("attachment; filename={0}", "Employees.doc"));
Response.ContentType = "application/ms-word";

once we export data to word that would be like as shown below 

Export Gridview Data with Images to Word, Excel in Asp.net using C#, VB.NET
Download Sample Code Attached


If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

3 comments :

Unknown said...

This is a nice post, please how do i set the height and width of the image in excel

Arpita Srivastava said...

how to set the height and width of image while exporting from gridview to word, i want small image in ms word

Sarthak said...

This does not work

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.