Share via


Columns, DataGrid Properties Dialog Box

The Columns tab of the DataGrid Properties dialog box allows you to:

  • Specify which data columns appear in the grid.

  • Define columns for special functions such as editing and selecting items.

  • Define template columns.

  • Specify column-specific information for individual columns, such as a sort expression and command name.

  • Define the header and footer, contents, and data binding for each column in the grid.

After defining a column, you can set its properties. The options available on the Columns tab change according to what type of DataGrid column you are working with.

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 Columns tab.

Tasks

UI Elements

  • Create columns automatically at run time
    Specifies whether the grid, at run time, includes all the data fields from the data source to which it is bound. You cannot remove or format these columns.

    You can add columns, including both data-bound columns and button, hyperlink, and template columns, as described below in the "Column List" section. Any columns you add appear to the left of the columns generated automatically.

Column list

The column list allows you to specify what columns appear in the grid. You can add fields from the data source and various types of buttons.

To add a column, select the type of column under Available columns, and then click the Add button to add it to the Selected columns list. To specify the column's location in the grid, select it in the Selected columns list and then use the reorder buttons to move it. To remove a column from the grid, select it in the Selected columns list and then click the Delete button.

  • Available columns
    Lists all columns that the grid can display, divided into the following nodes:

    • Bound Column   Use to add individual data columns from those available in the data source selected on the General tab.

      If Create columns automatically at run time is selected, all columns in this node are displayed. To display only some columns, clear Create columns automatically at run time and add the data fields you want to use.

    • Button Column   Use to add columns that will contain buttons (command buttons or link buttons) that the user can click to perform specific actions for an individual item. Expand the Button Column node to add Select, Delete, or Edit buttons to the grid. To add a custom button (such as a button that says "Add to Shopping Cart"), select the Button Column node, click the Add button, and then format the custom button.

    • Hyperlink Column   Use to add a column that will contain a link to another page. The hyperlink column can contain static text or display a data column as a hyperlink.

    • Template Column   Use to create a column that contains any combination of HTML text and controls. Template columns allow you to include controls other than buttons (such as check boxes) in a DataGrid control.

  • Selected columns
    Displays a list of columns that you can customize. When you select a column in this list, the options below it in the dialog box change to reflect the settings you can customize for that column.

    If Create columns automatically at run time is selected, Selected columns displays a list of columns that will appear in addition to the columns generated automatically.

Column properties

  • Header text
    The text displayed at the top of the column. The header value can be set to any HTML text (including tags). You can specify the font and color of the header on the Format tab.

    The text you specify for the header becomes the identifier for the column in the Selected columns list.

    Headers are displayed only if the Show header check box is selected on the General tab.

  • Footer text
    The text displayed at the bottom of the column. By default, this is blank. The footer value can be set to any HTML text (including tags). You can specify the font and color of the header on the Format tab.

    Footers are displayed only if the Show footer check box is selected on the General tab.

  • Header image
    The URL of an image file that is displayed at the top of the column. If you specify both header text and a header image, the header image takes precedence.

  • Sort expression
    A string that is passed as a parameter when the SortCommand event is raised. Typically, you select the Allow sorting check box on the General tab, which causes the column headers to be rendered as LinkButton controls that raise the SortCommand event when clicked.

    For bound columns, the default sort expression is the name of the data field to which the column is bound. However, you can specify any string.

  • Visible
    Indicates whether the column is visible by default when the page runs. Clearing this check box allows you to define a column and specify its binding and formatting information, and then dynamically show and hide the column at run time.

BoundColumn properties

