In this article I will be explaining binding of array or list to asp.net GridView control. As we all know that GridView Control is a databound control, still some times its need to bind collections, hence the following article explains the same.
Binding One Dimensional Array
Binding a One Dimensional array is pretty straight forward you just need to set the AutoGenerateColumns property to true
GridView
<asp:GridView ID="Grid1D" runat="server"
AutoGenerateColumns = "true" Font-Names = "Arial"
Font-Size = "11pt" AlternatingRowStyle-BackColor = "#C2D69B"
HeaderStyle-BackColor = "green" AllowPaging ="true"
PageSize = "10" Caption = "1-Dimensional Array">
</asp:GridView>
C#
//1-Dimensional Array
string[] arr1D = { "John", "Smith", "Ryder", "Jake", "Tom" };
Grid1D.DataSource = arr1D;
Grid1D.DataBind();
VB.Net
'1-Dimensional Array
Dim arr1D As String() = {"John", "Smith", "Ryder", "Jake", "Tom"}
Grid1D.DataSource = arr1D
Grid1D.DataBind()
As you can notice above I am binding a one dimensional string array to the GridView. The figure below displays a GridView populated using one 1-dimensional array
Binding Two Dimensional Arrays
When you try to bind a more than one dimensional array to GridView it simply throws the following error.
Array was not a one-dimensional array.
Hence in order to bind 2 Dimensional arrays to GridView we have to make use of ListItem and ArrayList.
GridView
<asp:GridView ID="Grid2D" runat="server"
AutoGenerateColumns = "false" Font-Names = "Arial"
Font-Size = "11pt" AlternatingRowStyle-BackColor = "#C2D69B"
HeaderStyle-BackColor = "green" AllowPaging ="true"
PageSize = "10" Caption = "2-Dimensional Array">
<Columns>
<asp:BoundField ItemStyle-Width = "150px"
DataField = "Text" HeaderText = "Name" />
<asp:BoundField ItemStyle-Width = "150px"
DataField = "Value" HeaderText = "Age" />
</Columns>
</asp:GridView>
Since a ListItem has two properties Text and Value I have assigned the same as DataFields to GridView BoundFields.
C#
//2-Dimensional Array
string[,] arr2D = {
{ "John", "21" },
{ "Smith", "33" },
{ "Ryder", "15" },
{ "Jake", "18"},
{ "Tom","34" }
};
ArrayList arrList = new ArrayList();
for(int i=0;i<5;i++)
{
arrList.Add(new ListItem(arr2D[i, 0], arr2D[i, 1]));
}
Grid2D.DataSource = arrList;
Grid2D.DataBind();
VB.Net
'2-Dimensional Array
Dim arr2D As String(,) = { _
{"John", "21"}, _
{"Smith", "33"}, _
{"Ryder", "15"}, _
{"Jake", "18"}, _
{"Tom", "34"} _
}
Dim arrList As New ArrayList()
For i As Integer = 0 To 4
arrList.Add(New ListItem(arr2D(i, 0), arr2D(i, 1)))
Next
Grid2D.DataSource = arrList
Grid2D.DataBind()
As you will notice above I am looping through the array and adding a ListItem to ArrayList and finally binding the ArrayList to the GridView. The figure below displays a GridView populated with 2 dimensional arrays
Binding Multi Dimensional Array
You cannot bind multi dimensional array directly to GridView its more than 2 dimensional, the only way is using a datatable.
GridView
<asp:GridView ID="GridMultiD" runat="server"
AutoGenerateColumns = "false" Font-Names = "Arial"
Font-Size = "11pt" AlternatingRowStyle-BackColor = "#C2D69B"
HeaderStyle-BackColor = "green" AllowPaging ="true"
PageSize = "10" Caption = "Multi-Dimensional Array" >
<Columns>
<asp:BoundField ItemStyle-Width = "150px"
DataField = "Name" HeaderText = "Name" />
<asp:BoundField ItemStyle-Width = "150px"
DataField = "Age" HeaderText = "Age" />
<asp:BoundField ItemStyle-Width = "150px"
DataField = "City" HeaderText = "City" />
<asp:BoundField ItemStyle-Width = "150px"
DataField = "Country" HeaderText = "Country" />
</Columns>
</asp:GridView>
As you can see above I have defined the BoundFields for my GridView columns.
C#
//Multi-Dimensional Array
string[,] arrMultiD = {
{ "John", "21", "Berlin", "Germany" },
{ "Smith", "33" ,"London", "UK"},
{ "Ryder", "15" ,"Sydney", "Australia"},
{ "Jake", "18", "Tokyo", "Japan"},
{ "Tom","34" , "Mumbai", "India"}
};
DataTable dt = new DataTable();
dt.Columns.Add("Name", Type.GetType("System.String"));
dt.Columns.Add("Age", Type.GetType("System.String"));
dt.Columns.Add("City", Type.GetType("System.String"));
dt.Columns.Add("Country", Type.GetType("System.String"));
for (int i = 0; i < 5; i++)
{
dt.Rows.Add();
dt.Rows[dt.Rows.Count - 1]["Name"] = arrMultiD[i, 0];
dt.Rows[dt.Rows.Count - 1]["Age"] = arrMultiD[i, 1];
dt.Rows[dt.Rows.Count - 1]["City"] = arrMultiD[i, 2];
dt.Rows[dt.Rows.Count - 1]["Country"] = arrMultiD[i, 3];
}
GridMultiD.DataSource = dt;
GridMultiD.DataBind();
VB.Net
'Multi-Dimensional Array
Dim arrMultiD As String(,) = {{"John", "21", "Berlin", "Germany"}, _
{"Smith", "33", "London", "UK"}, _
{"Ryder", "15", "Sydney", "Australia"}, _
{"Jake", "18", "Tokyo", "Japan"}, _
{"Tom", "34", "Mumbai", "India"} _
}
Dim dt As New DataTable()
dt.Columns.Add("Name", Type.GetType("System.String"))
dt.Columns.Add("Age", Type.GetType("System.String"))
dt.Columns.Add("City", Type.GetType("System.String"))
dt.Columns.Add("Country", Type.GetType("System.String"))
For i As Integer = 0 To 4
dt.Rows.Add()
dt.Rows(dt.Rows.Count - 1)("Name") = arrMultiD(i, 0)
dt.Rows(dt.Rows.Count - 1)("Age") = arrMultiD(i, 1)
dt.Rows(dt.Rows.Count - 1)("City") = arrMultiD(i, 2)
dt.Rows(dt.Rows.Count - 1)("Country") = arrMultiD(i, 3)
Next
GridMultiD.DataSource = dt
GridMultiD.DataBind()
As you will notice for multi dimensional array I am creating a datatable with the same number of columns as in the array and then looping through the array and adding the data to the datatable and finally binding the datatable to the GridView. The figure below displays a GridView populated using a multi dimensional array
This completes the article. You can download the sample source in VB.Net and C# using the link below
BindArrayToGrid.zip (4.01 kb)