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:
Please refer to the original documentation of TDataGrid for basic usage.
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.
The following example uses manually specified columns to show a list of book information,
Each column can be shown or hidden in a callback.
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.
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.
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.