Post
Ask Question

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 a DataList Control but now in this article we will discuss how to format the DataList Control to look better and to use CSS better too.

Formatting DataList Control

The 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 various 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 to take advantage of several of these formatting properties.

Formating-data-in-datalist-in-vb.net.gif

 <%@ 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 the above example, we have used a substantial amount of CSS to improve the presentation of the DataList Control. 

Note: This is the last part of the DataList Control article series. Please do read all parts for a complete understanding.

HAVE A GREAT CODING!


Similar Articles