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
No customers found

---

GridLines Variations

GridLines.Horizontal

Horizontal Lines Only

ID	Company

GridLines.Vertical

Vertical Lines Only

ID	Company

GridLines.None

No Grid Lines

ID	Company

---

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>