1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
<com:TContent ID="body" >
<h1>TDataGrid : Part II</h1>
<h2>Interacting with TDataGrid</h2>
<p>
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 <tt>TBoundColumn</tt> 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 <tt>TEditCommandColumn</tt> for switching item modes. In addition, <tt>TButtonColumn</tt> offers developers the flexibility of creating arbitrary buttons for various user interactions.
</p>
<p>
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: <tt>TEditCommandColumn</tt> and <tt>TButtonColumn</tt>.
</p>
<com:RunBar PagePath="Controls.Samples.TDataGrid.Sample3" />
<h2>Sorting</h2>
<p>
TDataGrid supports sorting its items according to specific columns. To enable sorting, set <tt>AllowSorting</tt> to true. This will turn column headers into clickable buttons if their <tt>SortExpression</tt> property is not empty. When users click on the header buttons, an <tt>OnSortCommand</tt> event will be raised. Developers can write handlers to respond to the sort command and sort the data according to <tt>SortExpression</tt> which is specified in the corresponding column.
</p>
<p>
The following example turns the datagrid in <a href="?page=Controls.Samples.TDataGrid.Sample2">Example 2</a> 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.
</p>
<com:RunBar PagePath="Controls.Samples.TDataGrid.Sample4" />
<h2>Paging</h2>
<p>
When dealing with large datasets, paging is helpful in reducing the page size and complexity. TDataGrid has an embedded pager that allows users to specify which page of data they want to see. The pager can be customized via <tt>PagerStyle</tt>. For example, <tt>PagerStyle.Visible</tt> determines whether the pager is visible or not; <tt>PagerStyle.Position</tt> indicates where the pager is displayed; and <tt>PagerStyle.Mode</tt> specifies what type of pager is displayed, a numeric one or a next-prev one.
</p>
<p>
To enable paging, set <tt>AllowPaging</tt> to true. The number of rows of data displayed in a page is specified by <tt>PageSize</tt>, while the index (zero-based) of the page currently showing to users is by <tt>CurrentPageIndex</tt>. When users click on a pager button, TDataGrid raises <tt>OnPageIndexChanged</tt> event. Typically, the event handler is written as follows,
</p>
<com:TTextHighlighter CssClass="source">
public function pageIndexChanged($sender,$param) {
$this->DataGrid->CurrentPageIndex=$param->NewPageIndex;
$this->DataGrid->DataSource=$this->Data;
$this->DataGrid->dataBind();
}
</com:TTextHighlighter>
<p>
The following example enables the paging functionality of the datagrid shown in <a href="?page=Controls.Samples.TDataGrid.Sample1">Example 1</a>. In this example, you can set various pager styles interactively to see how they affect the pager display.
</p>
<com:RunBar PagePath="Controls.Samples.TDataGrid.Sample5" />
<h3>Custom Paging</h3>
<p>
The paging functionality shown above requires loading all data into memory, even though only a portion of them is displayed in a page. For large datasets, this is inefficient and may not always be feasible. TDataGrid provides custom paging to solve this problem. Custom paging only requires the portion of the data to be displayed to end users.
</p>
<p>
To enable custom paging, set both <tt>AllowPaging</tt> and <tt>AllowCustomPaging</tt> to true. Notify TDataGrid the total number of data items (rows) available by setting <tt>VirtualItemCount</tt>. And respond to the <tt>OnPageIndexChanged</tt> event. In the event handler, use the <tt>NewPageIndex</tt> property of the event parameter to fetch the new page of data from data source. For MySQL database, this can be done by using <tt>LIMIT</tt> clause in an SQL select statement.
</p>
<com:RunBar PagePath="Controls.Samples.TDataGrid.Sample6" />
<h2>Extending TDataGrid</h2>
<p>
Besides traditional class inheritance, extensibility of TDataGrid is mainly through developing new datagrid column components. For example, one may want to display an image column. He may use <tt>TTemplateColumn</tt> to accomplish this task. A better solution is to develop an image column component so that the work can be reused easily in other projects.
</p>
<p>
All datagrid column components must inherit from <tt>TDataGridColumn</tt>. The main method that needs to be overridden is <tt>initializeCell()</tt> which creates content for cells in the corresponding column. Since each cell is also in an item (row) and the item can have different types (such as <tt>Header</tt>, <tt>AltneratingItem</tt>, etc.), different content may be created according to the item type. For the image column example, one may want to create a <tt>TImage</tt> control within cells residing in items of <tt>Item</tt> and <tt>AlterantingItem</tt> types.
</p>
<com:TTextHighlighter CssClass="source">
class ImageColumn extends TDataGridColumn {
...
public function initializeCell($cell,$columnIndex,$itemType) {
parent::initializeCell($cell,$columnIndex,$itemType);
if($itemType==='Item' || $itemType==='AlternatingItem') {
$image=new TImage;
// ... customization of the image
$cell->Controls[]=$image;
}
}
}
</com:TTextHighlighter>
<p>
In <tt>initializeCell()</tt>, remember to call the parent implementation, as it initializes cells in items of <tt>Header</tt> and <tt>Footer</tt> types.
</p>
</com:TContent>
|
