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 1 Dimensional Array to GridView



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 2 Dimensional Arry to GridView



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



Binding Multi Dimensional Array to GridView



This completes the article. You can download the sample source in VB.Net and C# using the link below

BindArrayToGrid.zip (4.01 kb)