[ASP.NET] GridView Control

The “GridView” control is a general purpose grid control. In most professional applications, data are stored in the relational databases. Therefore the table-style (grid) representation is really important.  The “GridView” control really flexible and powerful but it is a heavy control especially when it is used with “ViewState“. Therefore it requires careful design and implementation to use this control properly.  


1. GridView Control

The “GridView” control supports update and delete but it does not support insert.  The control consists of “GridViewRow” (rows), “DataControlField” (columns), and “DataControlFieldCell” (cells).

– Properties –

  • AutoGenerateColumns: when set to true, generate a grid column for every field in the data source
  • DataKeyNames:
  • DataSourceID: the ID of the DataSource control
  • DataSource: the data object (such as DataTable)
public class GridView : CompositeDataBoundControl
  public virtual DataControlFieldCollection Columns { get; }

  public virtual bool AutoGenerateColumns { get; set; } // The default is true
  public virtual bool AutoGenerateDeleteButton { get; set; } // The default is false
  public virtual bool AutoGenerateEditButton { get; set; } // The default is false
  public virtual bool AutoGenerateSelectButton { get; set; } // The default is false

  public virtual string[] DataKeyNames { get; set; } // the names of the primary key fields

  public virtual int EditIndex { get; set; }
  public virtual int SelectedIndex { get; set; }


2. Defining Columns

In most cases, you do not generate columns automatically and define columns explicitly. Each column can be one of the following types:

  • BoundField: text from a field in the data source
  • ButtonField: button
  • CheckBoxField: a checkbox (If a field of the data source is boolean (a bit filed in SQL Server), the CheckBoxField is used automatically)
  • CommandField: Selection and Editing buttons
  • HyperLinkField: a link
  • ImageField: an image
  • TemplateField: user-defined multiple controls and HTML

Once you choose the type of a column, you can set the properties of the column. The column properties are very intuitive. One notable property is the “DataFormatString“, in which  you can specify how a field value is displayed.

public abstract class DataControlField
  public string HeaderText { get; set; }
  public TableItemStyle HeaderStyle { get; }
  public string HeaderImageUrl { get; set; }

  public string FooterText { get; set; }
  public TableItemStyle FooterStyle { get; }

  public TableItemStyle ItemStyle { get; }
  public string SortExpression { get; set; }

  public bool Visible { get; set; }

public abstract class ButtonFieldBase : DataControlField
  public ButtonType ButtonType { get; set; }  // Button, Image, or Link

public class ButtonField : ButtonFieldBase
  public string CommandName { get; set; }
  public string Text { get; set; }
  public virtual string ImageUrl { get; set; }

public class CommandField : ButtonFieldBase { }

public class BoundField : DataControlField
  public string DataField { get; set; }
  public string DataFormatString { get; set; }

public class CheckBoxField : BoundField
  public virtual string Text { get; set; }

public class HyperLinkField : DataControlField
  public string NavigateUrl { get; set; }
  public string Target { get; set; }
  public virtual string Text { get; set; }

public class ImageField : DataControlField
  public string DataImageUrlField { get; set; }
  public string AlternateText { get; set; }

public class TemplateField : DataControlField
  public ITemplate ItemTemplate { get; set; }
  public ITemplate AlternatingItemTemplate { get; set; }
  public ITemplate HeaderTemplate { get; set; }
  public ITemplate FooterTemplate { get; set; }
  public ITemplate EditItemTemplate { get; set; }
  public ITemplate InsertItemTemplate { get; set; }


3. Styles

GridView exposes a powerful formatting model. It is based on styles.

  • RowStyle
  • AlternatingRowStyle
  • SelectedRowStyle
  • EditRowStyle
  • EmptyDataRowStyle
  • HeaderStyle
  • FooterStyle
  • PagerStyle

Each style provides a lot of formatting properties such as “Fore-Color“, “Back-Color“, “Font-Bold” etc..

<asp:GridView ID="productGridView" runat="server" DataSourceID="productSqlDS">
  <AlternatingRowStyle BackColor="#80FFFF" />
  <RowStyle BackColor="#FFFF80" />

If you want to apply the style to a specific column, you can define styles inside the Field element. (Column-Specifc Styles)

  • ItemStyle
  • HeaderStyle
  • FooterStyle
  • ControlStyle
<asp:BoundField DataField="Name" HeaderText="Name">
  <ItemStyle Font-Bold="True" ForeColor="Red" />

As a seasoned web developer, I am sure that you are uncomfortable with these style things. Colors and fonts are intermingled with control tags. You are right. In an real professional application, you do not want to configure each GridView styles in this way. Each style element has the “CssClass” attribute. Just put all styles in CSS and refer the class name using the “CssClass” attribute for each style.

<asp:GridView ID="productGridView" runat="server" DataSourceID="productSqlDS">
  <AlternatingRowStyle BackColor="#80FFFF" />
  <RowStyle CssClass="myRowStyle" />

Finally, you might want to override some styles programmatically. It is very common to emphasize some cells based on their values.  To do this, you need to use events. The “RowCreated” or “RowDataBound” event can be used for this purpose.

public class GridView
  public event GridViewRowEventHandler RowDataBound;
  public event GridViewRowEventHandler RowCreated;

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s