In this article, I will discuss how to create an ArrayList of objects and bind it to a DataGrid control using DataSource property.
Step 1. Creating a Class
First step is to create a class. I call my class Developer, which is listed in Listing 1. It's properties are FirstName, LastName, Age, Skills, and Experience.
public class Developer
{
private string firstName;
private string lastName;
private int age;
private string skills;
private int experience;
public Developer(string firstName, string lastName, int age, string skills, int experience )
{
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.skills = skills;
this.experience = experience;
}
/// <summary>
/// First Name
/// </summary>
public string FirstName
{
get { return this.firstName ; }
}
/// <summary>
/// Last Name
/// </summary>
public string LastName
{
get { return this.lastName ; }
}
/// <summary>
/// Age
/// </summary>
public int Age
{
get { return this.age ; }
}
/// <summary>
/// Skill set
/// </summary>
public string Skills
{
get { return this.skills ; }
}
/// <summary>
/// Number of year experience
/// </summary>
public int Experience
{
get { return this.experience ; }
}
}
Listing 1. Developer class
Step 2. Creating an ArrayList of Objects
Now next step is to create an ArrayList object of Developer class. Listing 2 adds 6 items to the ArrayList.
private ArrayList GetList()
{
ArrayList list = new ArrayList();
list.Add(new Developer("Mahesh", "Chand", 30, "C#,ASP.NET,Windows Forms", 10)) ;
list.Add(new Developer("Michael", "Gold", 35, "GDI+, ASP.NET", 15)) ;
list.Add(new Developer("Bhasker", "Das", 26, "VB.NET, Web Applications", 4)) ;
list.Add(new Developer("Ashish", "Singhal", 24, "ADO.NET, GDI+", 4)) ;
list.Add(new Developer("Neel", "Beniwal", 3, "C#,ASP.NET,Windows Forms", 0)) ;
list.Add(new Developer("Melanie", "Talmadge", 25, "Java", 2)) ;
return list;
}
Listing 2. ArrayList of Developer
Step 3. Binding with DataGrid
Now we can bind our ArrayList using DataGrid.DataSource property and DataGrid would understand what to display in its columns. The following code binds the ArrayList to DataGrid.
ArrayList list = GetList();
dataGrid1.DataSource = list;
Step 4. The Result
Now if I run my application, the output in DataGrid looks like Figure 1.
Figure 1. Developers in a DataGrid
Step 5. Formatting DataGrid Columns
As you can see from Figure 1, the column names of the DataGrid are same as property names of the Developer class. Now many developers asked me questions, how to change the column header and the size of headers.
To do this, we need to take helo of DataGridTableStyle and DataGridColumnStyles. A DataGridTableStyle object represents the style of the entire DataGrid. In Listing 3, I create a new DataGridTableStyle and later I create ColumnStyles and add ColumnStyles to the TableStyles. In the end of the code, I remove the current TableStyle of the DataGrid and add new style.
// Create a Custom TableStyle
DataGridTableStyle tableStyle = new DataGridTableStyle();
tableStyle.MappingName = "ArrayList";
tableStyle.HeaderFont = new Font("Verdana", 9, FontStyle.Bold);
tableStyle.HeaderForeColor = Color.OrangeRed;
int colwidth = (dataGrid1.ClientSize.Width - tableStyle.RowHeaderWidth
- SystemInformation.VerticalScrollBarWidth) / 6;
// Create a DataGridColumn, set its header text and other properties
DataGridTextBoxColumn cs = new DataGridTextBoxColumn();
cs.MappingName = "FirstName";
cs.HeaderText = "First Name";
cs.Width = colwidth;
// Add Column to GridColumnStyles
tableStyle.GridColumnStyles.Add(cs);
// Create a DataGridColumn, set its header text and other properties
cs = new DataGridTextBoxColumn();
cs.MappingName = "LastName";
cs.HeaderText = "Last Name";
cs.Width = colwidth;
// Add Column to GridColumnStyles
tableStyle.GridColumnStyles.Add(cs);
// Create a DataGridColumn, set its header text and other properties
cs = new DataGridTextBoxColumn();
cs.MappingName = "Age";
cs.HeaderText = "Age";
cs.Width = colwidth;
// Add Column to GridColumnStyles
tableStyle.GridColumnStyles.Add(cs);
// Create a DataGridColumn, set its header text and other properties
cs = new DataGridTextBoxColumn();
cs.MappingName = "Experience";
cs.HeaderText = "Exp (Years)";
cs.Width = colwidth;
// Add Column to GridColumnStyles
tableStyle.GridColumnStyles.Add(cs);
// Create a DataGridColumn, set its header text and other properties
cs = new DataGridTextBoxColumn();
cs.MappingName = "Skills";
cs.HeaderText = "Skills";
cs.Width = colwidth + colwidth;
// Add Column to GridColumnStyles
tableStyle.GridColumnStyles.Add(cs);
// Get rid of current table style
dataGrid1.TableStyles.Clear();
// Add new table style to the Grid
dataGrid1.TableStyles.Add(tableStyle);
Listing 3. Formatting a DataGrid
As you can see from Listing 3, I create a DataGridTextBoxColumn, set its MappingName to name of the property of Developer class, Header Text to the text I want to display on the header, and Width to the width of the column. After that I add DataGridTextBoxColumn to TableStyle.
Now new formatted DataGrid looks like Figure 2.
Figure 2. Formatted Developers in a DataGrid
Summary
In this step by step tutorial, I discussed how to create an ArrayList of objects and bind it to a DataGrid control. After that I also discussed how to format the DataGrid columns to suite the style of the data. Download the attached source code and run it. You will find some other good stuff in the source code ;-).
Reden RodriguezPosted Sep 11, 2018, 3:51 AM
How can i delete it?
smitdsoPosted Feb 9, 2007, 1:03 PM
How to Format DataGrid Columns in ASP.NET when using arraylist as mentioned in your article as DataGridTableStyle is not available in ASP.NET
prasanth kPosted Jan 22, 2007, 9:19 PM
do u know the coding for how to retrieve values from a access database.for egif i want to retrieve values like first name,lastname in an order in a datagrid.
NajiPosted Nov 25, 2006, 1:05 AM
Hi Please this is urgent. I looked at your article it looks great. How about if I wanted to add an edit button column to the datagrid. once the datagrid is bound to the array list it seems impossible to add any columns to it neither thru the designer nor thru the code. Any helpful hints? thanks
matt coopereditedPosted Feb 27, 2006, 7:18 PMEdited Oct 5, 2006, 1:48 PM
Why you want to divide data from DB? Isn't be better tj hide bouded column with PersonID?
Rakesh KVeditedPosted Jan 3, 2006, 4:48 AMEdited Jan 4, 2007, 11:35 AM
selectefdafnged event of combobox inside a datagrid
Mahesh ChandPosted Dec 6, 2005, 4:16 PM
You have to add a boolean column to the object to see it in the Grid. I have added the column and data and updated the source code. Download latest code and give it a try.
New ToCSPosted Dec 5, 2005, 6:02 PM
I downloaded the source code provided with this article about binding an array list with datagrid control and tried to have a checkbox as the first column. So, I added an item to the class and modified all the methods accordingly and added the following code in LoadArrayList_BtnClick. DataGridBoolColumn bs = new DataGridBoolColumn(); bs.HeaderText = "Select Chk"; bs.Width = colwidth; tableStyle.GridColumnStyles.Add(bs); And the above I added before the other text box columns are created and added to the table style. Now what I don't understand is that why the datagrid1 (the one on top) did not show this column and why the datagrid2(the one displayed at the bottom) showed this but not as the first column but as the 4th column after Age. I have been trying to have a checkbox column as the first one in my grid where the other 2 are from a database table, and have been unable to do so. So I tried doing this in the sample program to gain an understanding of how it works and again did not progress there. Please let me know as I have had 3 unsuccessful days in implementing this in my project. Thanks a bunch!