Binding Arrays to GridView in ASP.Net With Code Examples

In ASP.NET web development, displaying data in tabular format is a common requirement. One of the popular controls for this purpose is the GridView. While binding simple data sources like a list or a DataTable to a GridView is straightforward, dealing with arrays can sometimes be tricky. In this guide, we'll explore various methods to bind arrays, including 2D arrays and multi-dimensional arrays, to a GridView in ASP.NET.

Binding Arrays: Let's dive into the code examples to see how we can bind different types of arrays to a GridView.

1. Using DataTable: We start by converting the array into a DataTable and then bind the DataTable to the GridView. This method provides flexibility and ease of use.

   protected void Page_Load(object sender, EventArgs e)
   {
       if (!IsPostBack)
       {
           // Sample array
           string[] dataArray = { "Item 1", "Item 2", "Item 3", "Item 4" };
   
           // Create a DataTable
           DataTable dt = new DataTable();
           dt.Columns.Add("Data", typeof(string));
   
           // Populate the DataTable with array data
           foreach (string item in dataArray)
           {
               dt.Rows.Add(item);
           }
   
           // Bind DataTable to GridView
           GridView1.DataSource = dt;
           GridView1.DataBind();
       }
   }
   

2. Using List of Objects: Here, we convert the array into a list of custom objects and then bind the list to the GridView.

   public class DataItem
   {
       public string Value { get; set; }
   }
   
   protected void Page_Load(object sender, EventArgs e)
   {
       if (!IsPostBack)
       {
           // Sample array
           string[] dataArray = { "Item 1", "Item 2", "Item 3", "Item 4" };
   
           // Convert array to list of DataItem objects
           List dataList = new List();
           foreach (string item in dataArray)
           {
               dataList.Add(new DataItem { Value = item });
           }
   
           // Bind List to GridView
           GridView1.DataSource = dataList;
           GridView1.DataBind();
       }
   }
   

3. Using ArrayList: Similar to the previous method, we convert the array into an ArrayList and then bind it to the GridView.

   protected void Page_Load(object sender, EventArgs e)
   {
       if (!IsPostBack)
       {
           // Sample array
           string[] dataArray = { "Item 1", "Item 2", "Item 3", "Item 4" };
   
           // Convert array to ArrayList
           ArrayList arrayList = new ArrayList(dataArray);
   
           // Bind ArrayList to GridView
           GridView1.DataSource = arrayList;
           GridView1.DataBind();
       }
   }
   

4. Using Array directly: Although not recommended, you can bind the array directly to the GridView.

   protected void Page_Load(object sender, EventArgs e)
   {
       if (!IsPostBack)
       {
           // Sample array
           string[] dataArray = { "Item 1", "Item 2", "Item 3", "Item 4" };
   
           // Bind array directly to GridView
           GridView1.DataSource = dataArray;
           GridView1.DataBind();
       }
   }
   

5. Binding 2D Array: We convert the 2D array into a DataTable and then bind it to the GridView.

   protected void Page_Load(object sender, EventArgs e)
   {
       if (!IsPostBack)
       {
           // Sample 2D array
           string[,] dataArray = { 
               { "Row 1, Column 1", "Row 1, Column 2", "Row 1, Column 3" },
               { "Row 2, Column 1", "Row 2, Column 2", "Row 2, Column 3" },
               { "Row 3, Column 1", "Row 3, Column 2", "Row 3, Column 3" }
           };
   
           // Convert 2D array to DataTable
           DataTable dt = new DataTable();
           for (int i = 0; i < dataArray.GetLength(1); i++)
           {
               dt.Columns.Add($"Column {i + 1}", typeof(string));
           }
   
           for (int i = 0; i < dataArray.GetLength(0); i++)
           {
               DataRow dr = dt.NewRow();
               for (int j = 0; j < dataArray.GetLength(1); j++)
               {
                   dr[j] = dataArray[i, j];
               }
               dt.Rows.Add(dr);
           }
   
           // Bind DataTable to GridView
           GridView1.DataSource = dt;
           GridView1.DataBind();
       }
   }
   
   

6. Binding Multi-Dimensional Array: Finally, we demonstrate how to bind a multi-dimensional array to the GridView by first converting it into a DataTable.

   protected void Page_Load(object sender, EventArgs e)
   {
       if (!IsPostBack)
       {
           // Sample multi-dimensional array
           string[,,] dataArray = new string[2, 2, 2] {
               { { "A11", "A12" }, { "A21", "A22" } },
               { { "B11", "B12" }, { "B21", "B22" } }
           };
   
           // Convert multi-dimensional array to DataTable
           DataTable dt = new DataTable();
           dt.Columns.Add("Column 1", typeof(string));
           dt.Columns.Add("Column 2", typeof(string));
           dt.Columns.Add("Column 3", typeof(string));
   
           for (int i = 0; i < dataArray.GetLength(0); i++)
           {
               for (int j = 0; j < dataArray.GetLength(1); j++)
               {
                   DataRow dr = dt.NewRow();
                   for (int k = 0; k < dataArray.GetLength(2); k++)
                   {
                       dr[k] = dataArray[i, j, k];
                   }
                   dt.Rows.Add(dr);
               }
           }
   
           // Bind DataTable to GridView
           GridView1.DataSource = dt;
           GridView1.DataBind();
       }
   }
   
   

Conclusion: In this guide, we've explored various methods to bind arrays, including 2D arrays and multi-dimensional arrays, to a GridView in ASP.NET. Depending on your specific requirements and coding preferences, you can choose the method that best fits your needs. Whether it's using DataTables, lists of objects, ArrayLists, or binding arrays directly, ASP.NET provides flexible options for displaying array data in a GridView.