Generally, exporting GridView data to Excel is a widely used concept in Asp.Net web application development. So this tutorial glow some light on it by combining various real-time situations listed below.

For this purpose, we place a GridView control in the Aspx Page and display some Customer information with their favorite images in a column. The GridView control will have columns such as Customer Name [Cus_Name], Customer Age [Cus_Age], Customer Email [Cus_Email], Some Random Decimals numbers [SomeDecimals], Date [Today] and Favorite Image [ImgUrl]. Specify the GridView control’s AllowPaging as true, AutoGenerateColumns as false and the DataKeyNames as “Cus_Code”. Then place three buttons, below the GridView control; change the Text of the first button as “Export All Rows”, second button as “Export Selected Rows” and third button as “Export Current Page”.

The GridView’s first column will be TemplateField column, which contains a Checkbox in the ItemTemplate section. Change the Id of the Checkbox as “chkSelect”. This is to select any GridView row and to import to the Excel Sheet. From second to fifth column will be a normal BoundField column to display Customer Name, Age, Email, decimals and date. The last column will be another TemplateField column with an Image control placed in it and the ImageUrl property will be bind to display the Customer’s favorite Image.

Drag and drop a ScriptManager and an UpdatePanel into the Aspx page and move the GridView and the three buttons inside it. For exporting data into excel sheet, we need an explicit post back. Since we need to achieve this together with AJAX, we have to add PostBackTrigger into the UpdatePanel’s Triggers tag. So add three PostBackTrigger and specify the ControlID to Button1, Button2 and Button3 respectively.The complete Html source of the GridView control inside UpdatePanel will look like below.

<asp:UpdatePanel id="UpdatePanel1" runat="server">
<contenttemplate>
<TABLE width="100%"><TR><TD>
<asp:GridView id="GridView1" runat="server" Width="100%"
OnPageIndexChanging="GridView1_PageIndexChanging"
PageSize="10" AllowPaging="True" AutoGenerateColumns="False"
OnRowDataBound="GridView1_RowDataBound"
DataKeyNames="Cus_Code">
<Columns>
<asp:TemplateField HeaderText="Select">
<ItemTemplate>
<asp:CheckBox id="chkSelect" runat="server"></asp:CheckBox>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Cus_Name" HeaderText="Name"></asp:BoundField>
<asp:BoundField DataField="Cus_Age" HeaderText="Age"></asp:BoundField>
<asp:BoundField DataField="Cus_Email" HeaderText="Email"></asp:BoundField>
<asp:BoundField DataField="SomeDecimals" HeaderText="Decimals"></asp:BoundField> <asp:BoundField DataField="Today" HeaderText="Date"></asp:BoundField>
<asp:TemplateField HeaderText="Favorites">
<ItemTemplate>
<asp:Image id="Image1" runat="server" ImageUrl='<%# Bind("ImgUrl") %>' ></asp:Image>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</TD></TR>
<TR><TD>
<TABLE width="100%"><TR> <TD width="25%">
<asp:Button id="Button1" onclick="Button1_Click" runat="server" Text="Export All Rows"></asp:Button></TD>
<TD width="25%">
<asp:Button id="Button2" onclick="Button2_Click" runat="server" Text="Export Selected Rows"></asp:Button>
</TD>
<TD width="25%">
<asp:Button id="Button3" onclick="Button3_Click" runat="server" Text="Export Current Page"></asp:Button>
</TD></TR>
</TABLE>
</TD></TR>
</TABLE>
</contenttemplate>
<triggers>
<asp:PostBackTrigger ControlID="Button1"></asp:PostBackTrigger>
<asp:PostBackTrigger ControlID="Button2"></asp:PostBackTrigger>
<asp:PostBackTrigger ControlID="Button3"></asp:PostBackTrigger>
</triggers>
</asp:UpdatePanel>

private void BindGrid()
{
string sql = "Select Cus_Code, Cus_Name, Cus_Age, Cus_Email, SomeDecimals, ImgUrl, Today 
from Customer Order By Cus_Name"; 
SqlDataAdapter da = new SqlDataAdapter(sql, “YourConnectionString”); 
DataTable dt = new DataTable(); 
da.Fill(dt); 
GridView1.DataSource = dt; 
GridView1.DataBind();
}

Write a private method BindGrid to retrieve data from the Customer table, and bind it with the GridView control. This is a common method that can be used throughout the page to bind the GridView control. Call this method in the Page Load event as follows.