473,326 Members | 2,133 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

Use the DataList Control to Present and Edit Data

Interested in more .NET stuff visit www.dedicatedsolutions.co.uk

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).
Nov 18 '05 #1
0 3067

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
by: Alex | last post by:
I found some good information On "Use the DataList Control to Present and Edit Data" at this site http://www.dedicatedsolutions.co.uk/DesktopDefault.aspx?tabid=62 It is worth the click
3
by: Hardy Wang | last post by:
Hi all; I have a DataList with ItemCreated event like below: private void myList_ItemCreated(object sender , DataListItemEventArgs e) { DataRowView myRowView; DataRow myRow; if (e.Item.DataItem...
0
by: Alex | last post by:
Imports System Imports System.Data Imports System.Data.SqlClient Imports System.Web.UI Imports System.Web.UI.WebControls Imports System.Configuration Public Class Main : Inherits Page ...
2
by: Mark | last post by:
I have a datalist (see code below). Assume that the datalist is populated with 10 records of data. How do I programatically grab all the data in ALL the columns of the selected record? I've been...
8
by: Adam Billmeier | last post by:
Problem: I am trying to use FindControl to grab a dropdownlist that is in the EditItemTemplate of a Datalist and then Bind it to a dataset. I also then need to put the correct values in all of...
10
by: Bharat | last post by:
Hi Folks, Suppose I have two link button on a page (say lnkBtn1 and lnkBtn2). On the click event of the lnkbtn1 I have to add a dynamically created control. And On the click event of the lnkBtn2 I...
2
by: donnet | last post by:
Inside my .aspx file, I have a textbox populated with data from a dataset like this: <asp:TextBox text='<%# DataBinder.Eval(Container.DataItem, "Comment")%>' id="CommentText" runat="server"...
3
by: Mirek Endys | last post by:
I have DataList as part of DataList item. DataList in DataList. The parent DataList working well including Edit command, that shows Edit template and correctly bind the data into edit template...
0
by: =?Utf-8?B?Y2luZHk=?= | last post by:
I have am dynamically loading a web user control based on the click of a tab strip I load the default control for the first tab in the page load event after checking page is not postback. After...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.