ADO.NET 101: Data Rendering with a DataList Control Introduction - Designing the ItemTemplate
(Page 4 of 5 )
ItemTemplate is an item that must be configured. The actual table cells in this template are shown in the html. This would appear to be similar to what you would have needed to bring the recordset values into a table cell using the ASP syntax <%...%>, enclosing the databound information. In this case however, you have Framework supported classes making this possible.
<ItemTemplate>
<tr>
<td>
<%#DataBinder.Eval(Container,"DataItem.fname")%>
</td>
<td>
<%#DataBinder.Eval(Container,"DataItem.lname")%>
</td>
<td>
<%#DataBinder.Eval(Container,"DataItem.emp_id")%>
</td>
<td>
<%#DataBinder.Eval(Container,"DataItem.hire_date")%>
</td>
</tr>
</ItemTemplate>
DataBinder is from the System.Web.UI.DataBinder class and Eval () is the method which takes the following arguments: the first argument is the Object container and the second a string expression. Each of these string expressions is coming from the data source's fields.
At this point the program has enough information to display the data in the DataReader. The UI would appear as follows:
The HeaderTemplate
The HeaderTemplate would normally be used for displaying the column headings in a readable text format. In this case fname would be substituted with First Name in the header template. The following picture shows how you may change the style of the various templates, and their individual properties of the DataList. The following HTML elements were added to produce the header information. In the UI the style of the header was slightly modified as shown.
<HeaderTemplate>
<table>
<tr bgcolor="#ffffcc" style="COLOR: #0033cc>
<td>First Name</td>
<td>Last Name</td>
<td>Employee ID</td>
<td>Hire Date</td>
</tr>
</HeaderTemplate>
The AlternatingItemTemplate
As mentioned earlier, this is optional and is rendered in display only when defined in the source. The following html shows how this is formatted. It is the same as the ItemTemplate, except that the cell color is different. The ItemTemplate cells are also formatted so that there is a distinction between ItemTemplate and the AlternatingItemTemplate.
<tr>
<td bgcolor="#ffcccc" align="left">
<%#DataBinder.Eval(Container,"DataItem.fname")%>
</td>
<td bgcolor="#ffcccc" align="left">
<%#DataBinder.Eval(Container,"DataItem.lname")%>
</td>
<td bgcolor="#ffcccc" align="left">
<%#DataBinder.Eval(Container,"DataItem.emp_id")%>
</td>
<td bgcolor="#ffcccc" align="left">
<%#DataBinder.Eval(Container,"DataItem.hire_date")%>
</td>
</tr>
The FooterTemplate
The footer template was not defined in this tutorial. In this section one may insert some aggregate information, or some date information.
Next: Displayed data from DataReader >>
More Database Articles
More By Jayaram Krishnaswamy
