blob: 7e48774499fd709c3cf591119cddf9ae05253516 (
plain)
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
76
77
78
79
80
81
82
83
|
<com:TContent ID="body" >
<h1 id="5201">TActiveDataGrid</h1>
<com:DocLink ClassPath="System.Web.UI.ActiveControls.TActiveDataGrid" />
<p class="block-content">
<tt>TActiveDataGrid</tt> represents a data bound and updatable grid control which is the
active counterpart to the original <tt>TDataGrid</tt> control.
</p>
<p class="block-content">
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.
</p>
<p class="block-content">
PRADO provides eight new types of active columns that can be used inside <tt>TActiveDataGrid</tt>;
they are the active counterpart of <tt>TDataGrid</tt>'s columns:
</p>
<ul class="block-content">
<li><tt>TActiveBoundColumn</tt> associates cells with a specific field of data and displays the cells according to their modes.</li>
<li><tt>TActiveLiteralColumn</tt> associates cells with a specific field of data and displays the cells with static texts.</li>
<li><tt>TActiveCheckBoxColumn</tt> 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.</li>
<li><tt>TActiveDropDownListColumn</tt> 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 <tt>TDropDownList</tt>.</li>
<li><tt>TActiveHyperLinkColumn</tt> displays in the cells a hyperlink whose caption and URL can be either statically specified or bound to some fields of data.</li>
<li><tt>TActiveEditCommandColumn</tt> displays in the cells edit/update/cancel command buttons according to the state of the item that a cell resides in.</li>
<li><tt>TActiveButtonColumn</tt> displays in the cells a command button.</li>
<li><tt>TActiveTemplateColumn</tt> displays the cells according to different templates defined for it.</li>
</ul>
<p class="block-content">
Please refer to the original documentation of <a href="?page=Controls.DataGrid">TDataGrid</a> for basic usage.
</p>
<h2 id="150012">Columns</h2>
<h3 id="150016">Automatically Generated Columns</h3>
<p class="block-content">
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 <tt>TActiveBoundColumn</tt>. All of this happens in an ajax callback.
</p>
<com:RunBar PagePath="ActiveControls.Samples.TActiveDataGrid.Sample1" />
<h3 id="150017">Manually Specified Columns</h3>
<p class="block-content">
The following example uses manually specified columns to show a list of book information,
</p>
<ul id="u4" class="block-content">
<li>Book title - displayed as a hyperlink pointing to the corresponding amazon.com book page. <tt>TActiveHyperLinkColumn</tt> is used.</li>
<li>Publisher - displayed as a piece of text using <tt>TvBoundColumn</tt>.</li>
<li>Price - displayed as a piece of text using <tt>TActiveBoundColumn</tt> with output formatting string and customized styles.</li>
<li>In-stock or not - displayed as a checkbox using <tt>TActiveCheckBoxColumn</tt>.</li>
<li>Rating - displayed as an image using <tt>TActiveTemplateColumn</tt> which allows maximum freedom in specifying cell contents.</li>
</ul>
<p class="block-content">
Each column can be shown or hidden in a callback.
</p>
<com:RunBar PagePath="ActiveControls.Samples.TActiveDataGrid.Sample2" />
<h2 id="150013">Interacting with TActiveDataGrid</h2>
<p class="block-content">
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>TActiveEditCommandColumn</tt> and <tt>TActiveButtonColumn</tt>. In addition,
<tt>TActiveDropDownListColumn</tt> replaces the previous <tt>TActiveTemplateColumn</tt> to allow users to select a rating from a dropdown list. Note, it is also possible to use <tt>TActiveTemplateColumn</tt> to achieve the same task.
All the iteration is done using AJAX callbacks.
</p>
<com:RunBar PagePath="ActiveControls.Samples.TActiveDataGrid.Sample3" />
<h2 id="150014">Sorting</h2>
<p class="block-content">
The following example turns the datagrid in <a href="?page=ActiveControls.Samples.TActiveDataGrid.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. The grid is sorted and rendered upon a callback request.
</p>
<com:RunBar PagePath="ActiveControls.Samples.TActiveDataGrid.Sample4" />
<h2 id="150015">Paging</h2>
<p class="block-content">
The following example enables the paging functionality of the datagrid shown in <a href="?page=ActiveControls.Samples.TActiveDataGrid.Sample1">Example 1</a>. 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.
</p>
<com:RunBar PagePath="ActiveControls.Samples.TActiveDataGrid.Sample5" />
</com:TContent>
|
