DataGrid Styles Example

Default | Auto-Generated Columns | Show/Hide Header | Styles

Style Sub-Components

This example shows ItemStyle, AlternatingItemStyle, HeaderStyle, and FooterStyle applied to a DataGrid.

Customer Directory
ID	Company	First Name	Last Name
1	Virus	John	Smith
2	Boring	Jose	Rodriguez
3	Fun Machines	Jason	Ramirez

GridLines Variations

GridLines.Horizontal

Horizontal Lines Only
ID	Company
1	Virus
2	Boring
3	Fun Machines

GridLines.Vertical

Vertical Lines Only
ID	Company
1	Virus
2	Boring
3	Fun Machines

GridLines.None

No Grid Lines
ID	Company
1	Virus
2	Boring
3	Fun Machines

Code:

<DataGrid ItemType="Customer"
          AutoGenerateColumns="false"
          Caption="Customer Directory"
          GridLines="GridLines.Both"
          UseAccessibleHeader="true"
          ShowFooter="true">
    <HeaderStyleContent>
        <DataGridHeaderStyle BackColor="WebColor.Navy" ForeColor="WebColor.White" Font-Bold="true" />
    </HeaderStyleContent>
    <ItemStyleContent>
        <DataGridItemStyle BackColor="WebColor.White" ForeColor="WebColor.Black" />
    </ItemStyleContent>
    <AlternatingItemStyleContent>
        <DataGridAlternatingItemStyle BackColor="WebColor.LightBlue" />
    </AlternatingItemStyleContent>
    <FooterStyleContent>
        <DataGridFooterStyle BackColor="WebColor.Navy" ForeColor="WebColor.White" />
    </FooterStyleContent>
    <Columns>
        <BoundField DataField="CustomerID" HeaderText="ID" />
        <BoundField DataField="CompanyName" HeaderText="Company" />
    </Columns>
</DataGrid>