TActiveDataGrid

API Manual

TActiveDataGrid represents a data bound and updatable grid control which is the active counterpart to the original TDataGrid control.

This component can be used in the same way as the regular datagrid, the only difference is that the active datagrid uses callbacks instead of postbacks for interaction.

PRADO provides eight new types of active columns that can be used inside TActiveDataGrid; they are the active counterpart of TDataGrid's columns:

• TActiveBoundColumn associates cells with a specific field of data and displays the cells according to their modes.
• TActiveLiteralColumn associates cells with a specific field of data and displays the cells with static texts.
• TActiveCheckBoxColumn associates cells with a specific field of data and displays in each cell a checkbox whose check state is determined by the data field value.
• TActiveDropDownListColumn associates cells with a specific field of data and displays the cells according to their modes. If in edit mode, a cell will be displayed with a TDropDownList.
• TActiveHyperLinkColumn displays in the cells a hyperlink whose caption and URL can be either statically specified or bound to some fields of data.
• TActiveEditCommandColumn displays in the cells edit/update/cancel command buttons according to the state of the item that a cell resides in.
• TActiveButtonColumn displays in the cells a command button.
• TActiveTemplateColumn displays the cells according to different templates defined for it.

Please refer to the original documentation of TDataGrid for basic usage.

Columns

Automatically Generated Columns

TDataGrid by default will create a list of columns based on the structure of the bound data. TDataGrid will read the first row of the data, extract the field names of the row, and construct a column for each field. Each column is of type TActiveBoundColumn. All of this happens in an ajax callback.

Manually Specified Columns

The following example uses manually specified columns to show a list of book information,

• Book title - displayed as a hyperlink pointing to the corresponding amazon.com book page. TActiveHyperLinkColumn is used.
• Publisher - displayed as a piece of text using TvBoundColumn.
• Price - displayed as a piece of text using TActiveBoundColumn with output formatting string and customized styles.
• In-stock or not - displayed as a checkbox using TActiveCheckBoxColumn.
• Rating - displayed as an image using TActiveTemplateColumn which allows maximum freedom in specifying cell contents.

Each column can be shown or hidden in a callback.

Interacting with TActiveDataGrid

The following example shows how to make the previous book information table an interactive one. It allows users to edit and delete book items from the table. Two additional columns are used in the example to allow users interact with the datagrid: TActiveEditCommandColumn and TActiveButtonColumn. In addition, TActiveDropDownListColumn replaces the previous TActiveTemplateColumn to allow users to select a rating from a dropdown list. Note, it is also possible to use TActiveTemplateColumn to achieve the same task. All the iteration is done using AJAX callbacks.

Sorting

The following example turns the datagrid in Example 2 into a sortable one. Users can click on the link button displayed in the header of any column, and the data will be sorted in ascending order along that column. The grid is sorted and rendered upon a callback request.

Paging

The following example enables the paging functionality of the datagrid shown in Example 1. In this example, you move between the datagrid pages clicking on the pager links. The grid reacts to paging rendering itself as the result of a callback request. Note that you can't change the pager style upon callback.