Share via

Format, DataGrid Properties Dialog Box

  • Article

The Formattab of the DataGrid Properties dialog box allows you to set the font and color of text in the grid. You can specify options for the grid as a whole or for individual portions of the grid, such as the header, footer, and item types.

Note

ASP.NET version 2.0 comes with a new server control, GridView, with more features than the DataGrid control. For more information, see Comparing the GridView and DataGrid Web Server Controls.

To access this dialog box

  1. In Microsoft Visual Web Developer, open or create an .aspx page.

  2. In Source view, add a DataGrid control to the page in the <form> element. Your code might look like the following:

    <form id="form1" runat="server">
    <div>
    <asp:DataGrid ID="DataGrid1" runat="server"></asp:DataGrid>
    </div>
</form>

  3. Switch to Design view.

  4. Right-click the DataGrid control and click Show Smart Tag.

    The DataGrid Tasks window opens.

  5. Click Property Builder.

    The DataGrid Properties dialog box opens.

  6. Click the Format tab.

Tasks

UI Elements

Objects

The Objects tree displays a list of elements that you can set options for by selecting settings in the Appearance pane.

  • DataGrid
    Sets formatting options for the DataGrid control. Options you set for other elements override the settings for the list as a whole.

  • Header
    Sets the formatting of text in the header -- for example, in a HeaderStyle element.

  • Footer
    Sets the formatting of text in the footer -- for example, in a FooterStyle element.

  • Pager
    Sets the formatting of text in a pager cell that appears if you enable paging in the Paging tab.

  • Items
    Expands to show the following child items. Select any one to set font and color options for just that item.

    Item

    Description

    Normal Items

    Sets the formatting of text in all the rows in the DataGrid control, unless there are different formatting settings set for Alternating Items.

    Alternating Items

    Sets the formatting of text in alternating rows, starting with the second row.

    Selected Items

    Sets the formatting for a row that is selected when the application is running on the client.

    Edit Mode Items

    Sets the formatting for a row that is in edit mode on the client.

  • Columns
    Sets formatting options for any columns that you added to the DataGrid control using the Columns tab.

Appearance

The Appearance pane displays a list of settings that you can set for any of the elements listed in the Objects tree.

  • Fore color
    The text color. Click the ellipsis button ( VisualStudioEllipsesButton screenshot ) to display the Color Picker dialog box.

    Note

    Not all color choices displayed in the Color Picker dialog box tabs are supported in all browsers. For example, named colors beyond the basic colors are not supported in older browsers.

  • Back color
    The color behind the text. Click the ellipsis button ( VisualStudioEllipsesButton screenshot) to display the Color Picker dialog box.

    Note

    Not all color choices displayed in the Color Picker dialog box tabs are supported in all browsers. For example, named colors beyond the basic colors are not supported in older browsers.

  • Font name
    The name of the font used to display text. The drop-down list displays the names of fonts available on the computer you are using. Using the drop-down list, you can select a single font name. To specify multiple font names, enter additional font names into the Font box, separating each name with a comma. The additional names do not have to represent fonts available on your system.

    Note

    It is best to select font names that are commonly available to users. It is recommended that you provide multiple font names, in order of preference, that cover the possibilities available to your users. For example, you might enter "Verdana,Arial,Helvetica" to specify various possibilities for a non-serif font.

  • Font size
    The text size, in units that you specify, or a named size such as "small." Select a named size or select Custom, the size, and then the units. For details about units, search for "CSS Length Units Reference" in the MSDN Library.

    Note

    Select a font size unit appropriate to the browsers you are targeting. For example, older browsers do not allow you to specify absolute font sizes such as points or pixels. Even if you are targeting a browser that supports absolute sizes, it is a good idea to choose a relative size such as ems. This permits the user to resize the text according to personal preference.

  • Bold, Italic, Underline, Strikeout, Overline
    Options for formatting text. The options provided as check boxes are supported in all browsers.

  • Horizontal alignment
    How the content of an item or column is horizontally aligned within the grid (left, right, centered, or justified).

  • Vertical alignment
    Where the content of an item or column appears within a cell (top, bottom, or middle). This option is not available when you are setting options for the entire grid.

  • Wrap text within cell
    Specifies that the contents of a cell should wrap rather than being truncated.

See Also

Concepts

Comparing the GridView and DataGrid Web Server Controls