DataList Control in ASP.NET - Part 6
Introduction
In Part 5 of
this article series we have discussed how to Edit and Delete Data with DataList Control
but now in this article we will discuss how Format the DataList Control
to look better and better using CSS too.
Formatting DataList Control
DataList Control includes a rich set of properties that we
can use to format the HTML rendered by the control. If we want to associate
Cascading Style Sheet rules with different elements of the DataList, then
we can take advantage of any of the following properties:
- CssClass: It enables us to
associate a CSS class with the DataList.
- AlternatingItemStyle: It enables
us to format every other row of the DataList.
- EditItemStyle: It enables us to
format the DataList row selected for editing.
- FooterStyle: It enables us to
format the footer row of the DataList.
- HeaderStyle: It enables us to
format the header row of the DataList.
- ItemStyle: It enables us to format each row
displayed by the DataList.
- SelectedItemStyle: It enables us
to format the selected row in the DataList.
- SeparatorStyle: It enables us to
format the row separator displayed by the DataList.
When formatting the DataList, we also need to work with the
following properties:
- GridLines: It enables us to add
rules around the cells in the DataList. Possible values are None, Horizontal, Vertical,
and Both.
- ShowFooter: It enables us to show
or hide the footer row.
- ShowHeader: It enables us to show
or hide the header row.
- UseAccessibleHeader: It enables us
to render HTML <th> tags instead of <td> tags
for the cells in the header row.
The page given below illustrates
how we can take advantage of several of these formatting properties.
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<style type="text/css">
html
{
background-color:Silver;
}
.books
{
font:14px Arial,Sans-Serif;
}
.header
{
font-size:18px;
letter-spacing:15px;
}
.item
{
padding:5px;
background-color:Aqua;
border-bottom:Solid 1px blue;
}
.alternating
{
padding:5px;
background-color:#FEFEFE;
border-bottom:Solid 1px blue;
}
</style>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DataList
id="dlstBooks"
DataSourceID="SqlDataSource1"
UseAccessibleHeader="true"
CssClass="books"
HeaderStyle-CssClass="header"
ItemStyle-CssClass="item"
AlternatingItemStyle-CssClass="alternating"
Runat="server">
<HeaderTemplate>
Book
List
</HeaderTemplate>
<ItemTemplate>
<%#Eval("NAME")%>
</ItemTemplate>
</asp:DataList>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:DatabaseConnectionString1 %>"
ProviderName="<%$ ConnectionStrings:DatabaseConnectionString1.ProviderName %>"
SelectCommand="SELECT [NAME] FROM
[BOOKS]">
</asp:SqlDataSource>
</div>
</form>
</body>
</html>
In above example, we have used lots of CSS to improve the
presentation of DataList Control.
Comments
Post a Comment