The options under BoundColumn properties are displayed if you select Bound Column from Available columns and click the arrow button to move it to Selected columns.

  • Data Field
    The name of the data field to which this column is bound. Read-only.

  • Data formatting expression
    A .NET Framework formatting expression that is applied to the data before it is displayed in the column. The expression consists of optional static text and a format specifier that takes the following form:

    {0:format specifier}
    

    The number in front of the colon (:) is a parameter index that indicates which data elements in the column to format; it is therefore usually zero to indicate the first (and only) element. Theformat specifierfollows the colon and consists of one or more letters that indicate how to format the data. The format-specifier characters you can use depend on what type of data you are formatting — dates, numbers, or other types. The following table shows examples of formatting expressions for different types of data. For more information about formatting expressions, see Formatting Types.

    Format expression

    Applied to this data type

    Description

    Price: {0:C}

    numeric/decimal

    Displays the literal string "Price:" followed by numbers in currency format. The currency format depends on the culture setting specified through the culture attribute on the @ Page directive or in the Web.config file.

    {0:D4}

    integer (Cannot be used with decimal numbers.)

    Integers are displayed in a zero-padded field four characters wide.

    {0:N2}%

    numeric

    Displays the number with 2-decimal-place precision, followed by the literal string "%".

    {0:000.0}

    numeric/decimal

    Numbers rounded to one decimal place. Numbers less than three digits are zero-padded.

    {0:D}

    date/datetime

    Long date format ("Thursday, August 06, 1996"). Date format depends on the culture setting of the page or the Web.config file.

    {0:d}

    date/datetime

    Short date format ("12/31/99").

    {0:yy-MM-dd}

    date/datetime

    Date in numeric year-month-day format (96-08-06).

  • Read only
    Indicates whether the data in this column will be displayed in an editable control when the item is put into edit mode.

ButtonColumn properties

The options under ButtonColumn properties are displayed if you select Button Column from Available columns and click the arrow button to move it to Selected columns.

  • Text
    The text (caption) of the buttons if the buttons have the same text for every item in the grid. For example, set the Text property if you are defining a button that displays the word "Select" for each item in the grid. If the Text field property is set, it overrides this property.

  • Command name
    The string that is passed with the ItemCommand event when users click the button.

  • Text field
    The data source field to be used as the source of the button caption. If you set both this property and the Text property, the Text field property takes precedence.

  • Button type
    The type of button to render — LinkButton or PushButton. The default is a LinkButton control.

  • Text format string
    A .NET Framework formatting expression that is applied to the button caption before the caption is displayed. This is useful if you are using the Text field property to set the button caption but the data is not in a suitable format for display. For details, see "BoundColumn properties," above.

EditCommandColumn properties

The options under EditButtonColumn properties are displayed if the selection in Selected columns is an Edit button column.

  • Edit text
    The string to display on the face of the Edit button.

  • Cancel text
    The string to display on the face of the Cancel button.

  • Update text
    The string to display on the face of the Update button.

  • Button type
    The type of button to render — LinkButton or PushButton. The default is a LinkButton control.

HyperLinkColumn properties

The options under HyperLinkColumn properties are displayed if you select HyperLink Column from Available columns and click the arrow button to move it to Selected columns.

  • Text
    The text of the hyperlink if the links have the same text for every item in the grid.

  • URL
    The URL of the page to go to. If URL field is set, it overrides this property.

  • Text field
    The data source field to be used as the source of the hyperlink text.

  • URL field
    The field or property of the object in DataSource that will provide the URL of the page to go to. This property overrides the URL setting.

  • Text format string
    A .NET Framework formatting specifier that is applied to the hyperlink before it is displayed. This is useful if you are using the Text field property to set the hyperlink text but the data is not in a suitable format for display. For details, see "BoundColumn properties" above.

  • URL format string
    An expression that specifies how the URL will be formatted. The expression can include a .NET Framework formatting expression. For example, you might use a URL format such as the following:

    images/Title-{0}.gif 
    

    This format might result in a URL such as:

    images/Title-1.gif
    

    For details, see "BoundColumn properties" above.

  • Target
    The window in which this column of buttons should be displayed. Enter the name of a window that will exist at run time or select from the predefined list of standard window identifiers.

  • Convert this column into a Template Column
    Recreates the selected column to use as a template, which is a combination of HTML text and controls. This allows you to specify the appearance of the column precisely.

See Also

Concepts

Comparing the GridView and DataGrid Web Server Controls