S E S S I O N
23
Using the DataGrid Control with Bound Data
Session Checklist
Binding controls to one another
Implementing master-detail relationships
Using DataBound columns with the DataGrid control
This session assumes you have SQL Server installed and have access to the
Pubs database.
Note
In this session we cover the basics of the DataGrid control. We start out by describing how to bind datasets to the DataGrid control, including how to format the output, and how to handle master/detail relationships. After completing this session, you should be
able to understand how the DataGrid control can be used to eliminate much of the common scripting you did in ASP to handle the display of data in tables.
DataGrid Control Basics
ASP developers commonly face the problem of how to display a set of data in a table format. In ASP, you would typically open a RecordSet object and then use Response.Write to display the results in a dynamically generated table. In ASP.NET this task can be greatly simplified through the use of the DataGrid control.
Binding a set of data to a DataGrid control
In Listing 23-1, we have implemented a DataGrid by simply using the code:
<asp:datagrid id=”datagrid” runat=”server” />
234 |
Sunday Morning |
Next, we created a function BindData()that opens a connection to the Pubs database, selects all the records in the titles table, and then fills a DataSet object with the results. Finally, we use the datagrid.databind() method to execute the binding. This binds the dataset to the DataGrid control. The DataGrid control handles all of the effort associated with formatting the results into a table and displaying the resulting output.
Listing 23-1 Binding a Dataset to a DataGrid control
<%@ Import Namespace=”System.Data.OleDb” %> <%@ Import Namespace=”system.data” %>
<%@ Page Language=”VB” Debug=”False” Trace=”False”%> <HTML>
<SCRIPT LANGUAGE=”vb” RUNAT=”server”> DIM oConn as OleDbConnection
DIM oCmd as OleDbDataAdapter DIM oDS as new dataset
public sub page_load(sender as object,e as eventargs) if page.ispostback=false then
BindData() end if
end sub
Function BindData()
oConn=new OleDbConnection(“provider=sqloledb;Data Source=(local);Initial
Catalog=pubs;User ID=sa;pwd=;”)
oCmd=new OleDbDataAdapter(“select * from titles”,oConn)
oCmd.Fill(oDS,”titles”)
datagrid.datasource=oDS.tables(“titles”).defaultview
datagrid.databind()
End Function
</SCRIPT>
<BODY>
<FORM ID=”form1” RUNAT=”server”> <ASP:DATAGRID
ID=”datagrid”
RUNAT=”server”
AUTOGENERATECOLUMNS=”True”
DATAKEYFIELD=”title_id”> </ASP:DATAGRID>
</FORM>
</BODY>
</HTML>
The AutoGenerateColumns property is what automatically generates the columns for the resulting dataset. The DataKeyField property specifies what data field should be used as a primary key for the table. This will be important later when we discuss editing and updating data with the DataGrid control. In this scenario, we did not have much control over which columns were displayed or how the output of the columns was formatted, it is clear that a lot of custom code can be eliminated through the use of the DataGrid control. In the next section we show how to overcome these issues.
Session 23—Using the DataGrid Control with Bound Data |
235 |
Formatting the output of a DataGrid control
In the previous section, we let the DataGrid control handle all of the output properties by setting the AutoGenerateColumns attribute to True. In Listing 23-2, we have set this attribute to False and have instead used the Columns property combined with the ASP.NET BoundColumn control to select what fields are displayed and how they are formatted.
Listing 23-2 Using the BoundColumn control and DataFormatString with the DataGrid control
<ASP:DATAGRID ID=”datagrid” RUNAT=”server” AUTOGENERATECOLUMNS=”False” DATAKEYFIELD=”title_id”>
<COLUMNS>
<ASP:BOUNDCOLUMN HEADERTEXT=”YTD Sales” DATAFIELD=”ytd_sales” READONLY=”true” DATAFORMATSTRING=”{0:C}”>
</ASP:BOUNDCOLUMN>
</COLUMNS>
<ALTERNATINGITEMSTYLE BACKCOLOR=”Gainsboro” /> <FOOTERSTYLE FORECOLOR=”White” BACKCOLOR=”Silver” /> <ITEMSTYLE BACKCOLOR=”White” />
<HEADERSTYLE FONT-BOLD=”True” FORECOLOR=”White” BACKCOLOR=”Navy” /> </ASP:DATAGRID>
The DataField property determines what field in the dataset is displayed in the resulting output. In this case, we will display the ytd_sales field. Additionally, we have specified a specific formatting style for this data by using the DataFormatString property. The value for this property, {0:c}, will format the resulting output in the currency of the end user’s locale.
The data format string consists of two parts separated by a colon in the form of {X:Yxx}, where X specifies the parameter number in a zero-based list of parameters. This value can only be 0 because there is only one value in each cell. Y specifies the format to display the value as shown in Table 23-1.
Table 23-1 Formatting Styles Applied by the DataFormatString property
Format Character |
Description |
C |
Displays numeric values in currency format. |
|
|
D |
Displays numeric values in decimal format. |
|
|
E |
Displays numeric values in scientific (exponential) format. |
|
|
F |
Displays numeric values in fixed format. |
|
|
G |
Displays numeric values in general format. |
|
|
N |
Displays numeric values in number format. |
|
|
X |
Displays numeric values in hexadecimal format. |
|
|