Simple DataGrid Demo

This demo shows a very simple DataGrid. We'll soon extend the page's functionality using client-side techniques so that the DataGrid's rows are highlighted as the user's mouse passes over them.


First NameLast NameEmail
BugsBunnybbunny@wb.com
MickeyMousemmouse@disney.com
DonaldDuckdduck@disney.com
DanMarinodmarino@dolphins.com
SteveStchursstchur@yahoo.com


Source Code
<%@ Page Language = "C#" %>
<%@ Import Namespace = "System.Data" %>

<html>
  <head>
    <title>DataGrid Sample</title>
    
    <script runat = "server">
      private void Page_Load(object sender, EventArgs e)
      {
        if (!Page.IsPostBack)
          BindGrid();
      }
      
      private void BindGrid()
      {
        DataTable table = new DataTable("Users");
        table.Columns.Add("firstName");
        table.Columns.Add("lastName");
        table.Columns.Add("emailAddress");
        
        AddRow(table, "Bugs", "Bunny", "bbunny@wb.com");
        AddRow(table, "Mickey", "Mouse", "mmouse@disney.com");
        AddRow(table, "Donald", "Duck", "dduck@disney.com");
        AddRow(table, "Dan", "Marino", "dmarino@dolphins.com");
        AddRow(table, "Steve", "Stchur", "sstchur@yahoo.com");
        
        myGrid.DataSource = new DataView(table);
        myGrid.DataBind();        
      }
      
      private void AddRow(DataTable table, string firstName, 
                          string lastName, string email)
      {
        DataRow row = table.NewRow();
        row["firstName"] = firstName;
        row["lastName"] = lastName;
        row["emailAddress"] = email;
        table.Rows.Add(row);
      }
    </script>
  </head>
    
  <body>
    <asp:DataGrid id = "myGrid"
                  CellPadding = "5"
                  AutoGenerateColumns = "false"
                  Font-Name = "verdana"
                  Font-Size = "10pt"
                  runat = "server">
                  
      <HeaderStyle BackColor = "#336699" 
                 ForeColor = "#ffffff" Font-Bold = "true" />      
      <AlternatingItemStyle BackColor = "#eeeeee" />
                  
      <Columns>
        <asp:BoundColumn HeaderText = "First Name" 
                            DataField = "firstName" />
        <asp:BoundColumn HeaderText = "Last Name" 
                            DataField = "lastName" />
        <asp:BoundColumn HeaderText = "Email" 
                            DataField = "emailAddress" />
      </Columns>
    </asp:DataGrid>
  </body>
</html>
		

[Return to the article...]