Export (0) Print
Expand All
17 out of 35 rated this helpful - Rate this topic

DataGrid Class

A data bound list control that displays the items from data source in a table. The DataGrid control allows you to select, sort, and edit these items.

Namespace: System.Web.UI.WebControls
Assembly: System.Web (in system.web.dll)

'Declaration
Public Class DataGrid
	Inherits BaseDataList
	Implements INamingContainer
'Usage
Dim instance As DataGrid

public class DataGrid extends BaseDataList implements INamingContainer
public class DataGrid extends BaseDataList implements INamingContainer
Not applicable.

Use the DataGrid control to display the fields of a data source as columns in a table. Each row in the DataGrid control represents a record in the data source. The DataGrid control supports selection, editing, deleting, paging, and sorting.

Different column types determine the behavior of the columns in the control. The following table lists the different column types that can be used.

Column Type

Description

BoundColumn

Displays a column bound to a field in a data source. It displays each item in the field as text. This is the default column type of the DataGrid control.

ButtonColumn

Displays a command button for each item in the column. This allows you to create a column of custom button controls, such as Add or Remove buttons.

EditCommandColumn

Displays a column that contains editing commands for each item in the column.

HyperLinkColumn

Displays the contents of each item in the column as a hyperlink. The contents of the column can be bound to a field in a data source or static text.

TemplateColumn

Displays each item in the column following a specified template. This allows you to provide custom controls in the column.

By default, the AutoGenerateColumns property is set to true, which creates a BoundColumn object for each field in the data source. Each field is then rendered as a column in the DataGrid control in the order that each field appears in the data source.

You can also manually control which columns appear in the DataGrid control by setting the AutoGenerateColumns property to false and then listing the columns that you want to include between the opening and closing <Columns> tags. The columns specified are added to the Columns collection in the order listed. This allows you to programmatically control the columns in the DataGrid control.

NoteNote:

The order that the columns are displayed in the DataGrid control is controlled by the order that the columns appear in the Columns collection. Although you can programmatically change the order of the columns by manipulating the Columns collection, it is easier to list the columns in the desired display order.

Explicitly declared columns can be displayed in conjunction with automatically generated columns. When using both, explicitly declared columns will be rendered first, followed by the automatically generated columns.

NoteNote:

Automatically generated columns are not added to the Columns collection.

The appearance of the DataGrid control may be customized by setting the style properties for the different parts of the control. The following table lists the different style properties.

Style Property

Description

AlternatingItemStyle

Specifies the style for alternating items in the DataGrid control.

EditItemStyle

Specifies the style for the item being edited in the DataGrid control.

FooterStyle

Specifies the style for the footer section in the DataGrid control.

HeaderStyle

Specifies the style for the header section in the DataGrid control.

ItemStyle

Specifies the style for the items in the DataGrid control.

PagerStyle

Specifies the style for the page selection section of the DataGrid control.

SelectedItemStyle

Specifies the style for the selected item in the DataGrid control.

You can also show or hide different parts of the control. The following table lists the properties that control which parts are shown or hidden.

Property

Description

ShowFooter

Shows or hides the footer section of the DataGrid control.

ShowHeader

Shows or hides the header section of the DataGrid control.

You can control the appearance of the DataGrid control by programmatically adding attributes to the <td> and <tr> tags rendered by the control on the browser. Attributes can be programmatically added by providing code in the event handler for the OnItemCreated or OnItemDataBound event.

To add an attribute to the <td> tag, first get the TableCell object that represents the cell in the DataGrid control you want to add the attribute to. The Control.Controls collection for the Item property of the DataGridItemEventArgs object passed into the event handler can be used to get the desired TableCell object. You can then use the AttributeCollection.Add method of the Attributes collection for the TableCell object to add attributes to the <td> tag.

To add an attribute to the <tr> tag, first get the DataGridItem object that represents the row in the DataGrid control you want to add the attribute to. The Item property of the DataGridItemEventArgs object passed into the event handler can be used to get the desired DataGridItem object. You can then use the AttributeCollection.Add method of the Attributes collection for the DataGridItem object to add attributes to the <tr> tag.

Caution noteCaution:

