Dreamweaver

Add an ASP.NET DataGrid control to a page

DataGrid controls let you format and display dynamic data in multi-column grids that are rendered as tables.

Note: Before inserting the DataGrid server behavior, you must define a DataSet (referred to as a recordset by other document types) for the DataGrid.
  1. Open the Server Behaviors panel (Window > Server Behaviors), click the Plus (+) button, and select DataGrid.
  2. Select the ID attribute (or label) of the DataGrid control.

    This field is pre-populated with a value. You can change the value of the DataGrid; however, if you set the value of the field to that of an existing ID, you must enter a new attribute value.

  3. Select a DataSet to associate with the DataGrid.

    This is the DataSet from which the DataGrid retrieves information. Dreamweaver fills the Grid Columns box with bound columns for all of the fields in the selected DataSet.

  4. Specify the number of records to be displayed.
  5. Select the type of page navigation links to implement.

    • The Links To Previous And Next Pages item adds Next and Prev links.

    • The “Numbered Links To Every Page” item adds page-number links— for example, “1 2 3 4 5 n...”.

  6. Remove the grid columns you don’t want by selecting them in the Grid Columns box, and clicking the Minus (-) button.
  7. You can edit the remaining grid columns by selecting a column in the Grid Columns box and setting its properties.

    To change the DataGrid column type, click the Edit button and select a column type from the pop‑up menu. A dialog box specific to the chosen column type appears. Specify the content and formatting of the selected DataGrid column. The following table lists the column types:

    DataGrid column type

    Description

    Simple Data Field

    Referred to as a “bound column” in ASP.NET, the Simple Data Field column lets you specify which data source field to display, and the data format the field will use with a .NET formatting expression. For more information, see Specify and format a data source field in a DataGrid.

    Free Form

    Referred to as a “template column” in ASP.NET, the Free Form column lets you create combinations of HTML text and server controls to design a custom layout for a column. The controls within a free-form column can be data-bound. Free-form columns give you great flexibility in defining the layout and functionality of the grid contents, because you have complete control over how the data is displayed and what happens when users interact with rows in the grid. For more information, see Design a custom layout for a free-form DataGrid column.

    Hyperlink

    The Hyperlink Column displays information as hyperlinks. A typical use is to display data (such as a customer number or product name) as a hyperlink that users can click to navigate to a separate page that provides details about that item. For more information, see Display data as a hyperlink in a DataGrid.

    Edit, Update, Cancel Buttons

    Referred to as the “edit command” column in ASP.NET, the Edit, Update, Cancel Buttons column lets users perform in-place editing of information in DataGrid rows. To do so, create an Edit, Update, Cancel Buttons column. At run time, this column displays a button labeled Edit. When the user clicks the Edit button, the row data is displayed in editable controls such as text fields, and the Edit button is replaced with Update and Cancel buttons. For more information, see Allow users to edit in DataGrid rows.

    Delete Button

    The Delete Button lets a user delete a particular row by clicking a button. For more information, see Allow users to delete a row in a DataGrid.
  8. Repeat the previous step for each column you want to change.
  9. To change the order of the columns in the DataGrid, select a column in the Grid Column box, and click the up or down arrow to move the column left or right in the DataGrid.

In the Document window, the DataGrid is displayed with a tabbed, gray outline surrounding it. In the Live Data window (View > Live Data), the gray outline disappears and the object’s placeholder is replaced with the specified DataGrid.