Adding an ASP.NET DataGrid Control to a Web Page

Updated August 12, 2009
Iron Speed Designer V6.2 and later

In some situations it may be desirable to use an ASP.NET data grid in your application instead of a table control created by Iron Speed Designer, for example:

Adding an ASP.NET DataGrid control on a page

This example adds an ASP.NET data grid at the bottom of a Show Table page, below an Iron Speed Designer-created table panel.

Step 1:  In the Application Explorer, open the page where a DataGrid is to be added.

Step 2:  Zoom out to the page level and locate the cell on the Quick Layout Spreadsheet where you want to place the DataGrid control.

Step 3:  Add the following ASP.NET tags in the Cell Editor:

<asp:datagrid id="myDataGrid" OnItemDataBound= "MyItemDataBound" runat="server">

     <HeaderStyle BackColor = "#336699" ForeColor = "#ffffff" Font-Bold = "true" />

     <AlternatingItemStyle BackColor = "#eeeeee" />


Step 4:  Override the DataBind() method in Section 1 of the Page class, located in:

...\<Application Folder>\<App_Code>\Orders\ShowOrdersTable.aspx.cs  or .vb


public override void DataBind()



     if (!this.Page.IsPostBack)


          System.Web.UI.WebControls.DataGrid myDataGrid;

          myDataGrid =  ((System.Web.UI.WebControls.DataGrid)(this.FindControlRecursively("myDataGrid")));

          if (!(myDataGrid == null))


              string whereStr = null;

              BaseClasses.Data.OrderBy ob = null;

              int pageIndex = 0;

              int pageSize = 1000;

              myDataGrid.DataSource = OrdersTable.GetDataTable(whereStr, ob, pageIndex, pageSize);





public void MyItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)


     if (e.Item.ItemType == System.Web.UI.WebControls.ListItemType.Item ||

          e.Item.ItemType == System.Web.UI.WebControls.ListItemType.AlternatingItem)


          for(int i = 1; i < (e.Item.Cells.Count); i++)


              e.Item.Cells[i].Style["cursor"] = "hand";




Visual Basic .NET:

Public Overrides Sub DataBind()


     If (Not Me.Page.IsPostBack) Then

          Dim myDataGrid As System.Web.UI.WebControls.DataGrid

          myDataGrid = CType(Me.FindControlRecursively("myDataGrid"), System.Web.UI.WebControls.DataGrid)


          If (Not myDataGrid Is Nothing) Then

              Dim whereStr As String = Nothing

              Dim ob As BaseClasses.Data.OrderBy = Nothing

              Dim pageIndex As Integer = 0

              Dim pageSize As Integer = 1000


              myDataGrid.DataSource = OrdersTable.GetDataTable(whereStr, ob, pageIndex, pageSize)


          End If

     End If

End Sub


Public Sub MyItemDataBound(ByVal sender As Object, _

     ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs)

     If e.Item.ItemType = ListItemType.Item OrElse e.Item.ItemType = ListItemType.AlternatingItem Then

          Dim i As Integer = 0


          While i < (e.Item.Cells.Count)

              e.Item.Cells(i).Style("cursor") = "hand"


          End While

     End If

End Sub

Step 5:  Build and run your application.

Replace an Iron Speed Designer-created table control with an ASP.NET DataGrid control

Instead of writing the ASP.NET data grid code from scratch, you can use an Iron Speed Designer-created table control to populate your ASP.NET data grid, saving you a lot of programming.  Since the ASP.NET data grid is populated using the Iron Speed Designer-created table control, features such as filtering, search and pagination are automatically implemented.

Step 1:  Create an application in Iron Speed Designer using a database table, such as the Orders table in Northwind.

Step 2:  In Design Mode, zoom in or out on the page level until you locate the fields region for the OrdersTableControl e.g., OrdersFields.

Step 3: Delete the OrdersFields panel on the Quick Layout Spreadsheet.

Step 4:  Paste the following code into the same cell via the Cell Editor.

<asp:datagrid id="myDataGrid" runat="server">

     <HeaderStyle BackColor = "#336699" ForeColor = "#ffffff" Font-Bold = "true" />

     <AlternatingItemStyle BackColor = "#eeeeee" />


Step 5:  Override the DataBind method in the TableControl class of the ShowOrdersTable.aspx web page.  Add your code in the OrdersTableControl class, located in:

...\<Application Folder>\App_Code\Orders\ShowOrdersTable.Controls.cs or .vb


public override void  DataBind()



     if (this.DataSource == null)





     System.Web.UI.WebControls.DataGrid grid = (System.Web.UI.WebControls.DataGrid)(this.FindControl("myDataGrid"));


          this.GetFromSession(this.CustomerIDFilter)), 500);


          this.GetFromSession(this.EmployeeIDFilter)), 500);

     System.Data.DataTable table = OrdersTable.Instance.CreateDataTable(this.DataSource);

     grid.DataSource = table;



Visual Basic .NET:

Public Overrides Sub DataBind()


     If (Me.DataSource Is Nothing) Then


     End If


     Dim grid As System.Web.UI.WebControls.DataGrid =



          Me.GetFromSession(Me.CustomerIDFilter)), 500)


          Me.GetFromSession(Me.EmployeeIDFilter)), 500)

     Dim table As System.Data.DataTable = OrdersTable.Instance.CreateDataTable(Me.DataSource)

     grid.DataSource = table


End Sub

Step 6:  Build and run your application.

See Also

Part V: Customizing Application Code