DetailsView Control in ASP.NET - Part 11
Introduction
In Part 10 of this article series we have discussed how to work with DetailsView Control Events. Now in
this article we will discuss how to Format DetailsView Control
like by adding header, footer, CSS and many more features.
Formatting DetailsView Control
The DetailsView control
includes an abundance of properties for formatting the control. I recommend
that you format the DetailsViewcontrol by taking advantage of Cascading Style
Sheets (CSS) because it will let DetailsView Control
look very cool. All the following properties expose a Style object that
includes a CssClass property:
· CssClass: Enables
us to associate a style sheet class with the DetailsView control.
· AlternatingRowStyle: Represents
every other row rendered by the DetailsView control.
· CommandRowStyle: Represents
the row that contains the edit buttons.
· EditRowStyle: Represents
rows when the DetailsView control
is in Edit mode.
· EmptyDataRowStyle: Represents
the row displayed when the data source does not return any data items.
· FieldHeaderStyle: Represents
the cell displayed for the field labels.
· FooterStyle: Represents
the footer row.
· HeaderStyle: Represents
the header row.
· InsertRowStyle: Represents
rows when the DetailsView control
is in Insert mode.
· PagerStyle: Represents
the row or rows that display the paging user interface.
· RowStyle: Represents
the rows displayed by the DetailsView control.
Furthermore, we can take advantage of the
following properties when formatting a DetailsView control:
· GridLines: Enables
us to specify the appearance of the rules that appear around the cells of the
table rendered by aDetailsView control. Possible values are None, Horizontal, Vertical, and
Both.
· HeaderText: Enables
us to specify text that appears in the header of the DetailsView control.
· FooterText: Enables
us to specify text that appears in the footer of the DetailsView control.
The page given below uses several of these properties to format
a DetailsView control.
<%@ 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">
.books td,.books th
{
padding:10px;
}
.books
{
border:double 4px black;
}
.header
{
letter-spacing:8px;
font:bold 16px Arial,Sans-Serif;
background-color:silver;
}
.fieldHeader
{
font-weight:bold;
}
.alternating
{
background-color:#eeeeee;
}
.command
{
background-color:silver;
}
.command a
{
color:black;
background-color:#eeeeee;
font:14px Arials,Sans-Serif;
text-decoration:none;
padding:3px;
border:solid 1px black;
}
.command a:hover
{
background-color:yellow;
}
.pager td
{
padding:2px;
}
</style>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DetailsView
id="dtlBooks"
DataSourceID="SqlDataSource1"
AutoGenerateInsertButton="true"
AllowPaging="true"
GridLines="None"
HeaderText="Book Details"
CssClass="books"
HeaderStyle-CssClass="header"
FieldHeaderStyle-CssClass="fieldHeader"
AlternatingRowStyle-CssClass="alternating"
CommandRowStyle-CssClass="command"
PagerStyle-CssClass="pager"
Runat="server" />
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:DatabaseConnectionString1 %>"
InsertCommand="INSERT INTO
BOOK_LIST(ID, TITLE, AUTHOR, PRICE) VALUES (@ID, @TITLE, @AUTHOR, @PRICE)"
ProviderName="<%$ ConnectionStrings:DatabaseConnectionString1.ProviderName %>"
SelectCommand="SELECT [ID], [TITLE],
[AUTHOR], [PRICE] FROM [BOOK_LIST]">
</asp:SqlDataSource>
</div>
</form>
</body>
</html>
It is always very good to use CSS in such controls because it
not only look cool it also work fine with at-least every browsers.
Note: This is
my last article of this series. Please do read all parts for complete
understanding.
Comments
Post a Comment