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

Popular posts from this blog

Migrating database from ASP.NET Identity to ASP.NET Core Identity

Customize User's Profile in ASP.NET Identity System