This control can be used to display user input, which might include malicious client script. Check any information that is sent from a client for executable script, SQL statements, or other code before displaying it in your application. ASP.NET provides an input request validation feature to block script and HTML in user input. Validation server controls are also provided to assess user input. For more information, see Validation Server Controls.

Accessibility

The markup rendered by default for this control might not conform to accessibility standards such as the Web Content Accessibility Guidelines 1.0 (WCAG) priority 1 guidelines. For details about accessibility support for this control, see ASP.NET Controls and Accessibility.

The following code example demonstrates how to use the DataGrid control to display the items in the data source.

<%@ Page Language="VB" AutoEventWireup="True" %>
<%@ Import Namespace="System.Data" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
   <script language="VB" runat="server">
     Function CreateDataSource() As ICollection
        Dim dt As New DataTable()
        Dim dr As DataRow
        
        dt.Columns.Add(New DataColumn("IntegerValue", GetType(Int32)))
        dt.Columns.Add(New DataColumn("StringValue", GetType(String)))
        dt.Columns.Add(New DataColumn("CurrencyValue", GetType(Double)))
        
        Dim i As Integer
        For i = 0 To 8
            dr = dt.NewRow()
            
            dr(0) = i
            dr(1) = "Item " + i.ToString()
            dr(2) = 1.23 *(i + 1)
            
            dt.Rows.Add(dr)
        Next i
        
        Dim dv As New DataView(dt)
        Return dv
    End Function 'CreateDataSource


    Sub Page_Load(sender As Object, e As EventArgs)
        
        If Not IsPostBack Then
            ' Load this data only once.
            ItemsGrid.DataSource = CreateDataSource()
            ItemsGrid.DataBind()
        End If
    End Sub 'Page_Load
 
  </script>
 
<head runat="server">
    <title>DataGrid Example</title>
</head>
<body>
 
   <form id="form1" runat="server">
 
      <h3>DataGrid Example</h3>
 
      <b>Product List</b>
 
      <asp:DataGrid id="ItemsGrid"
           BorderColor="black"
           BorderWidth="1"
           CellPadding="3"
           AutoGenerateColumns="true"
           runat="server">

         <HeaderStyle BackColor="#00aaaa">
         </HeaderStyle> 
 
      </asp:DataGrid>
 
   </form>
 
</body>
</html>

The following code example demonstrates how to use the DataGrid control for a simple shopping cart.

<%@ Page Language="VB" AutoEventWireup="True" %>
<%@ Import Namespace="System.Data" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
   <script language="VB" runat="server">
 
      Dim Cart As DataTable
      Dim CartView As DataView
      
        Function CreateDataSource() As ICollection
            Dim dt As New DataTable()
            Dim dr As DataRow
            
            dt.Columns.Add(New DataColumn("IntegerValue", GetType(Int32)))
            dt.Columns.Add(New DataColumn("StringValue", GetType(String)))
            dt.Columns.Add(New DataColumn("CurrencyValue", GetType(Double)))
            
            Dim i As Integer
            For i = 0 To 8
                dr = dt.NewRow()
                
                dr(0) = i
                dr(1) = "Item " + i.ToString()
                dr(2) = 1.23 *(i + 1)
                
                dt.Rows.Add(dr)
            Next i
            
            Dim dv As New DataView(dt)
            Return dv
        End Function 'CreateDataSource


        Sub Page_Load(sender As Object, e As EventArgs)
            
            If Session("DG4_ShoppingCart") Is Nothing Then
                Cart = New DataTable()
                Cart.Columns.Add(New DataColumn("Item", GetType(String)))
                Cart.Columns.Add(New DataColumn("Price", GetType(String)))
                Session("DG4_ShoppingCart") = Cart
            
            Else
                Cart = CType(Session("DG4_ShoppingCart"), DataTable)
            End If
            
            CartView = New DataView(Cart)
            ShoppingCart.DataSource = CartView
            ShoppingCart.DataBind()
            
            If Not IsPostBack Then
                ' Load this data only once.
                ItemsGrid.DataSource = CreateDataSource()
                ItemsGrid.DataBind()
            End If
        End Sub 'Page_Load


        Sub Grid_CartCommand(sender As Object, e As DataGridCommandEventArgs)
            
            Dim dr As DataRow = Cart.NewRow()
            
            ' e.Item is the table row where the command is raised.
            ' For bound columns, the value is stored in the Text property of the TableCell.
            Dim itemCell As TableCell = e.Item.Cells(2)
            Dim priceCell As TableCell = e.Item.Cells(3)
            Dim item As String = itemCell.Text
            Dim price As String = priceCell.Text
            
            If CType(e.CommandSource, Button).CommandName = "AddToCart" Then
                dr(0) = item
                dr(1) = price
                Cart.Rows.Add(dr)
            
            Else 

                'Remove from Cart.
                CartView.RowFilter = "Item" + ChrW(61) + "'" + item + "'"
                If CartView.Count > 0 Then
                    CartView.Delete(0)
                End If
                CartView.RowFilter = ""
            End If
            
            ShoppingCart.DataBind()
        End Sub 'Grid_CartCommand 
   </script>
 
