The DataList is not as powerful as the DataGrid. It requires more work
from you since it has no default data presentation format. However,
the DataGrid begins to get very cumbersome as the number of columns of
data you present increases. Anything more than half a dozen columns or
so and you probably induce horizontal scrolling - a real no-no for me.
If you put such a DataGrid into edit mode then you really have a
horizontal scrolling problem.
The DataList, with its ItemTemplate and EditItemTemplate, make it very
easy for you to control the appearance (and screen real estate) of the
data. As I said before, it requires more coding but the results may
well be worth the effort.
In this article and example program we will deal with the Northwind
Customers table. I have included nine columns of editable data. I have
divided the work between an aspx page and a code-behind page. In the
aspx page we layout our presentation of data, while the code-behind
file places the DataList in edit mode, and handles the updating of
modified data. The aspx file will be shown below in several sections
to make it easier to explain what each section does. This first
section is the usual top-of-page "stuff" and the definition of the
DataList Control. The only items of note are that we have set the
OnEditCommand, OnUpdateCommand, and OnCancelCommand properties to the
names of the corresponding event handlers which are defined in the
code-behind file.
<%@ Page Language="vb"
Src="/Portals/57ad7180-c5e7-49f5-b282-c6475cdb7ee7/DataListEdit.aspx.vb"
Inherits="Main" %>
<html>
<head>
<title>DataList Edit</title>
<style rel="stylesheet">
.customers { font: 9pt Verdana, Arial, sans-serif; }
.customersHead { font: bold 8pt Verdana, Arial, sans-serif;
background-color:#4A3C8C; color:white; }
a { text-decoration:underline; }
a:hover { text-decoration:underline; color:#4A3C8C; }
</style>
</head>
<body>
<form runat="server" ID="Form1">
<div align="center">
<h3>Customers Table</h3>
</div>
<asp:DataList id="dtlcustomers"
runat="server"
width="760"
BorderWidth="1"
HeaderStyle-CssClass="customersHead"
AlternatingItemStyle-BackColor="#DEDFDE"
Font-Size="10"
Align="Center"
OnEditCommand="dtlcustomers_Edit"
OnUpdateCommand="dtlcustomers_Update"
OnCancelCommand="dtlcustomers_Cancel">
The following section includes the ItemTemplate for presentation of
our data. The code (markup) is fairly long, but all we are doing is
creating an html table to present the data. The CompanyName column is
shown in a TD element of its own. The rest of the data and column
descriptions are show two columns abreast. Notice that we are
specifically naming the column headings in one TD element and using
the Eval method of the DataBinder class to obtain the actual database
table data. We are also using a Button control to induce edit mode in
the code-behind file. You can use a LinkButton if you prefer a textual
presentation. This may look a little messy at first, but if you run
the program (from the link at the bottom of the article) and compare
the output to what you see below, I belive you find it very straight
forward.
<ItemTemplate>
<table cellpadding="2" cellspacing="0" width="100%">
<tr>
<td colspan="4" class="customersHead">
<h3><%# DataBinder.Eval(Container.DataItem, "CompanyName")
</h3>
</td>
</tr>
<tr>
<td Width="100%" Align="left" colspan="4">
<asp:button id="btnEdit" Runat="server" CommandName="edit"
Text="Edit" />
</td>
</tr>
<tr>
<td Width="25%" Align="left">
<b>Contact Name</b>
</td>
<td Width="25%" Align="left">
<%# DataBinder.Eval(Container.DataItem, "ContactName") %>
</td>
<td Width="25%" Align="left">
<b>Contact Title</b>
</td>
<td Width="25%" Align="left">
<%# DataBinder.Eval(Container.DataItem, "ContactTitle") %>
</td>
</tr>
<tr>
<td Width="25%" Align="left">
<b>Address</b>
</td>
<td Width="25%" Align="left">
<%# DataBinder.Eval(Container.DataItem, "Address") %>
</td>
<td Width="25%" Align="left">
<b>City</b>
</td>
<td width="25%" align="left">
<%# DataBinder.Eval(Container.DataItem, "City") %>
</td>
</tr>
<tr>
<td Width="25%" Align="left">
<b>Postal Code</b>
</td>
<td Width="25%" Align="left">
<%# DataBinder.Eval(Container.DataItem, "PostalCode") %>
</td>
<td Width="25%" Align="left">
<b>Country</b>
</td>
<td width="25%" align="left">
<%# DataBinder.Eval(Container.DataItem, "Country") %>
</td>
</tr>
<tr>
<td Width="25%" Align="left">
<b>Phone</b>
</td>
<td Width="25%" Align="left">
<%# DataBinder.Eval(Container.DataItem, "Phone") %>>
</td>
<td Width="25%" Align="left">
<b>Fax</b>
</td>
<td width="25%" align="left">
<%# DataBinder.Eval(Container.DataItem, "Fax") %>
</td>
</tr>
</Table>
</ItemTemplate>
Next we must decide how our data and column descriptions are to appear
while in edit mode. That is the purpose of the markup below following
the EditItemTemplate tag. The process is much the same as in the
ItemTemplate section above. The main difference is that we are
creating TextBox controls to contain the actual data, so that the data
becomes editable. I also chose to present the column descriptions and
data one abreast rather than two abreast as above. I did this for two
reasons. One was just to show that the ItemTemplate and
EditItemTemplates stand alone and do not have to have the same
presentation format, and to make more room for several of the
TextBoxes that can hold 30 - 40 characters of data. Again, once you
run the program you will see the difference in presentation.
<EditItemTemplate>
<table cellpadding="2" cellspacing="0" width="100%">
<tr>
<td colspan="2" class="customersHead">
<h3><%# DataBinder.Eval(Container.DataItem, "CompanyName")
%></h3>
</td>
</tr>
<tr>
<td Width="50%" Align="Left">
<b>Company Name</b>
</td>
<td Width="50%" Align="left">
<asp:TextBox id="txtCompanyName" runat="server"
MaxLength="40" Columns="40"
Text='<%# DataBinder.Eval(Container.DataItem, "CompanyName")
%>'/>
</td>
</tr>
<tr>
<td Width="50%" Align="Left">
<b>Contact Name</b>
</td>
<td Width="50%" Align="left">
<asp:TextBox id="txtContactName" Runat="server"
MaxLength="30" Columns="30"
Text='<%# DataBinder.Eval(Container.DataItem, "ContactName")
%>'/>
</td>
</tr>
<tr>
<td Width="50%" Align="Left">
<b>Contact Title</b>
</td>
<td Width="50%" Align="left">
<asp:TextBox id="txtContactTitle" Runat="server"
MaxLength="30" Columns="30"
Text='<%# DataBinder.Eval(Container.DataItem,
"ContactTitle") %>'/>
</td>
</tr>
<tr>
<td Width="50%" Align="Left">
<b>Address</b>
</td>
<td Width="50%" Align="left">
<asp:TextBox id="txtAddress" Runat="server" MaxLength="60"
Columns="60"
Text='<%# DataBinder.Eval(Container.DataItem, "Address")
%>'/>
</td>
</tr>
<tr>
<td Width="50%" Align="Left">
<b>City</b>
</td>
<td Width="50%" Align="left">
<asp:TextBox id="txtCity" Runat="server" MaxLength="15"
Columns="15"
Text='<%# DataBinder.Eval(Container.DataItem, "City") %>'/>
</td>
</tr>
<tr>
<td Width="50%" Align="Left">
<b>Postal Code</b>
</td>
<td Width="50%" Align="left">
<asp:TextBox id="txtPostalCode" Runat="server"
MaxLength="10" Columns="10"
Text='<%# DataBinder.Eval(Container.DataItem, "PostalCode")
%>'/>
</td>
</tr>
<tr>
<td Width="50%" Align="Left">
<b>Country</b>
</td>
<td Width="50%" Align="left">
<asp:TextBox id="txtCountry" Runat="server" MaxLength="15"
Columns="15"
Text='<%# DataBinder.Eval(Container.DataItem, "Country")
%>'/>
</td>
</tr>
<tr>
<td Width="50%" Align="Left">
<b>Phone</b>
</td>
<td Width="50%" Align="left">
<asp:TextBox id="txtPhone" Runat="server" MaxLength="24"
Columns="24"
Text='<%# DataBinder.Eval(Container.DataItem, "Phone") %>'/>
</td>
</tr>
<tr>
<td Width="50%" Align="Left">
<b>Fax</b>
</td>
<td Width="50%" Align="left">
<asp:TextBox id="txtFax" Runat="server" MaxLength="24"
Columns="24"
Text='<%# DataBinder.Eval(Container.DataItem, "Fax") %>'/>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label id="lblCustomerID" runat="server"
Text='<%# DataBinder.Eval(Container.DataItem, "CustomerID")
%>'
Visible="false" />
</td>
</tr>
<tr>
<td Width="50%" Align="right">
<asp:Button id="btnUpdate" Runat="server"
CommandName="update" Text="Update" />
<asp:Button id="btnCancel" Runat="server"
CommandName="cancel" Text="Cancel" />
</td>
<td Width="50%" Align="Left">
</td>
</tr>
</table>
</EditItemTemplate>
</asp:DataList>
</form>
</body>
</html>
Now for the code-behind file. We will also present this file in
sections to better illustrate and explain the code. First are the
Page_Load and BindTheData() subroutines. The Page_Load simply checks
to make sure this is the first time the page has been loaded and calls
the BindTheData subroutine. BindTheData uses a DataAdapter to obtain
the data from the table, fills a DataSet and binds the data to the
DataList control (dtlCustomers).
