TDataGrid : Part II

Interacting with TDataGrid

Besides the rich data presentation functionalities as demonstrated in previous section, TDataGrid is also highly user interactive. An import usage of TDataGrid is editting or deleting rows of data. The TBoundColumn can adjust the associated cell presentation according to the mode of datagrid items. When an item is in browsing mode, the cell is displayed with a static text; when the item is in editting mode, a textbox is displayed to collect user inputs. TDataGrid provides TEditCommandColumn for switching item modes. In addition, TButtonColumn offers developers the flexibility of creating arbitrary buttons for various user interactions.

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: TEditCommandColumn and TButtonColumn.

Sorting

TDataGrid supports sorting its items according to specific columns. To enable sorting, set AllowSorting to true. This will turn column headers into clickable buttons if their SortExpression property is not empty. When users click on the header buttons, an OnSortCommand event will be raised. Developers can write handlers to respond to the sort command and sort the data according to SortExpression which is specified in the corresponding column.

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.

Paging

When dealing with large datasets, paging is helpful in reducing the page size and complexity. TDataGrid has an embedding paging feature. By setting AllowPaging to true, a pager is displayed automatically at the bottom of the datagrid. The pager can be further customized by setting PagerStyle, through which you can set pager visibility, mode, position, etc.

When users click on a pager button, TDataGrid raises OnPageIndexChanged event. Typically, the event handler is written as follows,

public function pageIndexChanged($sender,$param) { $this->DataGrid->CurrentPageIndex=$param->NewPageIndex; $this->DataGrid->DataSource=$this->Data; $this->DataGrid->dataBind(); }

The following example enables the paging functionality of the datagrid shown in Example 1. In this example, you can set various pager styles interactively to see how they affect the pager display.

Custom Paging

Extending TDataGrid