<head runat="server">
    <title>DataGrid Example</title>
</head>
<body>
 
   <form id="form1" runat="server">
 
   <h3>DataGrid Example</h3>
 
   <table cellpadding="5">
      <tr valign="top">
         <td>
 
            <b>Product List</b>
 
            <asp:DataGrid id="ItemsGrid"
                 BorderColor="black"
                 BorderWidth="1"
                 CellPadding="3"
                 AutoGenerateColumns="false"
                 OnItemCommand="Grid_CartCommand"
                 runat="server">

               <HeaderStyle BackColor="#00aaaa">
               </HeaderStyle>
 
               <Columns>
 
                  <asp:ButtonColumn 
                       HeaderText="Add to cart" 
                       ButtonType="PushButton" 
                       Text="Add" 
                       CommandName="AddToCart" />
 
                  <asp:ButtonColumn 
                       HeaderText="Remove from cart" 
                       ButtonType="PushButton" 
                       Text="Remove" 
                       CommandName="RemoveFromCart" />
 
                  <asp:BoundColumn 
                       HeaderText="Item" 
                       DataField="StringValue"/>

                  <asp:BoundColumn 
                       HeaderText="Price" 
                       DataField="CurrencyValue" 
                       DataFormatString="{0:c}">

                     <ItemStyle HorizontalAlign="right">
                     </ItemStyle>

                  </asp:BoundColumn>   
 
               </Columns>
 
            </asp:DataGrid>
 
         </td>
         <td>
 
            <b>Shopping Cart</b>
 
            <asp:DataGrid id="ShoppingCart" 
                 runat="server"
                 BorderColor="black"
                 BorderWidth="1"
                 GridLines="Both"
                 ShowFooter="false"
                 CellPadding="3"
                 CellSpacing="0">

               <HeaderStyle BackColor="#00aaaa">
               </HeaderStyle>

            </asp:DataGrid> 
 
         </td>
      </tr>
 
   </table>
 
   </form>
 
</body>
</html>

The following code example demonstrates how to dynamically add attributes to the <td> and <tr> tags generated by the DataGrid control.


