Get Started with GridView

In web pages, it’s very common to arrange data in a tabular way. It makes it easier to read it and interpret it. It’s no surprising that data in databases is represented in tables and that spreadsheets have columns and rows.

The GridView control in ASP.NET allows us to dynamically create tables to represent data in a web page. It’s usually used with data from a database, but it’s not limited to databases. For instance, it can also be used with collections of objects and XML.

In this post, we’ll see a very simple sample using the GridView.

First, let’s define our data. We’ll use a class with a few properties to represent orders. We’ll also define a method to create an array of orders. The properties of the Order class will be the columns and each item in the array will be a row.

namespace WebExample.Business
{
    public class Order
    {
        public int OrderID { get; set; }
        public String Customer { get; set; }
        public DateTime OrderDate { get; set; }
        public Decimal Total { get; set; }

        static public Order[] LoadOrders()
        {
            List orders = new List<Order>();

            Order order = new Order();
            order.OrderID = 1001;
            order.Customer = "Test Customer";
            order.OrderDate = new DateTime(2011, 3, 20);
            order.Total = 1250.50M;
            orders.Add(order);

            order = new Order();
            order.OrderID = 1002;
            order.Customer = "Test Customer";
            order.OrderDate = new DateTime(2011, 4, 1);
            order.Total = 2600.0M;
            orders.Add(order);

            order = new Order();
            order.OrderID = 1003;
            order.Customer = "Oscar Martinez";
            order.OrderDate = new DateTime(2011, 4, 10);
            order.Total = 800.0M;
            orders.Add(order);

            return orders.ToArray();
        }

    }
}

In a real application, this method would probably read the data from a database and return a DataTable or DataSet. Here we’re using an array of objects to simplify the sample.

Next, let’s define the layout of our table.

        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
            <Columns>
                <asp:BoundField DataField="OrderID" HeaderText="Order Number" />
                <asp:BoundField DataField="Customer" HeaderText="Customer" />
                <asp:BoundField DataField="OrderDate" HeaderText="Order Date" DataFormatString="{0:M/d/yyyy}" />
                <asp:BoundField DataField="Total" HeaderText="Total" DataFormatString="{0:C}" />
            </Columns>
        </asp:GridView>

The GridView has the ability to figure out the structure of our data and define the columns of the table. In this case, we want to have control of the layout. With the property AutoGenerateColumns set to false, we’re telling the GridView to not generate the columns for us.

Later, inside the <Columns> tag, we define the columns of our table. There are different types of columns available. Here we’re going to use BoundField. This type of column is “tied” to a field.

We also have the option to set the header of each column and the format of dates and numbers.

Lastly, let’s write the code to load the data and pass it to the GridView with the DataSource property. Later we use the DataBind() method to have the GridView process the data and generate the table.

using WebExample.Business;

namespace WebExample
{
    public partial class GridTest : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                LoadGrid();
            }
        }

        private void LoadGrid()
        {
            Order[] data = Order.LoadOrders();
            GridView1.DataSource = data;
            GridView1.DataBind();
        }

    }
}

Now, run the web application.

We’ll do some advanced tasks on later posts. Please leave your comments if you have a question or suggestion.