Formatting DetailsView control with style properties

We can customize appearance of the DetailsView control using its style properties. Alternatively, we can also use CSS styles to provide styles to DetailsView control.

Using CSS styles, we can change the font family and font size of the TextBox controls in the DetailsView control.

When the DetailsView control is in the edit mode, we use editrowstyle property to change the background color, font family and font size of the editable text boxes.

While the DetailsView control is in the Insert mode, the InsertRowStyle property is used to change the background color, font family and font size of the text boxes.

To change the style or background color of default buttons, we use CommandRowStyle property.

If we create a button using a CommandField element in the DetailsView control, we use the ItemStyle-CssClass property of CommandField to style the button.

The following style properties are used to customize the DetailsView control as shown below.

HeaderStyle	-Style used for header row
RowStyle	-Style used to display rows 
CommandRowStyle	-Style used to display row that contains edit buttons 
FooterStyle	-Style used for footer row 
PagerStyle	-Style used to control the pager row appearance
EmptyDataRowStyle-Style used to display row when data source does
			not return data items
EditRowStyle	-Style used to display rows when the DetailsView is in Edit 		

The below code demonstrates how to use different style properties to customize the appearance of the DetailsView control.

<asp:DetailsView ID="DetailsView1" runat="Server" 
    ForeColor="#333333" 
    Width="60%"     DataSourceID="MyDataSource" 
    AllowPaging="True" AutoGenerateRows="False" 
    DataKeyNames="Code"   AutoGenerateDeleteButton="True" 
    AutoGenerateEditButton="True"  AutoGenerateInsertButton="True" >
        <FooterStyle Font-Bold="True" ForeColor="White" />
        <CommandRowStyle BackColor="Beige"    Font-Bold="True" />
        <EditRowStyle BackColor="BlueViolet" />
        <RowStyle BackColor="Chocolate"  ForeColor="Black" />
        <PagerStyle BackColor="Gold" ForeColor="White" HorizontalAlign="Center" />
        <FieldHeaderStyle BackColor="Aquamarine"  Font-Bold="True" />
        <HeaderStyle BackColor="AliceBlue" Font-Bold="True" />
        <AlternatingRowStyle BackColor="White" ForeColor="DarkGray" />
        <InsertRowStyle BackColor="DeepSkyBlue" Font-Bold="True" ForeColor="DeepPink" />
        <Fields>
            <asp:BoundField DataField="Code" HeaderText="Code" />
            <asp:BoundField DataField="Name" HeaderText="Name" />
            <asp:BoundField DataField="Description" HeaderText="Description" />
         </Fields>
    </asp:DetailsView>
<asp:SqlDataSource ID="MyDataSource"  ConnectionString="<%$Connectionstrings:ERPConnectionString%>"
SelectCommand="SELECT * FROM Sample" 
InsertCommand="Insert SAMPLE(Code,Name,Description) VALUES(@Code,@Name,@Description)"
runat="server"/>