<%@ Page Language="VB" AutoEventWireup="True" %>
<%@ Import Namespace="System.Data" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<script runat="server">
 
   Function CreateDataSource() As ICollection 
   
      Dim dt As DataTable = New DataTable()
      Dim dr As DataRow
      Dim i As Integer
      Dim dv As DataView
 
      dt.Columns.Add(New DataColumn("IntegerValue", GetType(Integer)))
      dt.Columns.Add(New DataColumn("StringValue", GetType(String)))
      dt.Columns.Add(New DataColumn("CurrencyValue", GetType(Double)))
 
      For i = 0 to 4 

         dr = dt.NewRow()
 
         dr(0) = i
         dr(1) = "Item " + i.ToString()
         dr(2) = 1.23 * (i+1)
 
         dt.Rows.Add(dr)
      
      Next i
 
      dv = New DataView(dt)
      CreateDataSource = dv
   
   End Function
 
   Sub Page_Load(sender As Object, e As EventArgs) 
 
      If Not IsPostBack 
  
         ' Load this data only once.
         ItemsGrid.DataSource = CreateDataSource()
         ItemsGrid.DataBind()
      
      End If 
 
   End Sub
 
   Sub Item_Bound(sender As Object, e As DataGridItemEventArgs) 

      Dim itemType As ListItemType 
      Dim intCell As TableCell

      itemType = CType(e.Item.ItemType, ListItemType)

      If (itemType <> ListItemType.Header) And _
         (itemType <> ListItemType.Footer) And _
         (itemType <> ListItemType.Separator) Then

         ' Get the IntegerValue cell from the grid's column collection.
         intCell = CType(e.Item.Controls(0), TableCell)

         ' Add attributes to the cell.
         intCell.Attributes.Add("id", "intCell" + e.Item.ItemIndex.ToString())
         intCell.Attributes.Add("OnClick", _
                                "Update_intCell" + _
                                e.Item.ItemIndex.ToString() + _
                                "()")
          
         ' Add attributes to the row.
         e.Item.Attributes.Add("id", "row" + e.Item.ItemIndex.ToString())
         e.Item.Attributes.Add("OnDblClick", _
                                "Update_row" + _
                                e.Item.ItemIndex.ToString() + _
                                "()")

      End If
 
   End Sub
 
</script>

<script type="text/vbscript">

   sub Update_intCell0 
      Alert "You Selected Cell 0."
   end sub

   sub Update_intCell1 
      Alert "You Selected Cell 1."
   end sub

   sub Update_intCell2 
      Alert "You Selected Cell 2."
   end sub

   sub Update_intCell3 
      Alert "You Selected Cell 3."
   end sub

   sub Update_intCell4 
      Alert "You Selected Cell 4."
   end sub

   sub UpDate_row0 
      Alert "You selected the row 0."
   end sub

   sub UpDate_row1 
      Alert "You selected the row 1."
   end sub

   sub UpDate_row2 
      Alert "You selected the row 2."
   end sub

   sub UpDate_row3 
      Alert "You selected the row 3."
   end sub

   sub UpDate_row4 
      Alert "You selected the row 4."
   end sub   

</script>
 
<head runat="server">
    <title>

            Adding Attributes to the &lt;td&gt; and &lt;tr&gt; </title>
</head>
<body>
 
   <form id="form1" runat="server">

      <h3>

            Adding Attributes to the &lt;td&gt; and &lt;tr&gt; <br />
            Tags of a DataGrid Control

      </h3>
 
      <asp:DataGrid id="ItemsGrid" runat="server"
           BorderColor="black"
           BorderWidth="1"
           CellPadding="3"
           ShowFooter="true"
           OnItemDataBound="Item_Bound"
           AutoGenerateColumns="false">

         <HeaderStyle BackColor="#00aaaa">
         </HeaderStyle>

         <FooterStyle BackColor="#00aaaa">
         </FooterStyle>

         <Columns>

            <asp:BoundColumn HeaderText="Number" 
                 DataField="IntegerValue">

               <ItemStyle BackColor="yellow">
               </ItemStyle>
 
            </asp:BoundColumn>

            <asp:BoundColumn
                 HeaderText="Item" 
                 DataField="StringValue"/>

            <asp:BoundColumn 
                 HeaderText="Price" 
                 DataField="CurrencyValue" 
                 DataFormatString="{0:c}">

               <ItemStyle HorizontalAlign="right">
               </ItemStyle>
   
            </asp:BoundColumn>

         </Columns>
   
      </asp:DataGrid>

      <br /><br />

      Click on one of the cells in the <b>Number</b> column to select the cell.

      <br /><br />

      Double click on a row to select a row.   
 
   </form>
 
</body>
</html>



