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

Popular posts from this blog

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

Image
As you know ASP.NET Core Identity (table structure) is different from what we had earlier in ASP.NET Identity. Actually the identity system which we have today with .NET Core is very mature and continuously evolved be it ASP.NET Membership, ASP.NET Identity 1, ASP.NET Identity 2 and now ASP.NET Core Identity. Recently I had to migrate few application to ASP.NET Core and similar its identity database. Because the table schema is changed, i had to re-think and create migration script which I would like to share with you today. It is very simple and easy, just three step and I had everything ready: STEP 1 : Change name of existing tables STEP 2 : Create ASP.NET Core Identity tables STEP 3 : Migrate data from old tables (ASP.NET Identity) to new tables (ASP.NET Core Identity) Script:  https://gist.github.com/itorian/c699e8534b392a6c726ec66c48100072 You should also watch my video, where I demoed migration.
Read More »

Customize User's Profile in ASP.NET Identity System

Image
Note: You should read this post instead, I found below walkthrough will not work on ASP.NET Identity 2. I will re-work on this post soon. In this post you will learn how to customize User’s Profile and add some more fields like FirstName, LastName, EmailID etc with ASP.NET Identity System. In my last post I listed some of the great new features introduced with Identity system .
Read More »

Lambda two tables and three tables inner join code samples

In this blog post you will learn inner join using lambda queries. There will be two samples, in first sample you will see how you can join two tables and in second sample you will see how you can extend even further to join three tables and so on. I will sample in-memory data, but the same implementation will work with IQueryable (lazy query) too. Here's the code snippet:- namespace ConsoleApp1 {     class Program     {         static void Main()         {             var table1 = new List<Table1>();             table1.Add( new Table1 { Id = 1, Name = "Name 1" , Address = "Address 1" });             table1.Add( new Table1 { Id = 2, Name = "Name 2" , Address = "Address 2" });             table1.Add( new Table1 { Id = 3, Name = "Name 3" , Address = "Address 3" });             table1.Add( new Table1 { Id = 4, Name = "Name 4" , Address = "Address 4" });   
Read More »