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" />

</asp:datagrid>

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

C#:

public override void DataBind()

{

     base.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);

               myDataGrid.DataBind();

          }

     }

}

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()

     MyBase.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)

              myDataGrid.DataBind()

          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"

              System.Math.Min(System.Threading.Interlocked.Increment(i),i-1)

          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" />

</asp:datagrid>

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

C#:

public override void  DataBind()

{

     base.DataBind()

     if (this.DataSource == null)

     {

          return;

     }

     BindPaginationControls();

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

     this.PopulateCustomerIDFilter(MiscUtils.GetSelectedValue(this.CustomerIDFilter,

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

     this.PopulateEmployeeIDFilter(MiscUtils.GetSelectedValue(this.EmployeeIDFilter,

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

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

     grid.DataSource = table;

     grid.DataBind();

}

Visual Basic .NET:

Public Overrides Sub DataBind()

     MyBase.DataBind

     If (Me.DataSource Is Nothing) Then

          Return

     End If

     BindPaginationControls

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

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

     Me.PopulateCustomerIDFilter(MiscUtils.GetSelectedValue(Me.CustomerIDFilter,

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

     Me.PopulateEmployeeIDFilter(MiscUtils.GetSelectedValue(Me.EmployeeIDFilter,

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

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

     grid.DataSource = table

     grid.DataBind

End Sub

Step 6:  Build and run your application.

See Also

Part V: Customizing Application Code