<%@ Page Language="VB" AutoEventWireup="True" %>
<%@ Import Namespace="System.Data" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
   <script runat="server">
 
       Function CreateDataSource() As ICollection 
      
         ' Create sample data for the DataGrid control.
         Dim dt As DataTable = New DataTable()
         Dim dr As DataRow
 
         ' Define the columns of the table.
         dt.Columns.Add(New DataColumn("IntegerValue", GetType(Int32)))
         dt.Columns.Add(New DataColumn("StringValue", GetType(string)))
         dt.Columns.Add(New DataColumn("CurrencyValue", GetType(double)))
 
         ' Populate the table with sample values.
         Dim i As Integer

         For i = 0 to 8 
        
            dr = dt.NewRow()
 
            dr(0) = i
            dr(1) = "Item " & i.ToString()
            dr(2) = 1.23 * (i + 1)
 
            dt.Rows.Add(dr)

         Next i
 
         Dim dv As DataView = New DataView(dt)
         Return dv

      End Function
 
      Sub Page_Load(sender As Object, e As EventArgs) 
 
         ' Load sample data only once when the page is first loaded.
         If Not IsPostBack Then 
  
            ItemsGrid.DataSource = CreateDataSource()
            ItemsGrid.DataBind()

         End If

      End Sub

      Sub Button_Click(sender As Object, e As EventArgs) 

         ' Count the number of selected items in the DataGrid control.
         Dim count As Integer = 0

         ' Display the selected items.
         Message.Text = "You Selected: <br />"

         ' Iterate through each item (row) in the DataGrid control 
         ' and determine whether it is selected.
         Dim item As DataGridItem
 
         For Each item In ItemsGrid.Items

            DetermineSelection(item, count)        

         Next

         ' If no items are selected, display the appropriate message.
         If count = 0 Then

            Message.Text = "No items selected"

         End If

      End Sub

      Sub DetermineSelection(item As DataGridItem, ByRef count As Integer)

         ' Retrieve the SelectCheckBox CheckBox control from the specified  
         ' item (row) in the DataGrid control.
         Dim selection As CheckBox = CType(item.FindControl("SelectCheckBox"), CheckBox)

         ' If the item is selected, display the appropriate message and 
         ' increment the count of selected items.
         If Not selection Is Nothing Then

           If selection.Checked Then
           
              Message.Text &= "- " & item.Cells(1).Text & "<br />"
              count = count + 1
           
           End If

         End If    

      End Sub

   </script>
 
<head runat="server">
    <title>DataGrid Example</title>
</head>
<body>
 
   <form id="form1" runat="server">
 
      <h3>DataGrid Example</h3>
 
      <b>Product List</b>
 
      <asp:DataGrid id="ItemsGrid"
           BorderColor="black"
           BorderWidth="1"
           CellPadding="3"
           AutoGenerateColumns="False"
           runat="server">

         <HeaderStyle BackColor="#00aaaa">
         </HeaderStyle>

         <Columns>

            <asp:BoundColumn DataField="IntegerValue" 
                 HeaderText="Item"/>

            <asp:BoundColumn DataField="StringValue" 
                 HeaderText="Description"/>

            <asp:BoundColumn DataField="CurrencyValue" 
                 HeaderText="Price"
                 DataFormatString="{0:c}">

               <ItemStyle HorizontalAlign="Right">
               </ItemStyle>

            </asp:BoundColumn>

            <asp:TemplateColumn HeaderText="Select Item">

               <ItemTemplate>

                  <asp:CheckBox id="SelectCheckBox"
                       Text="Add to Cart"
                       Checked="False"
                       runat="server"/>

               </ItemTemplate>

            </asp:TemplateColumn>
 
         </Columns> 
 
      </asp:DataGrid>

      <br /><br />

      <asp:Button id="SubmitButton"
           Text="Submit"
           OnClick = "Button_Click"
           runat="server"/>

      <br /><br />

      <asp:Label id="Message"
           runat="server"/>
 
   </form>
 
</body>
</html>


Any public static (Shared in Visual Basic) members of this type are thread safe. Any instance members are not guaranteed to be thread safe.

Windows 98, Windows Server 2000 SP4, Windows Server 2003, Windows XP Media Center Edition, Windows XP Professional x64 Edition, Windows XP SP2, Windows XP Starter Edition

The Microsoft .NET Framework 3.0 is supported on Windows Vista, Microsoft Windows XP SP2, and Windows Server 2003 SP1.

.NET Framework

Supported in: 3.0, 2.0, 1.1, 1.0
Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback

Community Additions

ADD
Show:
© 2014 Microsoft. All rights reserved.