|
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:
-
Existing data grid. Your application may have a page that already has an ASP.NET data grid, and you may wish to use the existing ASP.NET data grid instead of adding an Iron Speed Designer-created table control.
-
Simplicity. You might find it easier to work with an ASP.NET data grid instead of an Iron Speed Designer-created table control.
-
Familiarity. You may already be familiar with the ASP.NET data grid and don’t have time to learn how to customize code for a new table control.
Adding an ASP.NET DataGrid control on a page
This example adds an ASP.NET data grid at the bottom of a Table Report 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 Layout Editor where you want to place the DataGrid control.
Step 3: Add the following ASP.NET tags in the HTML 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 the Layout Editor, 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 Layout Editor.
Step 4: Paste the following code into the same cell via the HTML 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.SetCustomerIDFilter();
this.SetSalesRepIDFilter();
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.SetCustomerIDFilter()
Me.SetSalesRepIDFilter() 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.