473,832 Members | 2,203 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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 EditItemTemplat e, 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.as px.vb"
Inherits="Main" %>

<html>
<head>
<title>DataLi st 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:unde rline; }
a:hover { text-decoration:unde rline; color:#4A3C8C; }
</style>
</head>
<body>
<form runat="server" ID="Form1">
<div align="center">
<h3>Customers Table</h3>
</div>
<asp:DataList id="dtlcustomer s"
runat="server"
width="760"
BorderWidth="1"
HeaderStyle-CssClass="custo mersHead"
AlternatingItem Style-BackColor="#DED FDE"
Font-Size="10"
Align="Center"
OnEditCommand=" dtlcustomers_Ed it"
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="customer sHead">
<h3><%# DataBinder.Eval (Container.Data Item, "CompanyNam e")
</h3>

</td>
</tr>
<tr>
<td Width="100%" Align="left" colspan="4">
<asp:button id="btnEdit" Runat="server" CommandName="ed it"
Text="Edit" />
</td>
</tr>
<tr>
<td Width="25%" Align="left">
<b>Contact Name</b>
</td>
<td Width="25%" Align="left">
<%# DataBinder.Eval (Container.Data Item, "ContactNam e") %>
</td>
<td Width="25%" Align="left">
<b>Contact Title</b>
</td>
<td Width="25%" Align="left">
<%# DataBinder.Eval (Container.Data Item, "ContactTit le") %>
</td>
</tr>
<tr>
<td Width="25%" Align="left">
<b>Address</b>
</td>
<td Width="25%" Align="left">
<%# DataBinder.Eval (Container.Data Item, "Address") %>
</td>
<td Width="25%" Align="left">
<b>City</b>
</td>
<td width="25%" align="left">
<%# DataBinder.Eval (Container.Data Item, "City") %>
</td>
</tr>
<tr>
<td Width="25%" Align="left">
<b>Postal Code</b>
</td>
<td Width="25%" Align="left">
<%# DataBinder.Eval (Container.Data Item, "PostalCode ") %>
</td>
<td Width="25%" Align="left">
<b>Country</b>
</td>
<td width="25%" align="left">
<%# DataBinder.Eval (Container.Data Item, "Country") %>
</td>
</tr>
<tr>
<td Width="25%" Align="left">
<b>Phone</b>
</td>
<td Width="25%" Align="left">
<%# DataBinder.Eval (Container.Data Item, "Phone") %>>
</td>
<td Width="25%" Align="left">
<b>Fax</b>
</td>
<td width="25%" align="left">
<%# DataBinder.Eval (Container.Data Item, "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 EditItemTemplat e 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
EditItemTemplat es 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.

<EditItemTempla te>
<table cellpadding="2" cellspacing="0" width="100%">
<tr>
<td colspan="2" class="customer sHead">
<h3><%# DataBinder.Eval (Container.Data Item, "CompanyNam e")
%></h3>
</td>
</tr>
<tr>
<td Width="50%" Align="Left">
<b>Company Name</b>
</td>
<td Width="50%" Align="left">
<asp:TextBox id="txtCompanyN ame" runat="server"
MaxLength="40" Columns="40"
Text='<%# DataBinder.Eval (Container.Data Item, "CompanyNam e")
%>'/>
</td>
</tr>
<tr>
<td Width="50%" Align="Left">
<b>Contact Name</b>
</td>
<td Width="50%" Align="left">
<asp:TextBox id="txtContactN ame" Runat="server"
MaxLength="30" Columns="30"
Text='<%# DataBinder.Eval (Container.Data Item, "ContactNam e")
%>'/>
</td>
</tr>
<tr>
<td Width="50%" Align="Left">
<b>Contact Title</b>
</td>
<td Width="50%" Align="left">
<asp:TextBox id="txtContactT itle" Runat="server"
MaxLength="30" Columns="30"
Text='<%# DataBinder.Eval (Container.Data Item,
"ContactTit le") %>'/>
</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.Data Item, "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.Data Item, "City") %>'/>
</td>
</tr>
<tr>
<td Width="50%" Align="Left">
<b>Postal Code</b>
</td>
<td Width="50%" Align="left">
<asp:TextBox id="txtPostalCo de" Runat="server"
MaxLength="10" Columns="10"
Text='<%# DataBinder.Eval (Container.Data Item, "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.Data Item, "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.Data Item, "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.Data Item, "Fax") %>'/>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label id="lblCustomer ID" runat="server"
Text='<%# DataBinder.Eval (Container.Data Item, "CustomerID ")
%>'
Visible="false" />
</td>
</tr>
<tr>
<td Width="50%" Align="right">
<asp:Button id="btnUpdate" Runat="server"
CommandName="up date" Text="Update" />
<asp:Button id="btnCancel" Runat="server"
CommandName="ca ncel" Text="Cancel" />
</td>
<td Width="50%" Align="Left">

</td>
</tr>
</table>
</EditItemTemplat e>
</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 3120

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

Similar topics

0
445
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
4733
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 != null) { Trace.Write(e.Item.ItemType.ToString(), "---with data"); } else { Trace.Write(e.Item.ItemType.ToString(), "---without data"); }
0
1769
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 Private strConn As String =
2
527
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 trying to use the FindControl method inside the ItemCommand event of the DataList to get the contents of the Label below, but it appears that the DataBinder code is making it a child control of the lblInstructorEmplidDisplayed control, rather than...
8
7438
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 the text boxes in the EditItemTemplate. I have set the EditItemIndex for the Datalist to -1, and then bound the Datalist. I then want to Bind the DropDown, and populate the values. All attempts to use FindControl on the control return "Nothing"
10
2862
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 have to add a datalist control. Using this datalist control I should be able to add edit, modify and cancel the items listed in this control. Here is how I designed. I used placeholder to add the controls dynamically to the page on the click...
2
5523
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" TextMode="MultiLine"></asp:TextBox> </ItemTemplate> </asp:datalist> <asp:button id="EditCommentButton" Text="Edit Comment" Runat="server"></asp:button
3
10307
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 (where is the child DataList).... But in case I want to make Edit in this child DataList it is not working... No edit template showed... :( this is a code that i use for the child DataList... Edit command // this is for child DataList...
0
1919
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 that the controls are loaded/unloaded based on the SelectionChanged event for the tab strip and again in Page load because with a dynamic load viewstate has to be reloaded. I have a datalist in the user control and I am trying to create the...
0
9795
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
10498
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10540
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
10212
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9319
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7753
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5623
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
4421
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
3077
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.