Showing posts with label GridView. Show all posts
Showing posts with label GridView. Show all posts

August 30, 2012

Export GridView to Excel

It is quite easy to bind data from database, collection classes or to xml. Sometimes, it is also needed to export the data in a different files types, for example, excel. Both GridView and Excel can display similar data structures (tabular data) and it is helpful at times to export data from GridView to excel. In this example, I will show how to do that.

At first, the GridView needs to be declared. A button is also needed that when clicked will export the GridView to excel.

Initialize GridView
  1. <asp:GridView ID="Grid1" runat="server" UseAccessibleHeader="true">
  2.     </asp:GridView>
  3.  
  4.     <asp:Button ID="B1" runat="server" Text="Export to Excel" OnClick="Export" />

As can be seen, The GridView does not have data bound to it. I will bind data to it from an ArrayList as shown in an previous article. An arraylist is created that contains a number of Person objects.

Load Data
  1. protected void Page_Load(object sender, EventArgs e)
  2. {
  3.     Grid1.DataSource = PersonList();
  4.     Grid1.DataBind();
  5. }
  6.  
  7. private ArrayList PersonList()
  8. {
  9.     ArrayList list = new ArrayList();
  10.     list.Add(new Person("Smith", new DateTime(1980, 1, 1), "Developer", 85000));
  11.     list.Add(new Person("John", new DateTime(1983, 5, 1), "Accountant", 70000));
  12.     list.Add(new Person("Alice", new DateTime(1984, 6, 1), "Consultant", 80000));
  13.     list.Add(new Person("Jane", new DateTime(1985, 3, 1), "Business", 100000));
  14.     return list;
  15. }

The Person class is below.

Person class
  1. public class Person
  2. {
  3.     public string Name { get; set; }
  4.     public DateTime DateOfBirth { get; set; }
  5.     public string Profession { get; set; }
  6.     public double Salary { get; set; }
  7.  
  8.     public Person()
  9.     { }
  10.  
  11.     public Person(string name, DateTime dob, string profession, double salary)
  12.     {
  13.         this.Name = name;
  14.         this.DateOfBirth = dob;
  15.         this.Profession = profession;
  16.         this.Salary = salary;        
  17.     }
  18. }

Once the page is loaded, the GridView contains a tabular data of all the Person objects. When the button is clicked, it will export the data in the GridView to excel.

Export to Excel
  1. protected void Export(object o, EventArgs e)
  2. {
  3.     Response.AddHeader("content-disposition", "attachment;filename=FileName.xls");
  4.     Response.Charset = "UTF-8";
  5.     Response.ContentType = "application/vnd.xls";
  6.     Response.ContentEncoding = System.Text.Encoding.UTF8;
  7.     System.IO.StringWriter sw = new System.IO.StringWriter();
  8.     System.Web.UI.HtmlTextWriter hw = new System.Web.UI.HtmlTextWriter(sw);
  9.     Grid1.RenderControl(hw);
  10.     Response.Write(sw.ToString());
  11.     Response.End();
  12. }

The AddHeader method of Response object sets the filename of the excel. The charset is set to “UTF-8” and content type is set to excel.

When the button is clicked, an error message “Control 'Grid1' of type 'GridView' must be placed inside a form tag with runat=server. ” is shown. To avoid this error, the VerifyRenderingInServerForm() method needs to be overridden as follows.

Render Control
  1. public override void VerifyRenderingInServerForm(Control control)
  2. {
  3.     // Render control at run time.
  4. }

August 22, 2012

Usually GridView is designed to use object, sql server data, xml data to be used as a data source. GridView can also be used to dynamically bind to collection classes like ArrayList. In this example, I will do a demo of how to bind a GridView to an ArrayList.

in the aspx page, the GridView needs to be declared as follows.

Code Snippet
  1. <div>
  2. <asp:GridView ID="Grid1" runat="server">    
  3. </asp:GridView>
  4. </div>

In the code behind for the page, an ArrayList is initialised, a bunch of Person objects have been added to the ArrayList and then the GridView is binded to the ArrayList from the Page_Load event. The code for this is below.

Code Snippet - Code Behind
  1. protected void Page_Load(object sender, EventArgs e)
  2. {
  3.     Grid1.DataSource = PersonList();
  4.     Grid1.DataBind();
  5. }
  6.  
  7. private ArrayList PersonList()
  8. {
  9.     ArrayList list = new ArrayList();
  10.     list.Add(new Person("Smith", new DateTime(1980, 1, 1), "Developer", 85000));
  11.     list.Add(new Person("John", new DateTime(1983, 5, 1), "Accountant", 70000));
  12.     list.Add(new Person("Alice", new DateTime(1984, 6, 1), "Consultant", 80000));
  13.     list.Add(new Person("Jane", new DateTime(1985, 3, 1), "Business", 100000));
  14.     return list;
  15. }

So, basically, the code is pretty straight forward.  Once the ArrayList is setup, the DataSource property of the GridView is set to the ArrayList. Then, the data is bound by using the DataBind method.

The Person object used in this sample is pretty simple as well. It contains string properties for Name, Profession, DateTime property for date of birth and double property for salary. The code for the class is below.

Code Snippet
  1. public class Person
  2. {
  3.     public string Name { get; set; }
  4.     public DateTime DateOfBirth { get; set; }
  5.     public string Profession { get; set; }
  6.     public double Salary { get; set; }
  7.  
  8.     public Person()
  9.     { }
  10.  
  11.     public Person(string name, DateTime dob, string profession, double salary)
  12.     {
  13.         this.Name = name;
  14.         this.DateOfBirth = dob;
  15.         this.Profession = profession;
  16.         this.Salary = salary;        
  17.     }
  18. }

Once the page is run, the page is shown with the GridView containing the data from the ArrayList as shown below.

Capture

Reference: Shahed Kazi at AspNetify.com